MoodMap-Smart Mood Tracker

• 

• 

• 

• 

• 

• 

Inspiration

The inspiration for MoodMap came from a personal experience during school. My psychology teacher introduced me to the concept of mood tracking as a way to better understand emotions and emotional patterns. I started tracking my moods manually in notebooks and journals, and over time I realized how helpful it was for self-awareness and reflection.

However, manual tracking was not always convenient or accessible. That inspired me to create a digital version that feels modern, interactive, and easy to use every day. I wanted to make mood tracking more accessible to everyone while keeping the experience visually calming and emotionally engaging.

What it does

MoodMap is a smart mood tracking application that helps users monitor and understand their emotional patterns over time.

Features include: Multi-mood daily tracking, Timeline-based emotional logging, Calendar mood board visualization, Light and dark themes, Animated modern UI with flowing gradient effects, Personalized insights based on mood patterns, Mood streak tracking and statistics, User authentication with private data storage, Guest mode using local storage for first-time users, Onboarding experience for new users.

The app helps users identify trends such as how sleep, activities, or time of day affect their emotions.

How we built it

I built MoodMap as a modern single-page web application using a React-based frontend and Supabase as the backend service. Frontend: React 18 with TypeScript, Vite (rolldown-vite) for builds, Tailwind CSS 3.4 for styling, shadcn/ui component system built on Radix UI primitives, Lucide React for icons.

Routing & State: React Router v7 for navigation and React Hook Form + Zod for form handling and validation.

Backend & Auth: Supabase (PostgreSQL database + Auth) and Edge Functions for server-side operations.

Data & Visualization: Recharts for mood pattern charts and stats, date-fns for date formatting, react-day-picker for calendar view.

UI & Interactions: Sonner for toast notifications, next-themes for light/dark theme toggle, Framer Motion (via motion package) for smooth animations.

Dev Tools: TypeScript 5.9, Biome for linting, PostCSS + Autoprefixer. The app follows a React + Vite + Tailwind + shadcn/ui stack with Supabase as the managed backend, deployed as a modern single-page web application.

Challenges we ran into

One of the biggest challenges I faced was handling user-specific data properly. During testing, all mood entries were appearing globally, so I had to redesign the data structure using authentication and Row Level Security (RLS) policies to securely isolate each user’s data.

Another challenge was balancing aesthetics with usability. I wanted the app to feel visually calming and modern while still remaining readable and lightweight. Creating smooth animated backgrounds and maintaining performance across both light and dark themes required several design iterations.

I also improved the emotional tracking system from a simple “one mood per day” model into a more realistic multi-mood timeline approach that better reflects how emotions change throughout the day.

Accomplishments that we're proud of

I’m proud of creating an emotionally engaging and polished application experience rather than just a basic tracker.

Some highlights include:

Fully functional authentication and private user data isolation, Smooth onboarding experience, Modern animated UI with flowing yellow gradient effects, Multi-mood tracking system, Responsive light and dark themes, Smart mood insights and visualizations, Guest mode for seamless first-time use.

I’m especially proud of the overall user experience, design consistency, and how the app combines emotional wellness with modern interactive design.

What we learned

Through building MoodMap, I learned:

How authentication and database security work in real-world applications The importance of Row Level Security and user-specific data filtering How UI animations and small interactions greatly improve user experience The value of emotional design and accessibility in mental wellness apps How to structure scalable frontend and backend systems using MeDo and Supabase

We also learned that simplicity and clarity are often more impactful than adding too many features.

What's next for MoodMap-Smart Mood Tracker

In the future, we want to expand MoodMap with:

AI-powered emotional insights and recommendations, Mood prediction based on behavior patterns, Journaling and voice note support, Wellness suggestions based on emotional trends, Daily reminders and smart notifications, Social sharing or anonymous support communities, Wearable integration (sleep and activity tracking), Data export and advanced analytics.

We also plan to further improve accessibility, personalization, and emotional well-being features to make MoodMap a more complete mental wellness platform.

Built With

• and-date-fns-for-date-management.-additional-technologies-included-framer-motion-for-animations
• and-development-tools-such-as-biome
• and-radix-ui-components
• and-react-hook-form-with-zod-was-used-for-form-handling-and-validation.-supabase-was-used-for-backend-services
• and-row-level-security-(rls)-for-secure-user-specific-data-isolation.-recharts-was-used-for-mood-analytics-and-data-visualization
• edge-functions
• including-authentication
• next-themes-for-light/dark-mode-support
• postcss
• postgresql
• postgresql-database-storage
• react-day-picker-for-calendar-functionality
• rls
• shadcn/ui
• sonner-for-toast-notifications
• superbase
• typescript
• vite
• while-lucide-react-provided-the-icon-system.-react-router-v7-handled-navigation