01
Overview
MindPalette is a cloud-synced mood tracking application that transforms daily emotional check-ins into a beautiful, expressive visual story.
Instead of logging emotions in traditional spreadsheets, MindPalette transforms your year into a gentle, aesthetic grid canvas - where each day becomes a brushstroke of color, emotion, and personal reflection.
Built with Next.js and Supabase, the app features seamless authentication, real-time data sync, and fluid animations powered by Framer Motion. State management via Zustand ensures a smooth, responsive experience.
Highlights
- →Year-long mood grid canvas with color-coded emotional visualization
- →Cloud-synced with Supabase for seamless cross-device access
- →Fluid, gesture-driven animations with Framer Motion
Challenges
- →Designing an intuitive color-emotion mapping system that feels natural and visually harmonious across the full spectrum of moods.
- →Implementing real-time sync with Supabase while handling offline states and conflict resolution gracefully.
- →Creating smooth, performant animations for the mood grid with hundreds of cells without jank.
Key Learnings
- →Learned how to design emotionally resonant UIs that prioritize aesthetics alongside functionality.
- →Gained experience with Supabase's real-time capabilities and row-level security policies.
- →Mastered Zustand for lightweight, scalable state management in React applications.