DeepSeaFeels: Matching Moods with Marine Vibes

TL;DR

Built a mood-matching React app that pairs emotions with sea creatures using React hooks, TypeScript, and Framer Motion. Perfect for learning component state management and animation patterns.

Who This Is For

• React beginners learning hooks and state management
• Frontend developers exploring animation libraries
• Anyone wanting a fun first TypeScript project

Prerequisites: Basic HTML/CSS, some JavaScript experience helpful.

---

Ever feel like your emotions run as deep as the ocean? That was pretty much the idea behind DeepSeaFeels, a little side project where you pick your mood, and it shows you a sea creature that captures your vibe. No accounts, no data tracking — just a bit of fun and a chance to sharpen my frontend skills.

In this post, I'll share what I built, what I learned, and a few challenges I ran into.

🌊 What's DeepSeaFeels?

Here's how it works:

1. You pick how you're feeling (like happy, stressed, or tired).
2. The app reveals an underwater creature along with a short, friendly blurb.
3. That's it — just pure, mood-based ocean energy. 🐙

It's meant to be simple and a little bit whimsical.

🔧 Tech Stack

• React (TypeScript) – for all the component logic and state handling.
• Tailwind CSS – to quickly style everything without leaving my markup.
• Framer Motion – for smooth, subtle animations.
• Mock Data – I created a simple mapping of moods to creatures instead of using an API.

🧠 What I Learned

1. Hooks and State Management

This was one of my first times leaning heavily on useState and useEffect in a project. I got comfortable with conditional rendering, resetting state, and lifting state up to keep everything in sync.

// Example of state management
const [selectedMood, setSelectedMood] = useState<string | null>(null);
const [isAnimating, setIsAnimating] = useState(false);

useEffect(() => {
  if (selectedMood) {
    setIsAnimating(true);
    // Trigger animation sequence
  }
}, [selectedMood]);

2. Building Modular Components

I split the UI into clear, reusable components: one for mood selection, one for the result, and a few smaller ones for layout and animations. This helped me think more intentionally about separation of concerns.

3. Tailwind Workflow

Tailwind turned out to be a huge time-saver. Being able to tweak styles right in the markup made me much faster, and I learned a lot about how consistent spacing and typography improve the feel of an app.

4. Animations with Framer Motion

Even basic fade-ins and slides made the UI feel more polished. It was a good intro to how animation libraries can add life to React projects without much overhead.

🤯 Challenges

• Making the experience feel natural without any real-time API data.
• Figuring out which creatures matched each mood (it took more brainstorming than I expected).
• Not overcomplicating the project — keeping it small on purpose.

🐳 Sneak Peek

🔗 Check It Out

💬 Next Steps

Ready to build your own mood-based app?

1. Start with basic React hooks - useState and useEffect
2. Try Framer Motion docs for animations
3. Experiment with Tailwind's animation utilities

Related concepts to explore:

• Advanced React animation patterns
• TypeScript with React hooks
• Building engaging micro-interactions

Enjoyed this project? Let me know what mood-based apps you'd build or share your own creative coding experiments at /contact.

— Maruf