Toodles

Running our project locally
Code

Inspiration Inspired by Apple Watch's "State of Mind" feature, we created a kid-friendly emotion check-in app. Many children struggle to express their feelings, and traditional check-ins can feel clinical. We wanted something warm, encouraging, and designed specifically for kids aged 6-12.

What it does Unpack helps kids understand and express their emotions through an intuitive interface: Circular Intensity Dial: Kids drag or scroll to show how big their feeling is (0-100) Emotion Words: Select from kid-friendly words like "calm", "buzzy", "excited", "stormy" with emojis AI-Powered Activities: Personalized support activities generated by OpenAI GPT-4 that adapt to each child's specific feelings Voice Guidance: ElevenLabs text-to-speech provides welcoming, kid-friendly voice instructions Beautiful Animations: Lottie animations on every page for visual engagement History & Insights: View patterns over time with charts and word frequency Privacy-First: All data stored locally - no accounts, no tracking

How we built it Tech Stack: Next.js 14 (App Router) + TypeScript Tailwind CSS + Framer Motion for animations OpenAI GPT-4 for AI agent (with GradientAI fallback) ElevenLabs API for text-to-speech Recharts for data visualization Lottie React for JSON animations LocalStorage for privacy (no backend) Key Components: Custom CrownDial component (circular intensity selector) Multi-provider AI system (OpenAI → Anthropic → GradientAI → Smart Fallback) Page-specific animations that adapt to context Speech queue system to prevent voice overlap

Challenges we ran into Voice Overlap: Multiple voices speaking simultaneously → Fixed with speech queue and button disabling AI Response Quality: Generic responses → Enhanced prompts with empathetic acknowledgment Animation SSR: Lottie crashes in Next.js → Dynamic imports with ssr: false Dial Conflicts: Too large, conflicting with elements → Reduced size, fixed z-index Kid-Friendly Language: Making AI responses age-appropriate → Detailed system prompts Accomplishments that we're proud of ✅ Beautiful, kid-friendly UI inspired by Apple Watch design ✅ Human-like AI responses that feel like a caring friend ✅ Privacy-first: no backend, all data local ✅ Accessible: voice guidance, large text, emojis ✅ Robust error handling with graceful fallbacks ✅ Smooth UX with proper loading states and transitions

What we learned Kids need simple interactions with visual feedback (emojis + animations) AI prompt engineering is crucial for tone and quality Context-aware prompts produce much better personalized results Multi-provider architecture improves reliability Apple's design language translates well to kid-friendly apps

What's next for Unpack More animation variety and seasonal themes Enhanced history with weekly/monthly summaries Optional parent/teacher dashboard (privacy-preserving) Offline support with service workers Multi-language support Social-Emotional Learning curriculum integration