AI Learning Path Generator

Transform your learning goals into structured, actionable roadmaps

A learning path generator that helps users master complex skills by breaking them down into structured milestones with personalized resources, time estimates, and progress tracking.

Table of Contents

• Problem Statement
• Solution
• Features
• Tech Stack
• Architecture
• Quick Start (Docker)
• Getting Started
• Usage
• API Documentation
• Streaming
• Resumable Progress
• Design Decisions
• Future Improvements
• Time Breakdown

Problem Statement

Learning complex skills is overwhelming. People struggle with:

• Where to start: Too many resources, unclear prerequisites
• How to structure learning: No clear path from beginner to proficient
• Time management: Unrealistic expectations about time commitment
• Staying motivated: Lack of visible progress and milestones

Solution

A tool that:

1. Takes a high-level learning goal (e.g., "Learn Full-Stack Development")
2. Generates a structured learning path with 5-8 progressive milestones
3. Provides time estimates, resource recommendations, and clear descriptions
4. Enables progress tracking with visual feedback
5. Allows regeneration and refinement of paths

Features

Core Features

• Intelligent Generation: Uses GPT-4 to create personalized learning paths
• Structured Milestones: Each path broken into 5-8 sequential milestones
• Resource Recommendations: Curated resources for each milestone
• Time Estimates: Realistic hour estimates per milestone
• Progress Tracking: Mark milestones complete and visualize progress
• Persistent Storage: Save and retrieve learning paths
• Experience Levels: Tailored for beginner, intermediate, or advanced learners
• Time Commitment: Customize based on available hours per week

UX Highlights

• Dark, Modern UI: Glassmorphism effects with vibrant gradients
• Smooth Animations: Fade-in effects and micro-interactions
• Responsive Design: Works seamlessly on desktop and mobile
• Visual Progress: Progress bars and completion badges
• Expandable Milestones: Click to see detailed descriptions and resources

Tech Stack

Backend

• FastAPI (Python): High-performance async API framework
• SQLAlchemy: ORM for database interactions
• SQLite: Lightweight, file-based database
• OpenAI API: GPT-4 for learning path generation
• Pydantic: Data validation and serialization

Frontend

• React 18: Modern UI library with hooks
• Vite: Fast build tool and dev server
• Axios: HTTP client for API calls
• Vanilla CSS: Custom design system with CSS variables

Why These Choices?

• FastAPI: Aligns with company stack, excellent async support, auto-generated docs
• React + Vite: Fast development, modern tooling, minimal setup
• SQLite: No configuration needed, perfect for MVP, easy migration to PostgreSQL
• Vanilla CSS: Full control, demonstrates CSS skills, no framework overhead

Architecture

┌─────────────────────────────────────────────────────────────┐
│                         Frontend (React)                     │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ LandingPage  │  │ LearningPath │  │  App (State) │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                            │
                    HTTP/JSON (Axios)
                            │
┌─────────────────────────────────────────────────────────────┐
│                      Backend (FastAPI)                       │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │   Routes     │  │  AI Service  │  │   Database   │      │
│  │  (REST API)  │  │  (OpenAI)    │  │  (SQLite)    │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘

Data Flow

1. User submits learning goal via form
2. Frontend sends POST request to /api/generate
3. Backend calls OpenAI API with structured prompt
4. AI returns JSON with path title, description, and milestones
5. Backend saves to database and returns to frontend
6. Frontend displays interactive learning path
7. User can mark milestones complete (PATCH /api/milestones/{id})

Quick Start (Docker)

The fastest way to run both services with a single command:

# 1. Copy the example env file and fill in your OpenAI key
cp .env.example .env
# Edit .env: set GEMINI_API_KEY=... (free key from aistudio.google.com)

# 2. Start everything
docker compose up --build

Service	URL
Frontend	http://localhost:3000
Backend	http://localhost:8000
API docs	http://localhost:8000/docs

Stop with docker compose down. The SQLite database is persisted in the db_data Docker volume.

---

Getting Started

Prerequisites

• Python 3.8+
• Node.js 16+
• OpenAI API key

Installation

1. Clone the repository

git clone https://github.com/GibbHubb/ai-learning-path-generator.git
cd ai-learning-path-generator

This is the beginning of the README. Read the rest at the original. Read the full README ↗