PathLearner

PathLearner turns your learning dreams into a guided journey. When you feel lost or stuck, it spots what you're missing and adjusts your path—like having a personal mentor who never lets you fall.

Comment

Inspiration

Learning anything new today means fighting through endless tutorials, YouTube videos, and random blog posts. I realized most students know what they want to learn — but not how to structure it. And when they get stuck, they don’t know what they’re missing. I wanted to create something that acts like a GPS for learning: a tool that gives you the right direction, adapts when you're confused, and makes learning feel clear instead of overwhelming. That idea became PathLearner.

What it does and ## How we built it

I built PathLearner as a full-stack AI-powered web app: Frontend: React + Vite, with ReactFlow for dynamic graph visualization Backend: FastAPI (Python) AI: OpenAI’s chat completions API UX: Custom animations, progressive node reveal, modern sidebar UI State management: React hooks, Axios for API requests The backend generates a personalized roadmap from the user’s goal and background. The frontend displays it as an interactive graph. When users describe confusion, we send their text + current roadmap to the backend, which uses the model to identify missing fundamentals and return new prerequisite nodes. The UI then updates the graph in real-time.

Challenges we ran into

Getting the OpenAI model to return strictly valid JSON Rendering dynamic nodes without breaking the graph layout Persisting state between node updates (progress states, summaries, etc.) CORS errors between the backend and frontend Handling prerequisites insertion without breaking the existing edges Making the UI visually clean while showing multiple panels at once Debugging build issues with Vite + ReactFlow Keeping API keys secure while deploying and preparing the repo for GitHub

Accomplishments that we're proud of

PathLearner started as a simple idea — helping students organize their learning — but it evolved into a full adaptive learning system. I am proud of how much functionality I built in a short time and how AI transformed the learning experience from static to dynamic.

What we learned

How to structure AI prompts to get clean, JSON-safe output How to integrate ReactFlow for real-time dynamic graph updates How to secure API keys using .env and .gitignore How to turn vague user confusion into actionable learning insights How important UX is — animations and small interactions greatly improve clarity That building adaptive learning tools is challenging but incredibly exciting

What's next for PathLearner

User accounts + saved roadmaps AI quizzes for each topic Difficulty color gradients Collaborative/shared roadmaps Mobile app version

Built With

Share this project:

Updates