AI Roadmap Generator
An intelligent, interactive learning platform that transforms abstract learning goals into structured, step-by-step visual pathways using AI. Features a custom DAG visualization engine and smart responsive layouts.
Timeline
Aug 2024 - Nov 2024
Role
Full Stack Developer
Team
Solo
Status
CompletedWhat Users Can Do
AI-Driven Content Gen: Dynamically generates comprehensive learning paths based on user input via backend AI service.
Interactive DAG Visuals: Visualizes learning paths as connected graphs with dependencies using a custom layout engine.
Smart Responsive Layout: Automatically adapts graph structure: columnar for desktop, vertical stack for mobile.
Dynamic Prerequisite Map: Visualizes non-linear dependencies between modules using dashed connection lines.
Tech Stack
- Reactjs
- JavaScript
- Vite
- NodeJs
- Express
- Tailwind
- Motion
- ReactFlow
- Axios
Challenges I Faced
Engineered a two-pass custom layout algorithm to map hierarchical JSON to flat node coordinates.
Solved complex mobile visualization challenges by switching layout strategies at runtime.
Integrated Framer Motion to create polished entrance animations during async AI generation.
How I Overcame Them
Mastered React Flow to build a custom visualization engine for hierarchical data.
Implemented complex responsive logic to transform graph layouts based on device viewport.
Orchestrated smooth fluid animations using Framer Motion for asynchronous state changes.