BloomTracker: Habit Garden with AI

Watch your daily habits bloom into a vibrant digital garden — powered by AI insights that help you grow personally.

Comment

Inspiration

I wanted to make habit tracking fun and motivating instead of boring checklists. The "Code Spring" hackathon name inspired the core idea: a digital garden where your daily habits "grow" plants, flowers, and even attract butterflies as you build streaks. Combined with real AI insights, it turns personal growth into a visually rewarding experience — like watching spring bloom in real time!

Personal productivity apps often feel clinical, so I aimed for something joyful and metaphorical that encourages long-term consistency.

What it does

Log daily habits (e.g., "Exercised 30 mins" or "Read a chapter"). Watch a dynamic garden visualization grow: central plant stretches, flowers bloom at milestones, extra flora appears, sun bounces, butterfly flutters. Get personalized AI insights powered by Groq analyzing your habits for motivational, specific advice.

How we built it

Frontend: Next.js 14 (App Router) with TypeScript for fast, modern development. Styling: Tailwind CSS for responsive, beautiful UI with gradients and shadows. Animations: Framer Motion for smooth plant growth, sun bounce, and butterfly flight. State & Persistence: React hooks + localStorage for instant saving (MVP speed). AI Integration: Groq SDK via serverless API route — sends habit list, gets tailored insights with a custom "garden coach" prompt. Deployed on Vercel for seamless hosting.

Challenges we ran into

Time crunch: Built entirely during the hackathon sprint — prioritized core MVP (functional garden + AI) over extras like auth/database. Dynamic visualization: Getting the plant to "grow" smoothly while adding progressive elements (flowers at 60%, butterfly at high streaks) required clever Framer Motion timing. AI prompting: Crafting a prompt that gives short, encouraging, habit-specific responses without hallucinations.

Accomplishments that we're proud of

Unique & Engaging Visualization: Creating a dynamic "digital garden" that literally grows with user habits — from a single sprouting plant to full bloom with flowers, extra flora, bouncing sun, and fluttering butterfly. The Framer Motion animations make progress feel rewarding and joyful, turning habit tracking into a delightful experience. Real AI Integration in Record Time: Seamlessly adding personalized insights powered by Groq's ultra-fast LLM. The custom prompt produces motivational, habit-specific advice with a garden theme — all via a secure Next.js API route. This elevates the app from basic tracker to intelligent coach. Polished MVP in a Sprint: Built a fully functional, responsive, persistent app (localStorage saving) with beautiful Tailwind styling, smooth navigation, and on-theme UI — entirely during the hackathon window. It looks and feels production-ready. Theme Perfect Fit: Nailing the "spring" metaphor — habits "bloom" your personal growth garden. Judges will remember the creativity!

We're especially proud that it's not just functional — it's motivating and fun to use, proving small code can create big emotional impact.

What we learned

Rapid AI Integration: Diving deep into Groq SDK and Next.js serverless API routes. Learned how powerful fast inference is for real-time UX, and the art of crafting focused prompts for consistent, themed responses without hallucinations. Creative Animation Techniques: Mastering Framer Motion for progressive, conditional animations (e.g., plant height scaling, timed element reveals, infinite loops). Discovered how subtle motion dramatically boosts engagement in data visualization. MVP Prioritization: In a tight sprint, focusing on core delight (garden growth + AI) over nice-to-haves taught ruthless scoping — but still delivering a visually stunning result with Tailwind's utility classes. Metaphors Matter: Using a garden theme made abstract habit-building tangible and emotional. Reinforced that creative concepts can make apps stickier and more shareable.

What's next for BloomTracker: Habit Garden with AI

Cloud Sync & Auth: Integrate Supabase or Firebase for user accounts, cross-device syncing, and social features (share your garden progress). Advanced AI Features: Multi-day trend analysis, goal suggestions, mood integration, and voice input for logging habits. Mobile Optimization/PWA: Make it installable and fully responsive for on-the-go logging. Community Gardens: Let users visit friends' gardens or join challenges for social motivation.

Built With

Share this project:

Updates