Mood Tracker

• 

  Our app!

Inspiration

For our beginner’s track project we wanted to create a mood tracker that doesn’t feel clinical or overwhelming. Mental health tools can feel rigid, but emotions are fluid—like water. Inspired by ocean calm and mermaid energy, we built something reflective, gentle, and visually soothing.

What it does

Mood Tracker allows users to type how they’re feeling and receive instant sentiment analysis. The app interprets emotional tone using a large curated word bank and returns a mood label, emoji, and supportive feedback. Entries are saved locally so users can revisit their emotional patterns over time.

How we built it

We built Mood Tracker using:

• Vite + Vanilla JavaScript

• Custom CSS with glassmorphism and animated shimmer effects

• Google Fonts for a soft serif/sans pairing

• A handcrafted sentiment analysis engine with weighted positive/negative words

• LocalStorage to persist user entries

The UI was intentionally designed to feel like a floating ocean glass panel over a beach background.

Challenges we ran into

• Chrome aggressively caching the favicon

• Handling edge cases in sentiment detection (like negations: “not happy”)

• Avoiding [object Object] rendering issues when storing structured entries

• Balancing strong vs. subtle emotional word weighting

• Ensuring the aesthetic stayed calming instead of overwhelming

Accomplishments that we’re proud of

• Creating a fully custom sentiment engine without external APIs

• Designing an animated, glass-style UI with shimmer and floating motion

• Successfully storing and rendering structured entries

• Achieving a cohesive ocean-inspired visual identity

• Making the app feel emotionally supportive, not robotic

What we learned

• Sentiment analysis is more nuanced than simple keyword matching

• Weighting and negation handling significantly improve accuracy

• Browser caching (especially for favicons) can be deceptively tricky

• Visual design greatly impacts how users emotionally engage with a product

• Even small UX details (animations, tone of feedback) matter

What’s next for Mood Tracker

• Real AI-powered sentiment analysis using an LLM API

• Mood trend visualization over time (charts & patterns)

• Private user accounts with secure cloud storage

• Customizable themes (Lagoon, Deep Sea, Sunset Tide)

• Optional journaling prompts based on detected mood

• Daily reflection reminders

Built With

• chatgpt