Online Learning Management System (LMS)

Internship Project for Codec Technologies
Complete Online Learning Platform & Administration Panel
A real-world, high-performance web application optimized for education & e-learning! ⚡
Covers Public Course Catalog, Interactive Student Player, Quizzes & PDF Certificates, Instructor Workspace, and Admin Moderation Console.
_{Tech Stack: Vue 3 (Composition API), TypeScript, Tailwind CSS v4, Pinia, Django REST Framework, PostgreSQL, Docker}

---

🧠 Introduction

Developed as part of my internship with Codec Technologies, this project is a state-of-the-art, production-grade Online Learning Management System (LMS) designed with modern web standards, role-based workflows, and clean UI aesthetics.

It combines a seamless learning storefront & course player experience for students with a powerful workspace for instructors to build courses & quizzes, alongside an executive administrative back-office for course moderation, user management, and platform governance.

---

🌟 Key Platform Features

🌐 1. Public Website & Catalog

• Dynamic Hero Banner Sliders: Glassmorphic, auto-transitioning sliders (changing every 5 seconds) loaded dynamically from backend settings.
• Advanced Course Search & Filter: Real-time filtering by category, difficulty level (Beginner, Intermediate, Advanced), pricing (Free/Paid), and instant keyword search.
• Detailed Course Overview: Interactive section curriculum preview, target learning outcomes, instructor cards with ratings, and instant enrollment.
• Public Certificate Verification: Public URL (/certificate/verify/:id) to validate authentic, QR-stamped PDF certificates.
• Instructor Directory: Dedicated teacher profiles detailing bio, profile avatar, statistics, and authored courses.

🎓 2. Student Learning Hub (/student)

• Executive Student Dashboard: Real-time metrics for active courses, total enrolled, completed courses, active hours, and earned certificates.
• Interactive Course Learning Player:
  • Multi-Format Content: HTML text content viewer, YouTube/MP4 video player progress tracking, text-to-speech audio reader, and downloadable resources.
  • Automated Progress Tracking: Server-validated lesson completion criteria.
  • Private Notes System: Student-isolated per-lesson rich text notes (Create, Edit, Delete, Search).
  • Lesson Bookmarks: Instant lesson bookmarking for quick revision.
• Interactive Quizzes:
  • Anti-Cheat Engine: Correct answer indices are masked on API responses until server-side submission evaluation.
  • Countdown timer, passing threshold checks, and instant score feedback.
• Instant Certificate Generator: Dynamic QR-stamped PDF certificates generated via ReportLab upon 100% course completion.

👨‍🏫 3. Instructor Workspace (/teacher)

• Instructor Dashboard: Real DB analytics on authored courses, draft status, enrolled student counts, and average quiz scores.
• Course Builder: Step-by-step metadata configuration, section reordering, lesson content creation (Video, Text, Audio), and quiz creation.
• Course Submission Workflow: Submit draft courses for administrative approval.
• Student Monitoring: Monitor completion percentages of students enrolled across authored courses.

🛡️ 4. Admin Management Control Center (/admin)

• Platform Analytics: Executive statistics on user growth, active courses, revenue, and certificates issued.
• Course Moderation Queue: Review pending course drafts with single-click Approval or Rejection (with mandatory feedback reason).
• User Account Management: Search, filter by role (STUDENT, TEACHER, ADMIN), and toggle Active/Deactivated account status.
• Hero Slider Manager: Complete CRUD for homepage banner slides and global website settings.
• Audit Logs: Immutable log of administrative events for security compliance.

---

🔑 Default Test Accounts

For evaluation and local testing, use these pre-seeded accounts (passwords initialized via python backend/manage.py seed_lms):

Role	Email Address	Password	Portal Access
🛡️ Administrator	admin@edunexus.lms	admin123	Full Control Panel (/admin)
👨‍🏫 Instructor 1	sarah.tech@edunexus.lms	password123	Course Builder & Analytics (/teacher)
👨‍🏫 Instructor 2	david.code@edunexus.lms	password123	Authored Courses & Monitoring (/teacher)
🎓 Student 1	student1@edunexus.lms	password123	Enrolled Courses & Player (/student)
🎓 Student 2	student2@edunexus.lms	password123	Learning, Quizzes & Notes (/student)

---

🛠️ Tech Stack Breakdown

• Frontend: Vue 3 (Composition API), TypeScript, Pinia, Vue Router, Tailwind CSS v4, Lucide Icons.
• Backend: Python 3.10+, Django 5.0, Django REST Framework (DRF), SimpleJWT.
• PDF & Certificate Engine: ReportLab, QRCode, Pillow.
• Database: PostgreSQL 15 (Production) / SQLite (Zero-Config Local Dev).
• DevOps & Tooling: Docker, Docker Compose, Vite.

---

🚀 How to Run the Project

📋 System Prerequisites

• Node.js v18+ & npm v9+
• Python v3.10+
• Git
• (Optional) Docker & Docker Compose

---

💻 Option 1: Local Development Setup (Recommended)

Step 1: Clone Repository

git clone https://github.com/CodeWithTanim/Online-Learning-Management-System.git
cd Online-Learning-Management-System

Step 2: Set Up Backend (Django API)

1. Create and Activate Virtual Environment:

   • Windows (PowerShell):

     python -m venv venv
     .\venv\Scripts\Activate.ps1

     (If PowerShell blocks execution, run Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass first)

   • Windows (CMD):

     python -m venv venv
     venv\Scripts\activate.bat

   • macOS / Linux:

     python3 -m venv venv
     source venv/bin/activate

2. Install Python Dependencies:

   pip install -r backend/requirements.txt

3. Run Database Migrations:

   • Windows (PowerShell):

     $env:USE_SQLITE="True"; python backend/manage.py migrate

   • macOS / Linux / CMD:

     USE_SQLITE=True python backend/manage.py migrate

4. Seed Database with Demo Data:

   • Windows (PowerShell):

     $env:USE_SQLITE="True"; python backend/manage.py seed_lms

   • macOS / Linux / CMD:

     USE_SQLITE=True python backend/manage.py seed_lms

5. Start Django Server:

   • Windows (PowerShell):

     $env:USE_SQLITE="True"; python backend/manage.py runserver 0.0.0.0:8000

   • macOS / Linux / CMD:

     USE_SQLITE=True python backend/manage.py runserver 0.0.0.0:8000

   API will be live at http://127.0.0.1:8000/api/v1/.

---

Step 3: Set Up Frontend (Vue 3 + Vite)

Open a NEW terminal window and run:

cd frontend
npm install
npm run dev

Open your browser and navigate to http://localhost:5173.

---

🐳 Option 2: Docker Compose Setup (One Command)

# Build and launch all services with PostgreSQL
docker-compose up --build

Access the storefront at http://localhost:5173.

---

🧪 Testing & Verifications

Run Backend Test Suite

# Windows PowerShell
$env:USE_SQLITE="True"; python backend/manage.py test apps.accounts

# Linux / macOS
USE_SQLITE=True python backend/manage.py test apps.accounts

Run Frontend TypeScript & Production Build

cd frontend
npm run build

---

🗂️ Project Structure

Online-Learning-Management-System/
├── 📁 backend
│   ├── 📁 apps
│   │   ├── 📁 accounts        # JWT Auth, User Roles, Profiles
│   │   ├── 📁 analytics       # Platform & Instructor Dashboards
│   │   ├── 📁 certificates    # PDF + QR Code Generation
│   │   ├── 📁 courses         # Course Catalog, Categories, Reviews
│   │   ├── 📁 lessons         # Video, Audio, Text Content
│   │   ├── 📁 notes           # Isolated Student Notes
│   │   ├── 📁 quizzes         # Anti-cheat Quiz Engine & Grading
│   │   └── 📁 website         # Hero Slider & Global Settings
│   ├── 📁 config              # Django Core Configuration
│   ├── 📄 manage.py           # Django CLI
│   ├── 📄 requirements.txt    # Backend Dependencies
│   └── 📄 Dockerfile
├── 📁 frontend
│   ├── 📁 src
│   │   ├── 📁 components      # Reusable Vue Components
│   │   ├── 📁 layouts         # App Layouts (Student, Teacher, Admin)
│   │   ├── 📁 router          # Vue Router Guards & Maps
│   │   ├── 📁 stores          # Pinia State Management
│   │   └── 📁 views           # Vue Pages (Catalog, Player, Dashboards)
│   ├── 📄 package.json        # Frontend Dependencies
│   ├── 📄 vite.config.ts      # Vite Bundler Settings
│   └── 📄 Dockerfile
├── 📄 docker-compose.yml       # Docker Orchestration
├── 📄 .env.example             # Environment Configuration Template
└── 📄 README.md                # Project Documentation

---

🌟 Key Learnings (Internship)

• 🏗️ Full-Stack Architecture – Built a modular Django REST API paired with Vue 3 Pinia stores and route guards.
• 📜 Dynamic PDF & QR Generation – Developed automated certificate generation using ReportLab & QRCode upon course completion.
• 🔐 Anti-Cheat Engine Design – Implemented server-side quiz question masking to prevent client-side answer inspection.
• 🛡️ Role-Based Access Control (RBAC) – Designed permission decorators across Student, Instructor, and Admin roles.

---

✍️ Developer

MD SAMIUR RAHMAN TANIM
Intern at Codec Technologies
🔗 GitHub | LinkedIn

---

📜 Acknowledgments

• Thanks to Codec Technologies for the internship opportunity.
• Django REST Framework & Vue.js core development teams.
• Open-source community for awesome tooling & badges.

---

🤝 Contribute

Pull requests are welcome! Feel free to fork the repository and submit PRs for any features or improvements.

---

📡 Connect With Me: