Skip to content

LEARNING_PORTAL_GUIDE.md

Latest commit

 

History

History
501 lines (398 loc) · 16.2 KB

LEARNING_PORTAL_GUIDE.md

File metadata and controls

501 lines (398 loc) · 16.2 KB
Raw

Learning & Certification Portal - Implementation Guide

Overview

A complete Learning Management System (LMS) feature has been successfully implemented for the Alumni Management System. This enables alumni to create, share, and enroll in courses with progress tracking, quizzes, certificates, and skill development pathways.

Backend Implementation

Models Created/Updated

1. Course.model.js (Updated)

  • Structure: Enhanced from basic course model to full LMS course schema
  • Key Fields:
    • title, description, thumbnail - Course metadata
    • instructor - Reference to User model
    • category, tags, level - Organization and filtering
    • duration - Total course duration in minutes
    • isFree, price - Pricing information
    • modules - Array of module objects containing:
      • Nested lessons with videos, content, resources
      • Quiz questions within each lesson
    • learningOutcomes, requirements - Course details
    • enrollmentCount, averageRating - Course statistics
    • isPublished, status - Publication control
    • certificateTemplate - Certificate design reference

Indexes: instructors, categories, tags, published status, creation date

2. Enrollment.model.js (New)

  • Purpose: Track individual student progress through courses
  • Key Fields:
    • user, course - References (unique combination)
    • progress - Percentage (0-100)
    • completedLessons - Array of completed lesson data with timestamps and scores
    • completedModules - Array of completed module data
    • quizAttempts - Array of quiz attempt records with:
      • Score, total points, percentage, pass status
      • Question-by-question answers with correctness
    • certificateIssued, certificateId, certificateUrl - Certificate tracking
    • rating, review - Course feedback
    • totalTimeSpent - Cumulative learning time in seconds
    • lastAccessedAt - For tracking active learners

Indexes: user-course combination (unique), completion status, creation date

Controllers Updated/Created

course.controller.js (Complete Rewrite)

Course Management Functions:

  • createCourse() - Create new course (instructor/admin)
  • updateCourse() - Edit course details with authorization
  • publishCourse() - Make course public
  • deleteCourse() - Archive course (soft delete)

Course Browsing Functions:

  • listCourses() - Get published courses with filters (category, level, tags, search)
  • getCourseDetails() - Get full course info with enrollment status
  • getInstructorCourses() - Get courses created by current user

Enrollment Functions:

  • enrollCourse() - Enroll user in course
  • updateProgress() - Update lesson completion and progress
  • completeLesson() - Mark individual lesson as complete

Assessment Functions:

  • submitQuiz() - Process quiz submissions, calculate scores
  • generateCertificate() - Issue certificate upon course completion

User Learning Functions:

  • getMyLearning() - Get enrolled courses with filtering
  • getUserStats() - Get learning statistics dashboard

Routes Updated

File: backend/routes/course.routes.js

Public Routes:

  • GET / - List published courses
  • GET /:id - Get course details

Authenticated Routes:

  • GET /my-learning/list - Get user's enrolled courses
  • GET /my-learning/stats - Get learning statistics
  • GET /instructor/courses - Get instructor's courses

Course Management:

  • POST / - Create course
  • PUT /:id - Update course
  • POST /:id/publish - Publish course
  • DELETE /:id - Archive course

Enrollment & Progress:

  • POST /:courseId/enroll - Enroll in course
  • POST /enrollment/:enrollmentId/progress - Update progress
  • POST /enrollment/:enrollmentId/lesson/:lessonId/complete - Mark lesson complete

Assessments:

  • POST /enrollment/:enrollmentId/quiz/:quizId/submit - Submit quiz

Certificates:

  • POST /enrollment/:enrollmentId/certificate/generate - Generate certificate

Integration in Server

File: backend/server.js

Course router mounted at /api/courses:

const courseRouter = require('./routes/course.routes');
app.use('/api/courses', courseRouter);

Model Exports

File: backend/models/Index.js

  • Added Enrollment to exports for use in controllers

Frontend Implementation

New Components Created

1. CourseCatalog.jsx

Location: frontend/src/components/CourseCatalog.jsx

Features:

  • Browse all published courses
  • Real-time search functionality
  • Filter by category, level
  • Pagination support
  • Responsive grid layout (1/2/3 columns)
  • Course cards showing:
    • Thumbnail image
    • Title and description
    • Instructor info with avatar
    • Enrollment count and ratings
    • Price/Free status
    • Category tags

Props: None (uses URL params and context)

Key Hooks:

  • useNavigate - Navigation
  • useSearchParams - URL-based filtering
  • useState - Local state management
  • useEffect - API data fetching

2. CourseDetails.jsx

Location: frontend/src/components/CourseDetails.jsx

Features:

  • Full course information display
  • Hero section with thumbnail
  • Learning outcomes list
  • Course requirements
  • Course content breakdown by modules/lessons
  • Sticky sidebar with:
    • Pricing information
    • Instructor profile
    • Course statistics
    • Enroll/Continue buttons
  • Responsive design

Navigation:

  • Navigate to /course/:courseId to view

3. CoursePlayer.jsx

Location: frontend/src/components/CoursePlayer.jsx

Features:

  • Interactive lesson playback interface
  • Collapsible sidebar for course navigation
  • Video player support (iframe-based)
  • Lesson content with markdown rendering
  • Resource downloads
  • Quiz interface with:
    • Multiple choice questions
    • True/false questions
    • Score calculation
    • Result feedback
  • Progress tracking
  • Lesson completion marking
  • Navigation between lessons/modules

Navigation:

  • Navigate to /course-player/:enrollmentId to start learning

4. MyLearning.jsx

Location: frontend/src/components/MyLearning.jsx

Features:

  • Dashboard for learner's courses
  • Statistics cards showing:
    • Total enrollments
    • In-progress courses
    • Completed courses
    • Certificates earned
  • Filter by course status (All/In Progress/Completed)
  • Course cards with:
    • Progress bar
    • Time spent tracking
    • Continue learning button
    • View certificate button (for completed)
  • Pagination support

Navigation:

  • Navigate to /my-learning to access

5. CreateCourse.jsx

Location: frontend/src/components/CreateCourse.jsx

Features:

  • Full course creation interface for instructors
  • Sections for:
    • Basic information (title, description, category, level)
    • Pricing setup (free/paid)
    • Learning outcomes management
    • Requirements management
    • Tags management
    • Module and lesson creation
      • Expandable/collapsible modules
      • Inline lesson editing
      • Video URL support
  • Form validation
  • Save course functionality

Navigation:

  • Navigate to /create-course to create

Usage Pattern:

  1. Fill in basic course info
  2. Add learning outcomes and requirements
  3. Create modules
  4. Add lessons to modules
  5. Add video URLs, content, resources
  6. Save course (starts in draft)

API Endpoint Summary

Course Management Endpoints

Method Endpoint Auth Description
GET /api/courses No List published courses with filters
GET /api/courses/:id No Get course details
POST /api/courses Yes Create new course
PUT /api/courses/:id Yes Update course
POST /api/courses/:id/publish Yes Publish course
DELETE /api/courses/:id Yes Archive course

Enrollment Endpoints

Method Endpoint Auth Description
POST /api/courses/:courseId/enroll Yes Enroll in course
POST /api/courses/enrollment/:enrollmentId/progress Yes Update progress
POST /api/courses/enrollment/:enrollmentId/lesson/:lessonId/complete Yes Complete lesson

Learning Endpoints

Method Endpoint Auth Description
GET /api/courses/my-learning/list Yes Get enrolled courses
GET /api/courses/my-learning/stats Yes Get learning stats
GET /api/courses/instructor/courses Yes Get instructor's courses

Assessment Endpoints

Method Endpoint Auth Description
POST /api/courses/enrollment/:enrollmentId/quiz/:quizId/submit Yes Submit quiz
POST /api/courses/enrollment/:enrollmentId/certificate/generate Yes Generate certificate

Integration Checklist

Backend Setup ✅

  • Updated Course.model.js with LMS schema
  • Created Enrollment.model.js
  • Updated course.controller.js with all LMS functions
  • Updated course.routes.js with all endpoints
  • Added course router to server.js
  • Updated models Index.js with Enrollment export

Frontend Setup ⏳

Required Additional Steps:

  1. Add Route Definitions - Update your routing configuration:
// In your routing file (e.g., App.jsx or routes.jsx)
import CourseCatalog from './components/CourseCatalog';
import CourseDetails from './components/CourseDetails';
import CoursePlayer from './components/CoursePlayer';
import MyLearning from './components/MyLearning';
import CreateCourse from './components/CreateCourse';

// Add these routes:
<Route path="/courses" element={<CourseCatalog />} />
<Route path="/course/:courseId" element={<CourseDetails />} />
<Route path="/course-player/:enrollmentId" element={<CoursePlayer />} />
<Route path="/my-learning" element={<MyLearning />} />
<Route path="/create-course" element={<PrivateRoute><CreateCourse /></PrivateRoute>} />
<Route path="/instructor/my-courses" element={<PrivateRoute><InstructorCourses /></PrivateRoute>} />
  1. Add Navigation Links - Add menu items in your Header/Navigation component:
<Link to="/courses">Learning</Link>
<Link to="/my-learning">My Learning</Link> {/* For logged-in users */}
<Link to="/create-course">Create Course</Link> {/* For instructors */}

  1. Create InstructorCourses Component (Optional but recommended):

    • List courses created by the current user
    • Edit/delete course options
    • Publish/unpublish controls

  2. Styling Integration:

    • All components use Tailwind CSS (matching your existing setup)
    • Dark mode support via useTheme() context
    • Framer Motion animations for smooth UX

Feature Capabilities

For Students

✅ Browse and search courses by category, level, tags ✅ Enroll in free/paid courses ✅ Watch video lessons with multimedia support ✅ Track progress with visual indicators ✅ Complete lessons and modules ✅ Take quizzes with instant grading ✅ Earn certificates upon completion ✅ View learning statistics ✅ Rate and review courses ✅ Access course resources and downloads ✅ Continue learning from where they left off

For Instructors

✅ Create courses with multiple modules ✅ Add lessons with video, content, and resources ✅ Create quizzes with various question types ✅ Set learningoutcomes and requirements ✅ Control course publication status ✅ Set free/paid pricing ✅ Track enrollment numbers ✅ View student progress ✅ Manage course content ✅ Archive courses

System Features

✅ Course filtering and search ✅ Progress calculation ✅ Quiz scoring and grading ✅ Certificate generation ✅ Learning statistics ✅ User enrollment tracking ✅ Pagination for lists ✅ Dark mode support ✅ Responsive design (mobile-friendly) ✅ Proper authorization checks

Data Flow Examples

Enrolling in a Course

  1. User clicks "Enroll" on course details page
  2. POST to /api/courses/:courseId/enroll
  3. Backend creates Enrollment record
  4. Increments course enrollmentCount
  5. Redirect to My Learning or CoursePlayer

Completing a Lesson

  1. User clicks "Mark as Complete" or passes quiz
  2. POST to /api/courses/enrollment/:enrollmentId/lesson/:lessonId/complete
  3. Backend adds lessonId to completedLessons array
  4. Recalculates progress percentage
  5. If progress = 100%, marks course as complete
  6. UI updates with checkmark and new progress

Generating Certificate

  1. User completes course (100% progress)
  2. Click "Generate Certificate" button
  3. POST to /api/courses/enrollment/:enrollmentId/certificate/generate
  4. Backend creates unique certificateId
  5. Sets certificateIssued = true
  6. Returns certificate URL
  7. User can download/view certificate

Next Steps & Enhancements

Recommended Additions

  1. InstructorCourses Component - Manage created courses
  2. Certificate Service - Generate PDF certificates
  3. Payment Integration - Stripe/PayPal for paid courses
  4. Notifications - Notify students of course updates
  5. Reviews & Ratings - Student course feedback
  6. Leaderboards - Top learners/courses
  7. Discussion Forums - Per-course Q&A
  8. Student Reports - Detailed progress analytics
  9. Course Analytics - Instructor dashboard with student metrics
  10. Email Notifications - Course completion, enrollment confirmations

Customization Points

  • Certificate design templates
  • Question types (currently: multiple-choice, true-false, short-answer)
  • Course duration calculation logic
  • Progress calculation algorithm
  • Quiz passing scores
  • Pricing/subscription models

Testing Guide

Backend API Testing

Use Postman or similar tool to test:

  1. Create Course (Auth Required)
POST /api/courses
Headers: { Authorization: "Bearer TOKEN" }
Body: { title, description, category, level, isFree, modules: [] }
  1. Enroll in Course (Auth Required)
POST /api/courses/{courseId}/enroll
Headers: { Authorization: "Bearer TOKEN" }
  1. Get My Learning
GET /api/courses/my-learning/list
Headers: { Authorization: "Bearer TOKEN" }
Query: ?status=all&page=1

Frontend Testing

  1. Navigate to /courses and verify catalog loads
  2. Search/filter courses
  3. Click course to view details
  4. Enroll in a course
  5. Navigate to /my-learning to see enrolled course
  6. Click "Continue Learning"
  7. Complete a lesson
  8. Take quiz (if available)
  9. View certificate (if completed)

Files Modified During Implementation

Backend

Frontend

Support & Troubleshooting

Common Issues

Issue: Course doesn't show up in catalog

  • Solution: Ensure course has isPublished: true and status: 'published'

Issue: Enrollment fails

  • Solution: Check user authentication and verify course exists

Issue: Quiz doesn't grade correctly

  • Solution: Verify quiz.questions[].correctAnswer matches user answer exactly

Issue: Certificate button not showing

  • Solution: Ensure course is completed (progress = 100) and enrollment exists

Summary

The Learning & Certification Portal feature is now fully implemented and integrated into your Alumni Management System. All backend models, controllers, and routes are in place, and responsive React components are ready for frontend integration. Follow the integration checklist to connect the frontend components to your routing system and start using the LMS!