About Lumina

Inspiration 💡

We live in a world where career growth is fragmented. You go to LinkedIn to find jobs, Udemy to learn skills, and Notion to plan your life. This fragmentation creates friction—you see a job requiring "Kubernetes," but you don't know what to learn, how to learn it, or if it's even worth it.

We wanted to build Lumina to close this loop. We asked: What if an AI agent could not just "search" for jobs, but actually understand your resume, tell you exactly what you're missing, and then generate a custom, interactive course to teach you those missing skills right there on the spot?

That was the spark. We wanted to move from "searching" for a career to "engineering" one.

What it does 🚀

Lumina is an end-to-end AI career ecosystem with three core pillars:

  1. Intelligent Job Discovery:

    • It doesn't just keyword match. Our Discovery Agent uses semantic search to find jobs that actually fit your profile.
    • Lazy Insights: It analyzes market trends (salary, skill demand) on-demand to help you negotiate better.
    • Resume Scoring: Every job is scored against your resume vector, giving you a match percentage based on skills, not just keywords.
  2. Generative Interactive Courses:

    • If you're missing a skill (e.g., "GraphQL"), Lumina generates a full course for you in seconds.
    • Generative UI: It doesn't just write text. The AI writes actual React code to render interactive diagrams, flowcharts, and simulations.
    • Hybrid RAG: It combines your uploaded documents (ChromaDB) with live web research (Tavily) to ensure the content is grounded and up-to-date.
  3. Real-Time Collaboration:

    • Learning is better together. Lumina includes a collaborative workspace where you can take notes, share roadmap progress, and watch AI-generated videos with peers in real-time.

How we built it 🛠️

Lumina is a complex microservices system powering a next-gen frontend.

The Brain: Multi-Agent Orchestration

We built the backend using FastAPI and LangGraph. The "Generative Course" engine is a stateful graph that coordinates 5 distinct agents:

  • Planner Agent: Builds the dependency graph (DAG) of the syllabus.
  • Content Agent: streams markdown chapter by chapter.
  • Diagram Agent: The coolest part. It outputs raw Recharts and Mermaid code, which the frontend compiles safely in a sandbox.
  • Tester Agent: Generates quizzes and validates answers.

The Experience: Modern React

The frontend is built with React 18 and Vite.

  • Video Generation: We used Remotion to programmatically stitch together AI-generated scripts, audio (Google TTS), and images (Flux) into downloadable educational videos.
  • Collaboration: We used Y.js and Hocuspocus (a WebSocket server) to enable Google Docs-style real-time editing on our roadmap and notes pages.

The Data Layer

  • MongoDB: Stores the hierarchical course structures and user progress.
  • ChromaDB: Handles vector embeddings for RAG (Retrieval Augmented Generation).
  • Redis: Caches agent states and handles pub/sub for the collaboration server.

Challenges we ran into 🏔️

  1. Generative UI Hallucinations: Initially, the AI would generate invalid React code (importing non-existent libraries), causing the app to crash. We solved this by implementing a "Compiler Agent" loop—if the frontend detected a crash, it would feed the error back to the AI to self-correct the code.
  2. Orchestrating Long-Running Tasks: Generating a 10-chapter course takes time. We had to move from a simple request/response model to a WebSockets + Polling architecture with LangGraph's "streaming" capabilities so users could start learning Chapter 1 while Chapter 5 was still being written.
  3. State Management: Syncing the complex graph state of a roadmap between the AI backend and the real-time Y.js frontend was a nightmare of race conditions. We eventually established a "Source of Truth" protocol where the AI suggests changes, but the User (via Y.js) commits them.

Accomplishments that we're proud of 🏆

  • It actually works: The Generative UI is stable. Seeing the AI draw a correct flowchart for a complex topic like "Redux Data Flow" for the first time was magical.
  • The "Lazy" Architecture: We optimized costs by making agents "lazy". The "Market Insights" agent doesn't run until you click the button, saving API tokens while keeping the UI snappy.
  • Seamless Video: Integrating Remotion directly into the React flow means we can generate professional-grade videos on the client side without expensive video rendering servers.

What we learned 📚

  • Agents need boundaries: Giving an agent too much freedom leads to chaos. Structured Outputs (Pydantic objects) are the only way to build reliable AI apps.
  • Latency Matters: Users hate waiting. Streaming text is okay, but "Progressive UI" (showing the skeleton while filling in details) is crucial for retention.
  • RAG is hard: Just dumping documents into a vector DB isn't enough. We learned to use "Hybrid Search" (Keyword + Semantic) to get relevant results for technical topics.

What's next for Lumina 🔮

  • Job Auto-Apply: We want to give the Job Agent the power to actually fill out applications on your behalf using browser automation.
  • Mobile App: React Native port to allow learning on the commute.
  • Corporate L&D: Integrating with company Knowledge Bases so Lumina can onboard new employees using internal docs.

Built With

Share this project:

Updates

Submission history