🎓 SkillForge LMS

Transform Your Learning Journey with Expert-Led Courses

Live Demo • Documentation • Report Bug • Request Feature

📋 Table of Contents

About The Project
The Problem We Solve
Key Benefits
Security & Architecture
Tech Stack
Features
Getting Started
Project Structure
API Reference
Deployment
Contributing
License

🎯 About The Project

SkillForge is a modern, full-stack Learning Management System (LMS) designed to democratize education and make quality learning accessible to everyone. Built with cutting-edge technologies, it provides a seamless experience for both learners and educators.

Whether you're an individual looking to upskill, an educator wanting to share knowledge, or an organization training employees—SkillForge provides the tools you need.

🔥 The Problem We Solve

Traditional Learning Challenges

Problem	Our Solution
Expensive Education	Affordable courses with free enrollment options
Geographic Limitations	Learn anywhere, anytime, on any device
Outdated Content	Continuously updated courses by industry experts
Lack of Tracking	Built-in progress tracking and certificates
Complex Administration	Intuitive admin dashboard for course management
Security Concerns	Enterprise-grade authentication with Clerk

Who Benefits?

🎓 Students - Access quality education without barriers
👨‍🏫 Instructors - Create and monetize courses easily
🏢 Organizations - Train teams with custom learning paths
🏫 Educational Institutions - Extend reach beyond physical classrooms

✨ Key Benefits

🚀 Performance Lightning-fast with Next.js 16, React 19, and Turbopack for instant page loads	🔒 Security Enterprise-grade Clerk authentication with protected routes and secure sessions	📱 Responsive Fully responsive design that works beautifully on desktop, tablet, and mobile
📊 Analytics Track student progress, course completion rates, and engagement metrics	🎨 Modern UI Beautiful dark theme with gradient accents and smooth animations	🔧 Scalable Microservices-ready architecture that scales with your needs

🛡️ Security & Architecture

Authentication Layer (Clerk)

┌─────────────────────────────────────────────────────────────┐
│                     SECURITY ARCHITECTURE                    │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────────┐     ┌──────────────┐     ┌──────────────┐ │
│  │   Frontend   │────▶│    Clerk     │────▶│   Backend    │ │
│  │   Next.js    │     │  Auth Layer  │     │  Express.js  │ │
│  └──────────────┘     └──────────────┘     └──────────────┘ │
│         │                    │                    │          │
│         ▼                    ▼                    ▼          │
│  ┌──────────────┐     ┌──────────────┐     ┌──────────────┐ │
│  │  Protected   │     │    JWT +     │     │   MongoDB    │ │
│  │    Routes    │     │   Sessions   │     │  (Encrypted) │ │
│  └──────────────┘     └──────────────┘     └──────────────┘ │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Security Features

Layer	Protection
Frontend	• Clerk middleware for route protection • Environment variable isolation • XSS prevention with React
Authentication	• OAuth 2.0 & OpenID Connect • Multi-factor authentication (MFA) • Session management with automatic refresh
Backend	• CORS protection • Input validation & sanitization • MongoDB injection prevention • Clerk webhook verification
Data	• Encrypted connections (HTTPS/TLS) • Password hashing (bcrypt) • Secure environment variables

Backend API Security

// Clerk webhook verification for secure user sync
const { Webhook } = require("svix");

// All API routes protected with authentication middleware
app.use("/api/protected/*", verifyClerkToken);

// CORS configured for specific origins
app.use(
  cors({
    origin: process.env.FRONTEND_URL,
    credentials: true,
  })
);

🛠️ Tech Stack

Frontend

Technology	Purpose
Next.js 16	React framework with App Router & Turbopack
React 19	UI library with latest concurrent features
TypeScript	Type safety and better DX
Clerk	Authentication & user management
Axios	HTTP client for API communication

Backend

Technology	Purpose
Express.js	Fast, minimal web framework
MongoDB	NoSQL database for flexible schemas
Mongoose	ODM for MongoDB with validation
Svix	Webhook verification for Clerk
CORS	Cross-origin resource sharing

DevOps & Tools

Technology	Purpose
ESLint	Code linting and standards
dotenv	Environment variable management
npm	Package management

🎯 Features

For Students

✅ Browse and search courses by category/level
✅ Enroll in free and paid courses
✅ Track progress with visual indicators
✅ Resume learning from where you left off
✅ Access courses on any device
✅ Earn completion certificates

For Instructors (Coming Soon)

📝 Create and publish courses
📹 Upload video content
📊 View analytics and earnings
💬 Interact with students

For Administrators

👥 User management
📚 Course CRUD operations
📈 Platform analytics
⚙️ System configuration

🚀 Getting Started

Prerequisites

Node.js 18.0 or higher
npm 9.0 or higher
MongoDB (local or Atlas)
Clerk Account (for authentication)

Installation

Clone the repository

git clone https://github.com/yourusername/skillforge-lms.git
cd skillforge-lms

Install frontend dependencies
```
cd frontend
npm install
```
Install backend dependencies
```
cd ../backend
npm install
```

Configure environment variables

Frontend (frontend/.env.local):

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_API_URL=http://localhost:5000/api

Backend (backend/.env):

PORT=5000
MONGODB_URI=mongodb://localhost:27017/skillforge
CLERK_WEBHOOK_SECRET=your_webhook_secret

Start development servers

# Terminal 1 - Frontend
cd frontend
npm run dev

# Terminal 2 - Backend
cd backend
npm start

Open your browser
```
http://localhost:3000
```

📁 Project Structure

skillforge-lms/
├── 📂 frontend/                 # Next.js Application
│   ├── 📂 app/                  # App Router pages
│   │   ├── 📄 page.tsx          # Homepage
│   │   ├── 📄 layout.tsx        # Root layout + ClerkProvider
│   │   ├── 📂 about/            # About page
│   │   ├── 📂 contact/          # Contact page
│   │   ├── 📂 courses/          # Course listing & details
│   │   ├── 📂 my-courses/       # Student dashboard
│   │   ├── 📂 sign-in/          # Clerk sign-in
│   │   └── 📂 sign-up/          # Clerk sign-up
│   ├── 📂 components/           # Reusable components
│   │   ├── 📄 Navbar.tsx        # Navigation with auth state
│   │   ├── 📄 Hero.tsx          # Homepage hero section
│   │   ├── 📄 CourseCard.tsx    # Course card component
│   │   └── 📄 Footer.tsx        # Site footer
│   ├── 📄 proxy.ts              # Clerk middleware
│   └── 📄 package.json
│
├── 📂 backend/                  # Express.js API
│   ├── 📂 config/
│   │   └── 📄 db.js             # MongoDB connection
│   ├── 📂 models/
│   │   ├── 📄 Course.js         # Course schema
│   │   ├── 📄 User.js           # User schema
│   │   └── 📄 Progress.js       # Progress tracking
│   ├── 📂 routes/
│   │   ├── 📄 courseRoutes.js   # Course endpoints
│   │   ├── 📄 userRoutes.js     # User endpoints
│   │   └── 📄 progressRoutes.js # Progress endpoints
│   ├── 📄 server.js             # Express entry point
│   └── 📄 package.json
│
└── 📄 README.md

📡 API Reference

Courses

Method	Endpoint	Description	Auth
`GET`	`/api/courses`	Get all courses	Public
`GET`	`/api/courses/:id`	Get single course	Public
`POST`	`/api/courses`	Create course	Admin
`PUT`	`/api/courses/:id`	Update course	Admin
`DELETE`	`/api/courses/:id`	Delete course	Admin

Users

Method	Endpoint	Description	Auth
`POST`	`/api/users/webhook`	Clerk webhook	Webhook
`GET`	`/api/users/:clerkId`	Get user profile	Private
`POST`	`/api/users/:id/enroll/:courseId`	Enroll in course	Private

Progress

Method	Endpoint	Description	Auth
`GET`	`/api/progress/:userId/:courseId`	Get course progress	Private
`POST`	`/api/progress/complete`	Mark chapter complete	Private
`GET`	`/api/progress/:userId`	Get all progress	Private

🌐 Deployment

Deploy to Vercel (Frontend)

Deploy to Render (Backend)

Create a new Web Service on Render
Connect your GitHub repository
Set environment variables
Deploy!

Environment Variables for Production

Variable	Where	Description
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`	Frontend	Clerk public key
`CLERK_SECRET_KEY`	Both	Clerk secret key
`MONGODB_URI`	Backend	MongoDB connection string
`NEXT_PUBLIC_API_URL`	Frontend	Backend API URL

🤝 Contributing

Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.

Fork the Project
Create your 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

Distributed under the MIT License. See LICENSE for more information.

🙏 Acknowledgments

Next.js - The React Framework
Clerk - Authentication Made Simple
MongoDB - Database Platform
Vercel - Deployment Platform

⭐ Star this repo if you find it helpful!

Made with ❤️ by the Mrkarfa

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
backend		backend
frontend		frontend
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

🎓 SkillForge LMS

Transform Your Learning Journey with Expert-Led Courses

📋 Table of Contents

🎯 About The Project

🔥 The Problem We Solve

Traditional Learning Challenges

Who Benefits?

✨ Key Benefits

🚀 Performance

🔒 Security

📱 Responsive

📊 Analytics

🎨 Modern UI

🔧 Scalable