Inspiration
We've all been there. You want to learn something new, so you Google it, open fifteen tabs, watch a random YouTube video, get overwhelmed, and close everything.
Learning online shouldn't feel like that.
We wanted to build something that actually meets you where you are, figures out what you want to learn through a real conversation, and gives you a structured path with content that keeps you engaged, not just walls of text.
What it does
Lumora takes you through a natural chat conversation to understand your learning goal and current knowledge level.
From there, it generates a personalized visual roadmap and delivers rich, bite-sized chapters packed with curated YouTube videos, relevant articles, interactive quizzes, AI-generated songs, and even memes — because learning should actually be fun.
You progress through chapters at your own pace, with each one streamed to you in real time as the AI prepares it.
How we built it
The frontend is a Next.js app with TypeScript and Tailwind CSS, using Framer Motion for smooth animations and Zustand for state management.
The backend is a FastAPI server powered by Gemini for goal extraction and content generation.
We use WebSockets for the real-time chat conversation and Server-Sent Events (SSE) to stream chapter content as it's generated.
The YouTube Data API finds relevant videos, Tavily handles article discovery, and ElevenLabs generates audio content.
Everything is tied together with MongoDB for persistence.
Challenges we ran into
Getting the real-time streaming pipeline right was tricky.
We had to coordinate WebSocket chat, SSE chapter delivery, and frontend state to handle content arriving asynchronously for each chapter independently.
We also had to work around ngrok's browser interstitial, which blocks WebSocket connections from the client. This led us to build connection-retry flows.
Another challenge was mapping the API's module/chapter hierarchy to our flat roadmap structure. This required careful index translation to ensure the right content landed in the right chapter.
Accomplishments that we're proud of
The end-to-end flow actually works.
You can have a genuine conversation, get a personalized roadmap, and immediately start learning with rich multimedia content that streams in live.
Each chapter includes a video, an article, a quiz, a song, and a meme, all generated specifically for that topic.
We're also proud of how polished the UI turned out for a hackathon project.
What we learned
We learned a lot about building real-time streaming architectures in the browser.
This included the nuances of SSE vs WebSockets, handling partial data buffers, and managing async state across multiple stores.
We also improved significantly at prompt engineering with Gemini to generate structured educational content that is actually coherent and useful.
Log in or sign up for Devpost to join the conversation.