SkillBloom

AI-Powered Micro-Learning That Grows With You

Comment

Links:

-github repo -Demo

Inspiration

Learning a new skill feels overwhelming. Online courses have 90% dropout rates because they require hours of commitment. We wanted to create something different - a learning platform that feels effortless, visual, and actually enjoyable. What if learning could feel like nurturing a garden instead of climbing a mountain?

What it does

SkillBloom transforms skill development into a delightful daily ritual:

  • AI-Personalized Lessons: Mistral AI generates custom 5-minute micro-lessons tailored to your skill and level
  • 3D Growth Garden: Your skills are visualized as beautiful 3D plants that grow from seeds to blooming flowers as you learn
  • Smart Gamification: XP, daily streaks, achievement badges, and interactive goals keep you motivated
  • Adaptive Quizzes: AI-generated questions reinforce what you learned
  • Celebration Effects: Confetti and animations make every win feel special

The magic happens in your personalized garden dashboard where you can see all your skills growing in real-time with a stunning Three.js 3D visualization complete with fireflies, stars, and auto-rotating camera.

How we built it

Frontend: Next.js 14 with TypeScript, Tailwind CSS, Framer Motion for animations, Three.js + @react-three/fiber for the 3D garden, canvas-confetti for celebrations

AI & Data: Mistral AI API for intelligent lesson and quiz generation, localStorage for data persistence, fallback content system ensures the app never crashes

Design: Dark theme with gradient accents, glassmorphism cards, mobile-first responsive design, accessibility-focused semantic HTML

Challenges we ran into

  1. 3D Rendering Performance: Creating a smooth 3D garden with multiple plants, particles, and effects while maintaining 60fps required optimizing with instanced meshes and careful geometry management
  2. AI Response Parsing: Mistral AI sometimes returned unexpected formats. We implemented robust JSON extraction with regex and comprehensive fallback content
  3. State Management: Syncing plant growth, XP, streaks, and daily goals across page reloads using only localStorage required careful data structure design
  4. Daily Reset Logic: Making daily goals reset at midnight while preserving completed goals required proper timestamp handling

Accomplishments that we're proud of

  • Zero Mock Data: Everything is dynamic - from AI-generated lessons to user progress tracking
  • Graceful Degradation: Built-in fallback content means the app always works, even without API keys
  • Beautiful 3D Garden: Stunning, interactive visualization with terracotta pots, organic plant growth, fireflies, and starry background
  • Complete User Flow: From onboarding to learning to celebrating - every interaction is polished
  • Production Ready: Clean code, no TODOs, comprehensive error handling, professional documentation

What we learned

  • Three.js Mastery: Creating complex 3D scenes with React, including instanced rendering, custom materials, and camera controls
  • AI Integration: Hands-on experience with Mistral AI API, prompt engineering, and LLM response handling
  • Performance Optimization: Techniques for keeping React + Three.js apps smooth
  • localStorage Best Practices: Structuring client-side data and implementing daily reset logic
  • UX Psychology: How gamification, micro-wins, and visual feedback drive engagement

What's next for SkillBloom

  • User Authentication (Supabase/Firebase) for multi-device sync
  • Social Features - share gardens, compete on streaks
  • More AI Models (GPT-4, Claude, Gemini)
  • Spaced Repetition for evidence-based learning
  • Mobile App with offline support
  • Community Gardens for collaborative learning
  • Achievement System with unlockable plants
  • Analytics Dashboard for learning patterns

Built With

Share this project:

Updates