A consistent product system
Share navigation, surfaces, controls and preference providers across learner, studio and admin interfaces.
Gamified learning prototypePrototype
Nova Learning
A learning-product prototype connecting micro-lessons, practice challenges, project spaces and a visual learning universe.
- My part
- Front-end development and product interface design
- Status
- Prototype
- Built with
- Next.js
- React
- TypeScript
- Tailwind CSS
- Zustand
No public demo — this page is the full write-up.
Fresh captures of the actual local prototype in explicit Demo Mode. Learning statistics are fictional demo data.
Why it exists
Explore a learning experience connecting practice, projects and visible progression through a reusable interface system for student, studio and administration spaces.
My part: front-end development and product interface design.
How it is built
Next.js App Router, React, TypeScript, Zustand, TanStack Query, React Hook Form and Zod. Supabase integration and API routes exist; production configuration and security are not certified by this portfolio. AI demo responses are distinct from configured provider calls.
What is implemented
- Cinematic landing and explicit demo sign-in
- Learning universe and student dashboard
- Course, project and challenge routes
- Studio and administration interface structures
- English/Arabic localization and accessibility preferences
- AI-provider abstraction with an explicit demo fallback
Hard parts and decisions
Clear prototype boundaries
Identify demo responses and integration scaffolding without claiming a deployed AI product.
Where it stands today
PrototypeLocal prototype with demo data and AI-provider scaffolding. Live AI delivery and a production deployment have not been verified.