🎓 AI-Powered Learning Management System

A comprehensive, intelligent learning platform that combines AI-powered assessments, personalized learning roadmaps, interactive video learning, and a job portal to create a complete educational ecosystem.

📋 Table of Contents

Overview
Key Features
Tech Stack
Project Structure
Application Flow
Getting Started
Environment Setup
API Endpoints
Database Models
Deployment

🎯 Overview

This Learning Management System (LMS) is a full-stack web application built with Next.js 16 that provides:

AI-Powered Assessments - Generate personalized programming questions based on user skill level
Personalized Learning Roadmaps - Auto-generated curriculum tailored to assessment results
Interactive Video Learning - YouTube-integrated video player with notes and progress tracking
Job Portal - Browse and apply for jobs with advanced filtering
Progress Tracking - Real-time progress monitoring across all learning modules
Note-Taking System - Timestamped notes synchronized with video playback

✨ Key Features

🤖 AI Assessment System

Intelligent question generation using DeepSeek AI
Multi-language support (JavaScript, Python, Java, etc.)
Adaptive difficulty based on proficiency level
Real-time scoring with detailed performance breakdown

🗺️ Learning Roadmap

Auto-generated curriculum from assessment results
Structured modules organized by programming language
Visual progress tracking with completion statistics
Chapter-based navigation system

🎥 Video Learning Platform

YouTube API integration for educational content
Smart video filtering (99% embeddable success rate)
Interactive player with playlist support
Timestamped note-taking system
Video completion tracking

💼 Job Portal

Job listing with advanced search and filters
Company profiles and job details
Application management system
Salary and location-based filtering

📊 Progress Management

Multi-level progress tracking (video → chapter → module → course)
Learning statistics dashboard
Completion milestones
Time tracking

🛠️ Tech Stack

Frontend

Framework: Next.js 16 (App Router)
Language: TypeScript
Styling: Tailwind CSS 4
UI Components: Shadcn/ui, Radix UI
Animations: Framer Motion
Icons: Lucide React, React Icons
State Management: React Hooks

Backend

Runtime: Node.js
API: Next.js API Routes
Database: MongoDB with Mongoose ODM
Authentication: Clerk
External APIs: YouTube Data API v3, DeepSeek AI

Development Tools

Package Manager: npm
Linting: ESLint
Type Checking: TypeScript
Version Control: Git

📁 Project Structure

learning-management-system/
├── app/                          # Next.js App Router
│   ├── api/                      # API Routes
│   │   ├── assessment/           # Assessment endpoints
│   │   │   ├── generate/         # Generate AI questions
│   │   │   ├── submit/           # Submit answers
│   │   │   ├── results/          # Get results
│   │   │   └── reset/            # Reset assessment
│   │   ├── roadmap/              # Learning roadmap
│   │   │   ├── generate/         # Generate roadmap
│   │   │   └── route.ts          # Get roadmap
│   │   ├── learn/                # Learning endpoints
│   │   │   └── [chapterId]/      # Chapter-specific routes
│   │   │       ├── route.ts     # Get chapter data
│   │   │       └── complete/     # Mark chapter complete
│   │   ├── progress/             # Progress tracking
│   │   │   └── chapter/           # Chapter progress
│   │   ├── user/                 # User management
│   │   │   ├── complete-profile/ # Profile completion
│   │   │   ├── check-profile/    # Check profile status
│   │   │   └── progress/          # User progress
│   │   ├── youtube/              # YouTube integration
│   │   │   └── search/            # Search videos
│   │   ├── jobs/                 # Job portal API
│   │   │   ├── route.ts          # Get all jobs
│   │   │   ├── [id]/             # Job details
│   │   │   │   ├── route.ts      # Get job
│   │   │   │   └── apply/        # Apply for job
│   │   │   └── my-jobs/          # User's applications
│   │   └── webhooks/             # Webhook handlers
│   │       └── clerk/            # Clerk webhooks
│   ├── dashboard/                # Assessment dashboard
│   ├── roadmap/                 # Learning roadmap page
│   ├── learn/[chapterId]/       # Video learning page
│   ├── complete-profile/        # Profile completion
│   ├── jobs/                    # Job portal pages
│   │   ├── page.tsx             # Job listings
│   │   ├── [id]/                # Job details
│   │   ├── create/              # Create job (admin)
│   │   └── my-jobs/             # My applications
│   ├── sign-in/                 # Authentication
│   ├── sign-up/                 # Registration
│   └── layout.tsx               # Root layout
├── components/                   # React Components
│   ├── ui/                      # Shadcn UI components
│   ├── assessment-results.tsx   # Assessment results display
│   ├── learning-roadmap.tsx     # Roadmap component
│   ├── video-learning.tsx        # Video player component
│   ├── youtube-player.tsx        # YouTube player wrapper
│   ├── sidebar-nav.tsx           # Navigation sidebar
│   ├── mobile-navigation.tsx     # Mobile navigation
│   ├── navbar.tsx               # Main navigation
│   └── job-portal/              # Job portal components
│       ├── JobCard.tsx          # Job card component
│       ├── JobBanner.tsx         # Search banner
│       ├── JobSidebar.tsx       # Filter sidebar
│       └── Newsletter.tsx        # Newsletter component
├── lib/                          # Utility Libraries
│   ├── cache.ts                 # Caching system
│   ├── connectDB.ts             # MongoDB connection
│   ├── youtube-service.ts       # YouTube API service
│   └── utils.ts                 # Helper functions
├── models/                       # MongoDB Models
│   ├── user.models.ts           # User schema
│   ├── course.models.ts         # Course/roadmap schema
│   ├── assesment.models.ts      # Assessment schema
│   ├── userProgress.models.ts   # Progress schema
│   └── job.models.ts            # Job schema
├── hooks/                        # Custom React Hooks
│   └── use-mobile.ts            # Mobile detection hook
└── public/                       # Static Assets

🔄 Application Flow

User Journey

1. Landing Page (/)
   ↓
2. Sign Up / Sign In (/sign-up, /sign-in)
   ↓
3. Complete Profile (/complete-profile)
   - Add programming languages
   - Set proficiency levels
   - Add education & career info
   ↓
4. Dashboard (/dashboard)
   - Take AI-powered assessment
   - Answer programming questions
   - View instant results
   ↓
5. Learning Roadmap (/roadmap)
   - View personalized curriculum
   - See modules organized by language
   - Track overall progress
   ↓
6. Video Learning (/learn/[chapterId])
   - Watch curated YouTube videos
   - Take timestamped notes
   - Mark videos as complete
   - Navigate between chapters
   ↓
7. Progress Tracking
   - View completion statistics
   - Monitor learning milestones
   - Track time spent

Detailed Flow Breakdown

1. Authentication Flow

User visits site → Clerk authentication → 
User created in DB via webhook → 
Redirect to profile completion

2. Profile Completion Flow

User enters languages & proficiency → 
POST /api/user/complete-profile → 
Profile saved to MongoDB → 
Redirect to dashboard

3. Assessment Flow

User clicks "Take Assessment" → 
POST /api/assessment/generate → 
AI generates questions (DeepSeek) → 
User answers questions → 
POST /api/assessment/submit → 
Calculate scores → 
Display results → 
Generate roadmap

4. Roadmap Generation Flow

Assessment completed → 
POST /api/roadmap/generate → 
AI creates curriculum structure → 
For each chapter: Search YouTube API → 
Filter embeddable videos → 
Save roadmap to database → 
Display roadmap to user

5. Learning Flow

User clicks chapter → 
GET /api/learn/[chapterId] → 
Fetch chapter data & videos → 
User watches videos → 
Take notes (POST /api/progress/chapter/[chapterId]/notes) → 
Mark video complete → 
Mark chapter complete (POST /api/learn/[chapterId]/complete) → 
Update progress

6. Job Portal Flow

User visits /jobs → 
GET /api/jobs → 
Display job listings → 
Filter/search jobs → 
Click job → 
GET /api/jobs/[id] → 
View job details → 
Apply (POST /api/jobs/[id]/apply) → 
Track applications

🚀 Getting Started

Prerequisites

Node.js 18+ installed
MongoDB database (local or Atlas)
YouTube Data API key
Clerk account for authentication
DeepSeek AI API key (optional, for AI features)

Installation

Clone the repository

git clone https://github.com/yourusername/learning-management-system.git
cd learning-management-system

Install dependencies

npm install

Set up environment variables (see Environment Setup)
Run the development server

npm run dev

Open your browser

http://localhost:3000

⚙️ Environment Setup

Create a .env.local file in the root directory:

# Database
MONGODB_URI=your_mongodb_connection_string

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/complete-profile
WEBHOOK_SECRET=your_clerk_webhook_secret

# YouTube API
YOUTUBE_API_KEY=your_youtube_api_key

# AI API (DeepSeek)
DEEPSEEK_API_KEY=your_deepseek_api_key

Setting Up Services

MongoDB

Create account at MongoDB Atlas
Create a new cluster
Get connection string
Add to .env.local

Clerk

Create account at Clerk.com
Create new application
Get API keys from dashboard
Configure webhook endpoint: /api/webhooks/clerk
Add webhook secret to .env.local

YouTube API

Go to Google Cloud Console
Create new project
Enable YouTube Data API v3
Create API key
Add to .env.local

DeepSeek AI

Sign up at DeepSeek
Get API key
Add to .env.local

🔌 API Endpoints

Assessment

POST /api/assessment/generate - Generate AI assessment
POST /api/assessment/submit - Submit assessment answers
GET /api/assessment/results - Get assessment results
POST /api/assessment/reset - Reset assessment

Roadmap

GET /api/roadmap - Get user's learning roadmap
POST /api/roadmap/generate - Generate new roadmap

Learning

GET /api/learn/[chapterId] - Get chapter data
POST /api/learn/[chapterId] - Update chapter progress
POST /api/learn/[chapterId]/complete - Mark chapter complete

Progress

GET /api/user/progress - Get user progress
GET /api/progress/chapter/[chapterId] - Get chapter progress
POST /api/progress/chapter/[chapterId]/notes - Save notes

User

POST /api/user/complete-profile - Complete user profile
POST /api/user/check-profile - Check profile completion

Jobs

GET /api/jobs - Get all jobs
GET /api/jobs/[id] - Get job details
POST /api/jobs/[id]/apply - Apply for job
GET /api/jobs/my-jobs/[email] - Get user's applications

YouTube

GET /api/youtube/search - Search YouTube videos

🗄️ Database Models

User Model

{
  clerkId: string;
  username: string;
  email: string;
  education?: string;
  career?: string;
  languagesKnown: [{
    name: string;
    proficiency: "Beginner" | "Intermediate" | "Advanced" | "Expert";
  }];
  isProfileComplete: boolean;
}

Course Model

{
  userId: ObjectId;
  modules: [{
    title: string;
    description: string;
    language: string;
    chapters: [{
      title: string;
      description: string;
      difficulty: string;
      videos: [{
        videoId: string;
        title: string;
        duration: string;
        thumbnail: string;
      }];
      isCompleted: boolean;
    }];
  }];
}

Assessment Model

{
  userId: ObjectId;
  questions: [{
    question: string;
    options: string[];
    correctAnswer: number;
    userAnswer?: number;
    language: string;
  }];
  score: number;
  isCompleted: boolean;
  createdAt: Date;
}

User Progress Model

{
  userId: ObjectId;
  chapterId: ObjectId;
  videoProgress: number;
  completedVideos: [string];
  notes: [{
    timestamp: number;
    content: string;
    createdAt: Date;
  }];
  isCompleted: boolean;
  lastAccessed: Date;
}

Job Model

{
  jobTitle: string;
  companyName: string;
  companyLogo: string;
  jobLocation: string;
  minPrice: string;
  maxPrice: string;
  salaryType: string;
  employmentType: string;
  experienceLevel: string;
  postingDate: string;
  description: string;
  applicants: [{
    email: string;
    appliedAt: Date;
  }];
}

🚀 Deployment

Vercel (Recommended)

Install Vercel CLI

npm i -g vercel

Deploy

vercel

Add Environment Variables
- Go to Vercel dashboard
- Add all environment variables from .env.local

Other Platforms

The application can be deployed to any platform that supports Next.js:

Netlify
Railway
Render
AWS Amplify

📝 Available Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm start            # Start production server

# Code Quality
npm run lint         # Run ESLint

🎯 Key Features Explained

Smart Video Filtering

The system uses YouTube API's videoEmbeddable=true parameter to ensure only embeddable videos are selected, resulting in 99% playback success rate.

Intelligent Caching

API responses are cached to reduce external API calls:

YouTube search results: 5 minutes
Roadmap data: 5 minutes
User progress: Real-time updates

Progress Tracking

Multi-level progress tracking:

Video Level: Individual video completion
Chapter Level: All videos in chapter completed
Module Level: All chapters in module completed
Course Level: Overall course completion percentage

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License.

👥 Authors

Your Name - Initial work

🙏 Acknowledgments

Next.js Team - Amazing framework
Shadcn - Beautiful UI components
Clerk - Seamless authentication
YouTube - Educational content platform
MongoDB - Flexible database
DeepSeek - AI capabilities

Made with ❤️ for developers, by developers

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.vscode		.vscode
app		app
components		components
hooks		hooks
lib		lib
models		models
public		public
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
features.md		features.md
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
proxy.ts		proxy.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🎓 AI-Powered Learning Management System

📋 Table of Contents

🎯 Overview

✨ Key Features

🤖 AI Assessment System

🗺️ Learning Roadmap

🎥 Video Learning Platform

💼 Job Portal

📊 Progress Management

🛠️ Tech Stack

Frontend

Backend

Development Tools

📁 Project Structure

🔄 Application Flow

User Journey

Detailed Flow Breakdown

1. Authentication Flow

2. Profile Completion Flow

3. Assessment Flow

4. Roadmap Generation Flow

5. Learning Flow

6. Job Portal Flow

🚀 Getting Started

Prerequisites

Installation

⚙️ Environment Setup

Setting Up Services

MongoDB

Clerk

YouTube API

DeepSeek AI

🔌 API Endpoints

Assessment

Roadmap

Learning

Progress

User

Jobs

YouTube

🗄️ Database Models

User Model

Course Model

Assessment Model

User Progress Model

Job Model

🚀 Deployment

Vercel (Recommended)

Other Platforms

📝 Available Scripts

🎯 Key Features Explained

Smart Video Filtering

Intelligent Caching

Progress Tracking

🤝 Contributing

📄 License

👥 Authors

🙏 Acknowledgments

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages