🎓 LearnAI - AI-Powered Online Learning Platform

Democratizing Education Through AI - Create comprehensive courses in minutes, not weeks.

LearnAI is an innovative e-learning platform that leverages Google's Gemini 2.0 Flash AI to automate course creation, content generation, and resource curation. Built as a final year project (7th & 8th Semester) for the Department of Computer Science and Engineering.

🌐 Live Demo: https://online-learning-platform-snowy.vercel.app

✨ Features

🎯 For Course Creators

AI-Powered Course Generation: Generate complete course structures with chapters, topics, and durations in seconds
Automated Content Creation: AI generates detailed, HTML-formatted content for each chapter
Intelligent Video Integration: Automatically discovers and embeds relevant YouTube videos
Custom Banner Generation: AI-generated course banner images
Course Management: Edit, publish, and manage multiple courses from a unified dashboard

📚 For Learners

Course Discovery: Browse and search through available courses by category and difficulty level
One-Click Enrollment: Instant enrollment without payment barriers
Progress Tracking: Real-time progress calculation with visual indicators
Chapter Completion: Mark chapters as complete and track learning journey
Integrated Video Learning: Watch curated YouTube videos within the platform
Responsive Design: Seamless experience across desktop, tablet, and mobile devices

🔐 Platform Features

Secure Authentication: Email/password and OAuth (Google, GitHub) via Clerk
User Profiles: Personalized dashboards with enrolled courses
Search & Filter: Find courses by name, category, or difficulty level
Dark Theme UI: Modern, accessible interface built with Shadcn/ui
Serverless Architecture: Auto-scaling, cost-effective deployment

🛠 Tech Stack

Frontend

Framework: Next.js 15 (App Router)
UI Library: React 18
Styling: Tailwind CSS 3.4
Component Library: Shadcn/ui
Icons: Lucide React
Notifications: Sonner
Video Player: React YouTube

Backend

Runtime: Node.js (Next.js API Routes)
Database: Neon PostgreSQL (Serverless)
ORM: Drizzle ORM
Authentication: Clerk

AI & Integrations

AI Model: Google Gemini 2.0 Flash
Video API: YouTube Data API v3
Image Generation: AI Guru Lab API key
HTTP Client: Axios

DevOps

Deployment: Vercel
Version Control: Git & GitHub
Package Manager: npm
Language: TypeScript

🏗 System Architecture

┌─────────────────────────────────────────────────────────┐
│                    Frontend Layer                        │
│       Next.js 15 + React 18 + Tailwind CSS              │
│              Clerk Authentication                        │
└────────────────────┬────────────────────────────────────┘
                     │
┌────────────────────▼────────────────────────────────────┐
│                   API Layer                              │
│         Next.js API Routes (Serverless)                 │
│           Server Actions & Components                    │
└────────────────────┬────────────────────────────────────┘
                     │
        ┌────────────┼────────────┬────────────┐
        │            │            │            │
┌───────▼──────┐ ┌──▼──────┐ ┌──▼──────┐ ┌──▼────────┐
│   AI Layer   │ │Database │ │YouTube  │ │   Image   │
│  Gemini 2.0  │ │Neon DB  │ │API v3   │ │    Gen    │
│    Flash     │ │Drizzle  │ │         │ │           │
└──────────────┘ └─────────┘ └─────────┘ └───────────┘

Data Flow

Course Creation Flow:

User Input → AI Prompt → Gemini API → Parse JSON →
Generate Banner → Store in DB → Display Preview →
Generate Content → Fetch Videos → Publish Course

Learning Flow:

Browse Courses → View Details → Enroll → Access Content →
Watch Videos → Complete Chapters → Track Progress → Course Completion

🚀 Getting Started

Prerequisites

Node.js 18.x or higher
npm or yarn
PostgreSQL database (or Neon account)
API Keys for:
- Google Gemini AI
- YouTube Data API v3
- Clerk Authentication
- AI Guru Lab API key (for image generation)

Installation

Clone the repository

git clone https://github.com/adarsh-jha-dev/online-learning-platform.git
cd online-learning-platform

Install dependencies

npm install
# or
yarn install

Set up environment variables

cp .env.example .env

Edit .env with your API keys (see Environment Variables)

Set up the database

# Generate database schema
npm run db:generate

# Push schema to database
npm run db:push

Run the development server

npm run dev

Open your browser

Navigate to http://localhost:3000

🔑 Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://username:password@host/database?sslmode=require"

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"

# Google Gemini AI
NEXT_PUBLIC_GEMINI_API_KEY="AIza..."

# YouTube Data API
NEXT_PUBLIC_YOUTUBE_API_KEY="AIza..."

# Image Generation API Key
AI_GURU_LAB_API="ask..."

# App URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Getting API Keys

Neon Database
- Sign up at neon.tech
- Create a new project
- Copy the connection string
Clerk Authentication
- Sign up at clerk.com
- Create a new application
- Copy publishable and secret keys
Google Gemini AI
- Visit Google AI Studio
- Create a new API key
- Enable Gemini API
YouTube Data API
- Go to Google Cloud Console
- Create a new project
- Enable YouTube Data API v3
- Create credentials (API Key)
AI Guru Lab API
- Go to AI Guru Lab Dashboard
- Create an account if you don't have one
- Copy the API key from sidebar
- You'll get free 20 credits (1 Credit = 1 Image)

📁 Project Structure

online-learning-platform/
├── app/
│   ├── (auth)/
│   │   ├── sign-in/[[...sign-in]]/page.jsx
│   │   └── sign-up/[[...sign-up]]/page.jsx
│   ├── (routes)/
│   │   ├── dashboard/
│   │   │   ├── _components/
│   │   │   │   ├── CourseCard.jsx
│   │   │   │   ├── SideNav.jsx
│   │   │   │   └── WelcomeBanner.jsx
│   │   │   └── page.jsx
│   │   ├── create-course/
│   │   │   ├── [courseId]/
│   │   │   │   └── page.jsx
│   │   │   └── page.jsx
│   │   ├── course/
│   │   │   └── [courseId]/
│   │   │       ├── [chapterId]/
│   │   │       │   └── page.jsx
│   │   │       └── page.jsx
│   │   └── explore/
│   │       └── page.jsx
│   ├── api/
│   │   └── generate-course/
│   │       └── route.js
│   ├── globals.css
│   ├── layout.jsx
│   └── page.jsx
├── components/
│   ├── ui/
│   │   ├── button.jsx
│   │   ├── card.jsx
│   │   ├── input.jsx
│   │   ├── progress.jsx
│   │   └── ...
│   └── custom/
│       ├── Header.jsx
│       └── LoadingSpinner.jsx
├── configs/
│   ├── AiModel.jsx          # Gemini AI configuration
│   ├── db.jsx                # Database connection
│   ├── schema.jsx            # Database schema
│   └── service.jsx           # External API services
├── lib/
│   └── utils.js              # Utility functions
├── public/
│   ├── logo.svg
│   └── ...
├── drizzle/
│   └── migrations/           # Database migrations
├── .env.local                # Environment variables (not in repo)
├── .gitignore
├── next.config.js
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md

📖 Usage Guide

Creating Your First Course

Sign Up/Login
- Click "Get Started" on the homepage
- Sign up with email or OAuth (Google/GitHub)
Navigate to Dashboard
- Click "Create New Course" button

Fill Course Details

- Course Topic: e.g., "Introduction to Machine Learning"
- Description: Brief overview of the course
- Category: Select from dropdown (Programming, Data Science, etc.)
- Difficulty Level: Beginner / Intermediate / Advanced
- Number of Chapters: 5-15 recommended
- Include Videos: Yes/No

Generate Course Layout
- Click "Generate" button
- AI will create chapter structure in ~5 seconds
- Review the generated chapters and topics
Generate Content
- Click "Generate Content" for each chapter
- AI creates detailed content with examples
- YouTube videos are automatically fetched
- Takes ~3-5 seconds per chapter
Publish Course
- Review all content
- Click "Publish Course"
- Course is now available for enrollment

Enrolling and Learning

Browse Courses
- Go to "Explore" section
- Filter by category or difficulty
- Use search bar for specific topics
View Course Details
- Click on any course card
- See chapters, topics, and duration
- Watch course preview
Enroll in Course
- Click "Enroll Now" button
- Course added to "My Learning"
Start Learning
- Go to "My Learning" section
- Click on enrolled course
- Select chapter to study
- Watch videos and read content
- Mark chapters as complete
Track Progress
- View progress percentage on course card
- See completion status for each chapter
- Celebrate when you reach 100%!

🔌 API Documentation

Course Generation

Endpoint: POST /api/generate-course

Request Body:

{
  "topic": "Introduction to Python",
  "description": "Learn Python basics",
  "level": "Beginner",
  "noOfChapters": 10,
  "category": "Programming",
  "includeVideo": true
}

Response:

{
  "success": true,
  "course": {
    "courseName": "Introduction to Python Programming",
    "description": "Complete guide for beginners",
    "chapters": [
      {
        "chapterName": "Getting Started with Python",
        "about": "Introduction to Python syntax",
        "duration": "45 minutes",
        "topics": ["Variables", "Data Types", "Operators"]
      }
    ]
  }
}

Chapter Content Generation

Endpoint: POST /api/generate-content

Request Body:

{
  "chapterName": "Getting Started with Python",
  "topics": ["Variables", "Data Types", "Operators"]
}

Response:

{
  "success": true,
  "content": "<h1>Getting Started with Python</h1><p>...</p>",
  "videos": [
    {
      "videoId": "xyz123",
      "title": "Python Variables Explained",
      "thumbnail": "https://..."
    }
  ]
}

🗄 Database Schema

Users Table

CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  name VARCHAR(255) NOT NULL,
  image_url TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

Courses Table

CREATE TABLE courses (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(255) NOT NULL,
  description TEXT,
  category VARCHAR(100),
  level VARCHAR(50) NOT NULL,
  course_json JSONB NOT NULL,
  created_by VARCHAR(255) NOT NULL,
  banner TEXT,
  publish BOOLEAN DEFAULT false,
  created_at TIMESTAMP DEFAULT NOW()
);

course_json structure:

{
  "courseName": "string",
  "description": "string",
  "chapters": [
    {
      "chapterName": "string",
      "about": "string",
      "duration": "string",
      "topics": ["string"],
      "content": "string (HTML)",
      "videoId": "string"
    }
  ]
}

Enrollments Table

CREATE TABLE enrollments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
  completed_chapters INTEGER[] DEFAULT '{}',
  enrolled_at TIMESTAMP DEFAULT NOW(),
  UNIQUE(user_id, course_id)
);

Relationships:

One user can create many courses (1:N)
One user can enroll in many courses (N:M via enrollments)
One course can have many enrollments (1:N)

🚧 Roadmap

Version 1.0

Complete authentication system with Clerk
AI course generation pipeline
Content creation and video integration
Database schema and ORM setup
Enrollment and progress tracking
Responsive UI with dark theme
Search and exploration features

Future Enhancements

Admin Dashboard
Quiz generation for knowledge assessment
Discussion forums for peer interaction
Advanced analytics dashboard for instructors
Certificate generation upon course completion

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
app		app
components/ui		components/ui
config		config
context		context
hooks		hooks
lib		lib
public		public
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
components.json		components.json
drizzle.config.js		drizzle.config.js
jsconfig.json		jsconfig.json
middleware.js		middleware.js
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs

adarsh-jha-dev/online-learning-platform

Folders and files

Latest commit

History

Repository files navigation