Spark is an interactive micro-learning platform that demystifies 13 emerging technology domains — from AI and Robotics to Quantum Computing and Space Tech — through jargon-free, bite-sized lessons and addictive visual storytelling.
Traditional tech education is dense, jargon-heavy, and intimidating. Spark flips that script:
- Jargon-free first - Every concept is explained in plain language before any technical term is introduced.
- Micro-learning - Lessons are 3-5 minutes long, designed for busy schedules and short attention spans.
- Visual storytelling - Knowledge is represented as ascending dimensions and orbiting worlds, turning abstract topics into tangible, explorable spaces.
- Gamified progression - Streaks, points, quizzes, and celebration screens keep learners motivated and coming back.
- Mobile-first - The entire experience is optimised for phones, where most informal learning happens.
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS + shadcn/ui component library |
| Animations | Framer Motion |
| Routing | React Router v6 |
| State / Data | TanStack React Query |
| Backend | Supabase (authentication, database, edge functions) |
| Forms | React Hook Form + Zod validation |
| Charts | Recharts |
| Design System | Custom HSL-based semantic tokens with dark-mode support |
- Onboarding flow — Topic selection and personalised learning path
- Animated dashboard — Orbiting worlds visualisation showing module progress
- Module & lesson views — Content screens, interactive quizzes, and celebration moments
- Progress island — A gamified progress map that grows as learners advance
- User profiles — Streak tracking, points, and completion stats
- Auth system — Email sign-up, login, and password reset
src/
├── assets/ # Generated illustrations and hero images
├── components/
│ ├── spark/ # App-specific components (nav, animations, cards)
│ └── ui/ # shadcn/ui primitives
├── contexts/ # React context providers
├── data/ # Module and lesson content definitions
├── hooks/ # Custom hooks (auth, progress, mobile detection)
├── integrations/ # Backend client configuration
├── pages/ # Route-level page components
└── types/ # TypeScript type definitions
The app is available at Spark-Micro Learning Hub
This project is private and built with Lovable.