Landing page
Course desciption that user want to generate
Beautiful course structure
Course chapter
Cousre Chapter

LearnCraft 🎓

AI-Powered Learning Platform - Generate personalized courses with AI and learn with YouTube videos

🌟 What LearnCraft Does

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   You Tell AI   │ ──▶│   AI Creates    │ ──▶│   You Learn     │
│   What to Learn │    │   Full Course   │    │   Step by Step  │
└─────────────────┘    └─────────────────┘    └─────────────────┘
        │                        │                        │
        ▼                        ▼                        ▼
   "Machine Learning"      📚 10 Chapters           ✅ Track Progress
   "Beginner Level"        🎥 YouTube Videos        📊 See Analytics
   "Include Videos"        📝 Rich Content          📱 Mobile Ready

🚀 How It Works

graph LR
    A[👤 User Login] --> B[🏠 Dashboard]
    B --> C[➕ Create Course]
    C --> D[🤖 AI Generates]
    D --> E[🎓 Start Learning]
    E --> F[📈 Track Progress]
    F --> G[🎉 Course Complete]

    style A fill:#e1f5fe
    style D fill:#f3e5f5
    style G fill:#e8f5e8

🏗️ Project Architecture

🏠 LearnCraft Platform
├── 🌐 Frontend (Next.js + React)
│   ├── 🎨 Beautiful UI Components
│   ├── 📱 Mobile Responsive Design
│   └── 🎬 Smooth Animations
│
├── 🔗 API Layer (Next.js Routes)
│   ├── 🤖 AI Course Generation
│   ├── 📚 Course Management
│   └── 📊 Progress Tracking
│
├── 🗄️ Database (PostgreSQL)
│   ├── 👤 User Profiles
│   ├── 📖 Course Content
│   └── 📈 Learning Progress
│
└── 🔌 External Services
    ├── 🧠 Google Gemini AI
    ├── 🎥 YouTube API
    └── 🔐 Clerk Auth

📁 Folder Structure

learncraft/
├── 📱 app/                     # Main application
│   ├── 🔌 api/                # Backend endpoints
│   │   ├── 📚 courses/        # Course management
│   │   └── 🤖 generate-course/ # AI generation
│   ├── 🎓 course/             # Learning interface
│   ├── 🏠 workspace/          # User dashboard
│   └── 🔐 (auth)/             # Login/signup
│
├── 🧩 components/             # Reusable UI parts
│   ├── 🎨 ui/                # Base components
│   └── 🔧 providers/         # App contexts
│
├── ⚙️ config/                # App settings
│   ├── 🗄️ schema.js          # Database structure
│   └── 🔗 db.js              # Database connection
│
├── 📚 lib/                   # Helper functions
└── 🖼️ public/               # Images & assets

🎯 User Journey

👤 New User
    │
    ▼
🔐 Sign Up/Login ────┐
    │                │
    ▼                │
🏠 Dashboard         │
    │                │
    ▼                │
➕ "Create Course"   │
    │                │
    ▼                │
📝 Enter Details     │
   • Topic           │
   • Difficulty      │
   • Include Videos  │
    │                │
    ▼                │
⏳ AI Processing     │
    │                │
    ▼                │
🎉 Course Ready      │
    │                │
    ▼                │
🎓 Start Learning ───┘
    │
    ▼
📖 Read Chapter
    │
    ▼
🎥 Watch Video
    │
    ▼
✅ Mark Complete
    │
    ▼
📊 See Progress
    │
    ▼
🎯 Next Chapter

🚀 Quick Setup

Prerequisites

Node.js 18+
PostgreSQL database
API keys for Gemini & YouTube

Installation

Clone & Install

git clone <repo-url>
cd learncraft
npm install

Environment Setup

Copy .env.example to .env.local
Fill in your API keys

Database Setup
```
npm run db:push
```
Start Development
```
npm run dev
```

🔧 Tech Stack

Frontend Stack:
┌─────────────┐
│   Next.js   │ ─── React Framework
│   React 19  │ ─── UI Library  
│  Tailwind   │ ─── Styling
│Framer Motion│ ─── Animations
└─────────────┘

Backend Stack:
┌─────────────┐
│ Next.js API │ ─── Server Routes
│ PostgreSQL  │ ─── Database
│ Drizzle ORM │ ─── Database Tool
│    Clerk    │ ─── Authentication
└─────────────┘

AI Services:
┌─────────────┐
│ Gemini AI   │ ─── Course Generation
│ YouTube API │ ─── Video Content
└─────────────┘