DiverseLearning

Live on Vercel. Built with AI-assisted development — designed and directed by me, implemented with AI pair programming.

Description

What it does: Tell it anything you're curious about and it generates a course built just for you. Instead of a wall of text, each lesson concept is rendered as a labeled 3D model you can rotate and zoom. Hit Break apart to explode the model into its parts and click any piece for a plain-language explanation of what it does.

Why I built it: I was asked to think about how neurodiverse learners actually want to learn, and I realized modeled learning is powerful — it strips out unnecessary words and shows what each part does. The whole design goal is to reduce reading load and let the model do the teaching, with text-to-speech and accessibility settings for the writing that remains.

How it was built: Next.js 14 + React 18 frontend with React Three Fiber / drei for the 3D scene. Courses are data-driven JSON — a free-model chain (Groq → OpenRouter failover) writes a 4-lesson course, and each lesson ships a labeled primitive model spec that the viewer renders with no code change. Supabase stores each learner's preferences and their saved course/model data.

Architecture

DiverseLearning — Course Generation Flow ═════════════════════════════════════════ "Teach me about Groq ──► OpenRouter volcanoes" (free model, failover chain) │ │ └──────────► Course Generator ──► Course JSON (4 lessons + ├─ lesson text ModelSpec each) └─ labeled 3D parts │ Supabase (per user) │ React Three Fiber │ ┌────────────────────────────┐ │ Rotate · Zoom │ │ Break apart (explode) │ │ Click a part → explain │ │ Text-to-speech + a11y │ └────────────────────────────┘

Dev Notes

Problem Solved

Textbooks aren't the best fit for everyone, but almost anyone can learn from a model of the thing they're studying. DiverseLearning makes that the default: every concept becomes something you can see, rotate, and pull apart instead of just read.

Technical Highlights

Courses are fully data-driven — the AI outputs a model spec of labeled primitives and the viewer renders it with no bespoke code per topic. A Groq → OpenRouter failover chain keeps generation on free models, and Supabase gives each learner accounts plus cloud-saved courses.

What's Next

Better 3D model quality (free models still struggle with complex shapes), AI-generated explainer videos, and adapting to each learner's most successful learning method automatically.

Try the live demo