Inspiration

As lifelong learners, we've all faced the same frustrating problem: we want to learn a new skill—a programming language, a historical topic, a creative software—but we're paralyzed by the sheer volume of information online. We spend more time searching for a starting point and curating resources than we do actually learning.

The internet gave us access to everything, but it forgot the map. LearnSphere is that map. We built it to transform the chaotic world of online information into structured, actionable learning paths.

What it does

LearnSphere is an AI-native platform that acts as a personal curriculum designer. The user journey is simple and powerful:

1. Define Your Goal: The user enters what they want to learn, from "Mastering Quantum Computing" to "Learning to bake sourdough bread."
2. Set Your Level: They specify their current knowledge level (e.g., "Complete Beginner," "Intermediate").
3. Generate Your Roadmap: With a single click, our AI engine analyzes the request and generates a comprehensive, step-by-step learning curriculum.
4. Learn & Track: The roadmap is presented as a series of clear modules, each containing:
   • Key Concepts: Core ideas to focus on.
   • Curated Resources: Links to high-quality articles, videos, and documentation.
   • Actionable Projects: Practical exercises to solidify knowledge.

How we built it

We knew we had to move fast and use the best tools for the job. Our tech stack was chosen for rapid development and a seamless user experience:

• Frontend: React with Vite for a blazing-fast, component-based user interface. Tailwind CSS for styling a clean, modern look in record time.
  
• Backend & Database: Supabase served as our all-in-one backend, with PostgreSQL for storing user accounts and learning paths, and built-in authentication for secure user management.
  
• AI Engine: OpenRouter AI models forms the core of our project. We invested significant effort in prompt engineering to ensure the AI consistently returns structured, high-quality content in reliable JSON.
  
• Deployment: The app is hosted on Lovable Hosting, allowing for continuous deployment straight from GitHub.

Challenges we ran into

• Taming the AI: Ensuring a large language model returns a perfectly formatted, non-hallucinatory, and genuinely useful curriculum required multiple iterations of prompt design.
  
• State management: Synchronizing user progress between the frontend and database to create a seamless, frustration-free experience.

Accomplishments that we're proud of

• Built a full-stack, AI-powered application that is both functional and genuinely useful—in under 48 hours.
  
• Generated learning paths that often surpass what a human could curate in the same time.
  
• Delivered a clean, intuitive, and reliable user experience.

What we learned

This hackathon was a masterclass in the power of modern development tools. Key takeaways:

• The incredible leverage of using a BaaS (Backend as a Service) like Supabase.
  
• Prompt engineering is as much an art as it is a science.
  
• A well-defined MVP scope is the single most important factor for success under tight time constraints.

What's next for LearnSphere

This is just the beginning. We envision LearnSphere evolving into a full-fledged learning ecosystem:

• Community-Sourced Paths: Allow users to share, rate, and improve generated roadmaps.
  
• Interactive Quizzes: AI-generated quizzes to test knowledge after each module.
  
• Tutor Integration: Connect users with experts for specific questions.

Built With

• git
• github
• javascript
• lovable.dev
• lovablehosting
• node.js
• openrouter
• react
• tailwind-css
• vite