Lumos

Inspiration

We've all felt like we understood something, then tried to explain it and realized we didn't. Real learning happens when you can teach it to someone else. That's the idea behind Lumos.

What it does

Type in any topic and Lumos generates a complete, multi-sensory learning experience in seconds.

The Lesson: You get 6-8 structured milestones with professional AI narration from ElevenLabs, visuals pulled from google via SerpAPI, and a live progress bar tracking your journey. The audio plays automatically as you move through sections, keeping you engaged without lifting a finger.

Interactive Quiz: After each section, take tailored multiple-choice questions generated specifically from what you just learned. Get instant feedback on right and wrong answers with explanations.

Hands-On Sandbox: Drag and drop elements together to see concepts in action. Combine pieces, watch the results, and get detailed explanations of what happens and why. Smooth animations and satisfying interactions powered by dnd-kit make abstract ideas tangible.

AI Chat Tutor: Confused about something? Click the chat button anytime during your lesson. An AI tutor stands by to clarify, expand, or answer questions about the material in real-time.

Teaching Challenge: Here's where it gets real. A curious AI kid (with voice acting) asks you to explain what you learned. You type your explanation. The kid responds with follow-up questions, confusion if you're vague, or excitement if you nail it. An understanding meter tracks how well you're teaching. Only clear, simple explanations fill it up. If you can't explain it to a 5-year-old, you don't really understand it yet.

All wrapped in a sleek dark theme with purple accents, Font Awesome icons, and polish everywhere. From input validation to error handling with timeouts and retries, everything is built to feel smooth and professional.

How we built it

Next.js 16 and React 19 for the frontend. Tailwind CSS for the dark theme. Google Gemini generates lessons, quizzes, and powers the teaching challenge. ElevenLabs creates the voice narration. We use SerpAPI for content and images, then restructure everything into a coherent learning path.

The interactive sandbox uses dnd-kit for drag-and-drop. API routes handle lesson generation, quiz creation, audio, and the teaching challenge conversations. Everything includes error handling, timeouts, and retries so it doesn't break when AI calls fail.

Challenges we ran into

Getting consistent structured output from AI was tricky. Gemini sometimes returns almost-valid JSON. Audio generation added latency. The teaching challenge needed tons of prompt iterations to feel natural. Wikipedia scraping is unreliable for some topics. Managing state across audio, quizzes, sandbox, and chat on one page got messy fast.

Accomplishments that we're proud of

The teaching challenge actually works and forces real understanding. The whole experience is polished and smooth. Error handling throughout means it won't crash during demos. The dark theme looks professional, not like a kids' app. We shipped everything we wanted to build.

What we learned

Prompt engineering matters way more than we expected. User testing catches things we'd never notice. Performance and caching are critical for learning apps. Defensive coding and error handling aren't optional. Dark themes reduce eye strain for longer sessions.

What's next for Lumos

Persistent storage and user accounts. Progress tracking over time. Spaced repetition to reinforce learning. Collaborative challenges with friends. More interactive sandbox elements. Better content sources beyond Wikipedia. Mobile app with offline support. Real-time animated visualizations synced to narration. A smarter AI kid that remembers you across sessions.

Built With

• dnd-kit
• elevenlabs
• gemini
• nextjs
• openai
• serpapi