LearnPath

Are you someone curious? Do you like to learn new things? Do you have many hobbies? Then, LearnPath is THE platform for you! LearnPath is with you in the journey of learning with its customized steps!

Comment

LearnPath — Turn Any Learning Goal Into a Clear Path

Inspiration

We've all been there: you want to learn something new — maybe guitar, maybe machine learning, maybe a new language — and you open a browser tab only to drown in a sea of YouTube videos, Reddit threads, and half-finished course lists. The problem isn't a lack of resources; it's the absence of structure. Existing platforms like Coursera or Udemy are fantastic but siloed — they work well if you already know what to take and in what order.

We were inspired by the idea that every human learning goal deserves a clear, personalized roadmap — not just coding bootcamps or business skills, but anything: watercolor painting, quantum physics, calisthenics, embroidery. We wanted to build a tool that acts like a brilliant mentor who knows every domain, hands you a structured path on day one, and grows with you as you progress.

What It Does

LearnPath is a universal AI-powered learning path generator that transforms any learning goal into a personalized, dependency-aware roadmap.

Users describe what they want to learn, their current experience level, their goals, and how much time they can commit. LearnPath's AI engine then generates a structured path of 8–15 learning nodes, each with curated resources (courses, books, videos, podcasts, apps, communities, and more) and estimated time requirements.

The path is rendered as an interactive visual graph built with React Flow, where nodes represent topics and edges show prerequisite relationships — so you always know what to learn before moving on. Users can track their progress, mark nodes as in-progress or completed, and save notes along the way.

LearnPath covers 12 learning categories: Music, Visual Arts, Film & Video, Business, Personal Development, Languages, Science & Math, History & Humanities, Health & Fitness, Crafts & Hobbies, Writing, and Technology — making it genuinely universal rather than just another tech-skills platform.

How We Built It

The stack was chosen for speed, scalability, and developer experience:

Frontend was built with Next.js 14 (App Router) and TypeScript. We used React Flow for the interactive dependency graph, Shadcn/ui with Tailwind CSS for the UI components, and Zustand for state management. Forms are handled with React Hook Form and validated with Zod.

Backend runs on Next.js API Routes (serverless), with Supabase (PostgreSQL) as the database. We designed a schema with 6 core tables — users, learning paths, learning nodes, resources, user progress, and resource interactions — with Row Level Security policies baked in from the start.

AI is powered by the Anthropic Claude API. We wrote a domain-aware system prompt in lib/ai/claude.ts that adapts its pedagogical approach based on the learning category — practice-focused for music, project-based for coding, conceptual for science, and so on. Claude returns a structured JSON response with nodes, dependencies, resources, and time estimates that we parse and persist.

Deployment targets Vercel for the frontend and Supabase Cloud for the database.

Challenges We Ran Into

One of the trickiest parts was prompt engineering for consistency. Getting Claude to reliably return well-structured, dependency-aware learning graphs across wildly different domains — from embroidery to quantum physics — required significant iteration. Early responses would sometimes produce circular dependencies, overly long paths, or resources that didn't match the specified type.

Visualizing the graph was another challenge. React Flow gives you a lot of power, but laying out a dependency graph in a way that's readable and not visually chaotic took careful work — especially for paths with many interconnected prerequisites. We had to implement custom layout logic to make the node arrangement feel intuitive.

We also ran into schema design trade-offs when modeling resources. Different resource types (sheet music vs. a podcast vs. a GitHub repo) have very different metadata, and designing a schema flexible enough to handle all of them without becoming a mess of nullable columns required a few rounds of rethinking.

Accomplishments That We're Proud Of

We're proud that LearnPath genuinely works across wildly different domains out of the box. Watching the AI produce a thoughtful, well-sequenced roadmap for "Modern Embroidery" or "Documentary Filmmaking" — complete with appropriate resource types like templates and community forums — felt like the whole concept clicking into place.

The interactive learning graph turned out better than we hoped. Seeing your entire learning journey laid out visually, with clear prerequisites and progress indicators, makes the abstract feel concrete and achievable.

We're also proud of the category-specific AI behavior. Rather than a one-size-fits-all response, the system genuinely adapts — it recommends sheet music for guitar learners, suggests spaced-repetition apps for language learners, and pushes project-based milestones for coding paths.

What We Learned

Building across 12 domains forced us to think much harder about domain-aware AI prompting than we expected. A generic "generate a learning path" prompt produces mediocre results everywhere; a prompt that understands the difference between how someone learns piano versus how someone learns Python produces dramatically better outputs.

We also deepened our understanding of graph-based UX — dependency graphs are a powerful mental model for learning, but presenting them in a non-intimidating way to general users requires real UX care.

On the technical side, this project reinforced how much Supabase's Row Level Security simplifies building multi-user applications safely, and how Next.js serverless routes make it easy to ship a full-stack product fast.

What's Next for LearnPath

The foundation is in place, and there's a lot of exciting ground ahead:

  • User authentication via NextAuth.js to enable persistent, cross-device progress tracking
  • Public path sharing so learners can share their roadmaps and discover paths created by others
  • Community-created paths with ratings and reviews, turning LearnPath into a collaborative knowledge platform
  • Spaced repetition integration to help users retain what they learn, not just track what they've covered
  • Calendar integration to schedule learning sessions directly from the path
  • AI study buddy — a chat interface tied to your current learning node, so you can ask questions and get explanations in context
  • Export to PDF/Markdown for offline use
  • Mobile app built with React Native for learning on the go
  • Advanced analytics to surface insights like optimal daily time commitments and learning velocity across categories

Built With

Share this project:

Updates