Learning-Management-System-Fullstack

E-Learning Management Fullstack System

Welcome to the E-Learning Management System (LMS)! This project consists of two main components: the Frontend (built with Angular) and the Backend (developed using Django and Django REST Framework), combined with CI/CD technologies such as Docker and Jenkins. The LMS is a full-featured web application designed to manage users, courses, lessons, quizzes, and much more. This README provides a complete guide on how to set up, run, and contribute to both parts of the system.

E-Learning Management System Logo

Visit the live demo app here: E-Learning Management System

Angular Node.js Django Python MongoDB Redis SQLite Swagger GitHub Actions Jenkins Docker Kubernetes NGINX Vercel MongoDB Atlas AWS Terraform GitHub Render Cypress Jest Pytest GitHub Actions Git

Table of Contents

Project Overview

The E-Learning Management System is a web-based platform designed to facilitate online education and training. It provides a comprehensive set of features for managing courses, lessons, users, quizzes, and more. The system is composed of:

Because we use MongoDB, Angular, and Django, we call this a MAD-Stack application! (Just a fun name to remember the technologies used)

The MAD-Stack

The MAD-Stack is a modern web development stack that combines the following technologies:

The MAD-Stack is a powerful combination that allows developers to build scalable, responsive, and feature-rich web applications. It leverages the strengths of each technology to create a seamless user experience.

Sounds mad, but it’s actually a great stack for building modern web applications!

System Architecture

For a comprehensive and detailed architecture documentation, please refer to ARCHITECTURE.md.

High-Level Architecture

The system follows a modern three-tier architecture with clear separation of concerns:

graph TB
    subgraph "Client Layer"
        A[Web Browser]
        B[Mobile Browser]
    end

    subgraph "Frontend - Angular SPA"
        C[Angular Components]
        D[Angular Services]
        E[HTTP Interceptors]
        F[State Management]
    end

    subgraph "API Gateway"
        G[NGINX Reverse Proxy]
    end

    subgraph "Backend - Django REST API"
        H[Django REST Framework]
        I[Authentication Layer]
        J[Business Logic]
        K[Serializers & ViewSets]
    end

    subgraph "Caching Layer"
        L[Redis Cache]
    end

    subgraph "Data Persistence"
        M[(MongoDB - Course Data)]
        N[(SQLite - Auth Data)]
    end

    A --> C
    B --> C
    C --> D
    D --> E
    E --> G
    G --> H
    H --> I
    I --> J
    J --> K
    K --> L
    K --> M
    I --> N

Technology Stack

graph LR
    subgraph "Frontend Stack"
        A[Angular 18]
        B[TypeScript]
        C[Bootstrap 5]
        D[RxJS]
    end

    subgraph "Backend Stack"
        E[Django 4.2]
        F[Django REST Framework]
        G[Python 3.12]
        H[MongoEngine ODM]
    end

    subgraph "Database Stack"
        I[(MongoDB 5.0)]
        J[(SQLite 3)]
        K[(Redis 6)]
    end

    subgraph "DevOps Stack"
        L[Docker]
        M[Kubernetes]
        N[Jenkins]
        O[GitHub Actions]
    end

    A --> E
    E --> I
    E --> J
    E --> K
    L --> M
    N --> O

    style A fill:#dd0031
    style E fill:#092e20
    style I fill:#47a248
    style K fill:#dc382d
    style L fill:#2496ed

Database Schema

The system uses MongoDB for storing course-related data with the following entity relationships:

erDiagram
    USER ||--o{ COURSE : instructs
    USER ||--o{ ENROLLMENT : enrolls
    USER ||--o{ PROGRESS : tracks
    USER ||--o{ NOTIFICATION : receives

    CATEGORY ||--o{ COURSE : categorizes

    COURSE ||--o{ LESSON : contains
    COURSE ||--o{ ENROLLMENT : has

    LESSON ||--o{ QUIZ : includes
    LESSON ||--o{ PROGRESS : tracks

    QUIZ ||--o{ QUESTION : contains
    QUESTION ||--o{ CHOICE : has

    USER {
        ObjectId id PK
        string username UK
        string email UK
        boolean is_instructor
        boolean is_student
        string bio
        string profile_picture
    }

    COURSE {
        ObjectId id PK
        string title
        string description
        ObjectId instructor_id FK
        ObjectId category_id FK
        decimal price
        boolean published
        datetime created_at
    }

    LESSON {
        ObjectId id PK
        string title
        ObjectId course_id FK
        string content
        string video_url
        datetime created_at
    }

    ENROLLMENT {
        ObjectId id PK
        ObjectId student_id FK
        ObjectId course_id FK
        datetime enrolled_at
    }

    PROGRESS {
        ObjectId id PK
        ObjectId student_id FK
        ObjectId lesson_id FK
        boolean completed
        datetime completed_at
    }

Authentication Flow

The system uses JWT-based authentication with token storage:

sequenceDiagram
    participant User
    participant Angular
    participant Django
    participant SQLite
    participant Redis

    User->>Angular: Enter Credentials
    Angular->>Django: POST /api/auth/login/
    Django->>SQLite: Verify Credentials

    alt Valid Credentials
        SQLite-->>Django: User Valid
        Django->>Django: Generate JWT Token
        Django->>Redis: Cache Token
        Django-->>Angular: {token, user}
        Angular->>Angular: Store in localStorage
        Angular-->>User: Redirect to Dashboard
    else Invalid Credentials
        SQLite-->>Django: Invalid
        Django-->>Angular: 401 Unauthorized
        Angular-->>User: Show Error
    end

    Note over User,Redis: Subsequent Requests

    User->>Angular: Access Protected Route
    Angular->>Django: Request + Bearer Token
    Django->>SQLite: Validate Token

    alt Valid Token
        Django->>Redis: Check Cache
        Redis-->>Django: Data
        Django-->>Angular: Protected Resource
        Angular-->>User: Display Content
    else Invalid Token
        Django-->>Angular: 401 Unauthorized
        Angular-->>User: Redirect to Login
    end

Component Architecture

graph TB
    subgraph "Frontend Components"
        A[Login Component]
        B[Course List Component]
        C[Lesson List Component]
        D[Enrollment Component]
        E[Progress Component]
    end

    subgraph "Angular Services"
        F[Auth Service]
        G[Course Service]
        H[Lesson Service]
        I[Enrollment Service]
        J[Progress Service]
    end

    subgraph "Backend ViewSets"
        K[CourseViewSet]
        L[LessonViewSet]
        M[EnrollmentViewSet]
        N[ProgressViewSet]
    end

    subgraph "Data Models"
        O[(Course Model)]
        P[(Lesson Model)]
        Q[(Enrollment Model)]
        R[(Progress Model)]
    end

    A --> F
    B --> G
    C --> H
    D --> I
    E --> J

    F --> K
    G --> K
    H --> L
    I --> M
    J --> N

    K --> O
    L --> P
    M --> Q
    N --> R

Deployment Architecture

graph TB
    subgraph "Cloud Infrastructure"
        subgraph "Frontend Hosting - Vercel"
            A[Vercel CDN]
            B[Static Assets]
        end

        subgraph "Backend Hosting - Render"
            C[Django Application]
            D[Auto-scaling]
        end

        subgraph "Database Services"
            E[(MongoDB Atlas)]
            F[(Redis Cloud)]
        end
    end

    subgraph "CI/CD Pipeline"
        G[GitHub]
        H[GitHub Actions]
        I[Jenkins]
    end

    subgraph "Containerization"
        J[Docker Images]
        K[Kubernetes Cluster]
    end

    A --> B
    C --> D
    E --> F

    G --> H
    H --> I
    I --> J
    J --> K

    B --> C
    D --> E
    D --> F

    style A fill:#000000
    style E fill:#47a248
    style F fill:#dc382d
    style G fill:#181717

API Request Flow with Caching

sequenceDiagram
    participant Client
    participant NGINX
    participant Django
    participant Redis
    participant MongoDB

    Client->>NGINX: HTTP Request
    NGINX->>Django: Forward Request

    alt Cache Hit
        Django->>Redis: Check Cache
        Redis-->>Django: Cached Data
        Django-->>Client: Response (Fast)
    else Cache Miss
        Django->>Redis: Check Cache
        Redis-->>Django: Cache Miss
        Django->>MongoDB: Query Database
        MongoDB-->>Django: Fresh Data
        Django->>Redis: Store Cache (TTL)
        Django-->>Client: Response
    end

    Note over Client,MongoDB: Write Operations Invalidate Cache

    Client->>Django: POST/PUT/DELETE Request
    Django->>MongoDB: Update Database
    MongoDB-->>Django: Success
    Django->>Redis: Invalidate Related Caches
    Django-->>Client: Response

CI/CD Pipeline

graph LR
    subgraph "Source Control"
        A[GitHub Repository]
        B[Push/PR]
    end

    subgraph "CI Pipeline"
        C[Run Tests]
        D[Lint Code]
        E[Build Docker Image]
    end

    subgraph "CD Pipeline"
        F[Deploy to Staging]
        G{Tests Pass?}
        H[Deploy to Production]
    end

    subgraph "Monitoring"
        I[Health Checks]
        J[Performance Monitoring]
    end

    A --> B
    B --> C
    C --> D
    D --> E
    E --> F
    F --> G
    G -->|Yes| H
    G -->|No| A
    H --> I
    I --> J

Features

Our E-Learning Management System comes packed with a variety of features to enhance the learning experience:

Live Deployment

The project is currently deployed live! You can access the live deployment using the following link: E-Learning Management System.

The backend is deployed on Render: Backend API.

Feel free to explore the platform, create an account, and test out the features!

[!IMPORTANT] Note: Our backend server may spin down due to inactivity, so you may experience delays in loading data initially as the backend is hosted on the free tier of Render. If you encounter any issues, please let me know.

Detailed Project Information:

Frontend User Interfaces

Home Page:

Home Page

Course List:

Course List

Lesson List:

Lesson List

User List:

User List

Enrollment List:

Enrollment List

Progress List:

Progress List

Registration Page:

Registration Page

Login Page:

Login Page

Unauthorized Access (when not logged in):

Unauthorized Access Page

Not Found Page:

Not Found Page

Footer:

Footer

Responsive Design: The frontend is fully responsive and optimized for all devices. Here is an example of the mobile view:

Mobile View

And many more pages & features. Feel free to explore the frontend and backend to see all the functionalities!

Available API Endpoints

Endpoint Method Description
/api/users/ GET Retrieve a list of all users.
/api/users/{id}/ GET Retrieve a specific user instance.
/api/users/ POST Create a new user instance.
/api/users/{id}/ PUT Update a specific user instance.
/api/users/{id}/ DELETE Delete a specific user instance.
/api/courses/ GET Retrieve a list of all courses.
/api/courses/{id}/ GET Retrieve a specific course instance.
/api/courses/ POST Create a new course instance.
/api/courses/{id}/ PUT Update a specific course instance.
/api/courses/{id}/ DELETE Delete a specific course instance.
/api/categories/ GET Retrieve a list of all categories.
/api/categories/{id}/ GET Retrieve a specific category instance.
/api/categories/ POST Create a new category instance.
/api/categories/{id}/ PUT Update a specific category instance.
/api/categories/{id}/ DELETE Delete a specific category instance.
/api/lessons/ GET Retrieve a list of all lessons.
/api/lessons/{id}/ GET Retrieve a specific lesson instance.
/api/lessons/ POST Create a new lesson instance.
/api/lessons/{id}/ PUT Update a specific lesson instance.
/api/lessons/{id}/ DELETE Delete a specific lesson instance.
/api/quizzes/ GET Retrieve a list of all quizzes.
/api/quizzes/{id}/ GET Retrieve a specific quiz instance.
/api/quizzes/ POST Create a new quiz instance.
/api/quizzes/{id}/ PUT Update a specific quiz instance.
/api/quizzes/{id}/ DELETE Delete a specific quiz instance.
/api/questions/ GET Retrieve a list of all questions.
/api/questions/{id}/ GET Retrieve a specific question instance.
/api/questions/ POST Create a new question instance.
/api/questions/{id}/ PUT Update a specific question instance.
/api/questions/{id}/ DELETE Delete a specific question instance.
/api/choices/ GET Retrieve a list of all choices.
/api/choices/{id}/ GET Retrieve a specific choice instance.
/api/choices/ POST Create a new choice instance.
/api/choices/{id}/ PUT Update a specific choice instance.
/api/choices/{id}/ DELETE Delete a specific choice instance.
/api/enrollments/ GET Retrieve a list of all enrollments.
/api/enrollments/{id}/ GET Retrieve a specific enrollment instance.
/api/enrollments/ POST Create a new enrollment instance.
/api/enrollments/{id}/ PUT Update a specific enrollment instance.
/api/enrollments/{id}/ DELETE Delete a specific enrollment instance.
/api/progress/ GET Retrieve a list of all progress records.
/api/progress/{id}/ GET Retrieve a specific progress record instance.
/api/progress/ POST Create a new progress record instance.
/api/progress/{id}/ PUT Update a specific progress record instance.
/api/progress/{id}/ DELETE Delete a specific progress record instance.
/api/notifications/ GET Retrieve a list of all notifications.
/api/notifications/{id}/ GET Retrieve a specific notification instance.
/api/notifications/ POST Create a new notification instance.
/api/notifications/{id}/ PUT Update a specific notification instance.
/api/notifications/{id}/ DELETE Delete a specific notification instance.

Unit Tests for APIs

The backend includes unit tests for the APIs. You can run the tests using the following command:

python manage.py test

Feel free to view and modify the tests in the core/tests.py file. Also, be sure to adjust the URLs in the test cases to match your actual URL configuration if different from the default.

File Structure

The project structure is as follows:

Learning-Management-System/
├── LMS-Backend
│   ├── .gitignore
│   ├── Dockerfile
│   ├── manage.py
│   ├── requirements.txt
│   ├── LICENSE
│   ├── db.sqlite3
│   ├── README.md
│   ├── LMSBackend/
│   │   ├── settings.py
│   │   ├── urls.py
│   │   ├── asgi.py
│   │   └── wsgi.py
│   └── core/
│       ├── management/
│       │   └── commands/
│       │       └── seed_sample_data.py
│       ├── migrations/
│       │   └── __init__.py
│       ├── models.py
│       ├── views.py
│       ├── tests.py
│       ├── admin.py
│       ├── apps.py
│       ├── serializers.py
│       └── urls.py
│
├── LMS-Frontend
│   ├── angular.json
│   ├── package.json
│   ├── Dockerfile
│   ├── README.md
│   ├── LICENSE
│   ├── app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── auth/
│   │   │   │   │   ├── login/
│   │   │   │   │   │   ├── login.component.ts
│   │   │   │   │   │   ├── login.component.html
│   │   │   │   │   │   └── login.component.css
│   │   │   │   │   ├── register/
│   │   │   │   │   │   ├── register.component.ts
│   │   │   │   │   │   ├── register.component.html
│   │   │   │   │   │   └── register.component.css
│   │   │   │   ├── core/
│   │   │   │   │   ├── footer/
│   │   │   │   │   │   ├── footer.component.ts
│   │   │   │   │   │   ├── footer.component.html
│   │   │   │   │   │   └── footer.component.css
│   │   │   │   │   ├── header/
│   │   │   │   │   │   ├── header.component.ts
│   │   │   │   │   │   ├── header.component.html
│   │   │   │   │   │   └── header.component.css
│   │   │   │   ├── pages/
│   │   │   │   │   ├── home/
│   │   │   │   │   │   ├── notfound.component.ts
│   │   │   │   │   │   ├── notfound.component.html
│   │   │   │   │   │   └── home.component.css
│   │   │   │   │   ├── notfound/
│   │   │   │   │   │   ├── notfound.component.ts
│   │   │   │   │   │   ├── notfound.component.html
│   │   │   │   │   │   └── notfound.component.css
│   │   │   │   ├── components/
│   │   │   │   │   ├── course-list/
│   │   │   │   │   │   ├── course-list.component.ts
│   │   │   │   │   │   ├── course-list.component.html
│   │   │   │   │   │   └── course-list.component.css
│   │   │   │   │   ├── lesson-list/
│   │   │   │   │   │   ├── lesson-list.component.ts
│   │   │   │   │   │   ├── lesson-list.component.html
│   │   │   │   │   │   └── lesson-list.component.css
│   │   │   │   │   ├── user-list/
│   │   │   │   │   │   ├── user-list.component.ts
│   │   │   │   │   │   ├── user-list.component.html
│   │   │   │   │   │   └── user-list.component.css
│   │   │   │   │   ├── enrollment-list/
│   │   │   │   │   │   ├── enrollment-list.component.ts
│   │   │   │   │   │   ├── enrollment-list.component.html
│   │   │   │   │   │   └── enrollment-list.component.css
│   │   │   │   │   ├── progress-list/
│   │   │   │   │   │   ├── progress-list.component.ts
│   │   │   │   │   │   ├── progress-list.component.html
│   │   │   │   │   │   └── progress-list.component.css
│   │   │   │   ├── services/
│   │   │   │   │   ├── auth.interceptor.ts
│   │   │   │   │   ├── auth.service.ts
│   │   │   │   │   ├── user.service.ts
│   │   │   │   │   ├── course.service.ts
│   │   │   │   │   ├── lesson.service.ts
│   │   │   │   │   ├── enrollment.service.ts
│   │   │   │   │   └── progress.service.ts
│   │   │   │   ├── app.routes.ts
│   │   │   │   ├── app.component.ts
│   │   │   │   ├── app.config.ts
│   │   │   │   ├── app.config.service.ts
│   │   │   │   ├── app.component.html
│   │   │   │   └── app.component.css
│   │   │   ├── assets/
│   │   │   │   ├── <images...>
│   │   │   │   └── .gitkeep
│   │   │   ├── main.ts
│   │   │   ├── styles.css
│   │   │   ├── manifest.json
│   │   │   └── index.html
│   │   ├── .editorconfig
│   │   ├── .gitignore
│   │   ├── angular.json
│   │   ├── package.json
│   │   ├── package-lock.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.app.json
│   │   └── tsconfig.spec.json
│   ├── LICENSE
│   └── README.md
│
├── nginx
│   ├── nginx.conf
│   └── Dockerfile
│
├── kubernetes
│   ├── configmap.yaml
│   ├── backend-deployment.yaml
│   ├── backend-service.yaml
│   ├── frontend-deployment.yaml
│   └── frontend-service.yaml
│
├── .gitignore
├── .env.example
├── docker-compose.yml
├── Jenkinsfile
├── openapi.yaml
├── LICENSE
└── README.md

Getting Started

Prerequisites

Ensure the following prerequisites are installed:

Backend Setup

Note: Before running the backend server, ensure MongoDB and Redis are running and accessible on your system. You can install MongoDB and Redis locally or use cloud services like MongoDB Atlas and Redis Cloud.

  1. Clone the repository:

    git clone https://github.com/hoangsonww/Learning-Management-System-Fullstack.git
cd Fullstack-Learning-Management-System/LMS-Backend

  2. Create and activate a virtual environment:

    python -m venv .venv
source .venv/bin/activate  # On Windows, use `.venv\Scripts\activate`

  3. Install dependencies:

    pip install -r requirements.txt

  4. Configure MongoDB and Redis:

    Ensure MongoDB and Redis are running and configured in settings.py. If not installed, follow the instructions to install them. It is very important to run MongoDB and Redis before running the backend server.

    Additionally, edit the .env file according to the .env.example file with the correct MongoDB and Redis connection strings.

  5. Apply migrations:

    python manage.py makemigrations
python manage.py migrate

  6. Create a superuser:

    python manage.py createsuperuser

    Follow the prompts to create a superuser account. Remember to note down the username and password because you will need it to authenticate when using the APIs later, as well as to access the Django admin panel.

  7. Put the SECRET_KEY and set Debug to True in the settings.py file:

    SECRET_KEY = 'your_secret_key_here'
DEBUG = True

    Replace your_secret_key_here with a random string of characters. This key is used for cryptographic signing and should be kept secret. Or you can also contact me to get the secret key.

    Alternatively, create an .env file in the project root directory following the format in the .env.example file:

    DJANGO_SECRET_KEY=your_secret_key_here
DJANGO_DEBUG=True
(...)

  8. Seed the database with sample data:

    python manage.py seed_sample_data

  9. Run the backend server:

    python manage.py runserver

    The backend server should now be running at http://127.0.0.1:8000/. If the server is run successfully, you should see the Django REST Framework browsable API interface at http://127.0.0.1:8000, as well as the following console output:

    python manage.py runserver
Successfully seeded realistic sample data
Successfully seeded realistic sample data
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
September 08, 2024 - 20:35:21
Django version 4.2.16, using settings 'LMSBackend.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Frontend Setup

  1. Navigate to the frontend directory:

    cd Learning-Management-System/LMS-Frontend/app

  2. Install dependencies:

    npm install

  3. Start the development server:

    ng serve

  4. Open the application in your browser:

    http://localhost:4200

  5. Test out the PWA functionality:

    • Open the application in your browser.
    • Click on the “Install” button in the address bar to install the PWA.
    • Check the installed PWA in your system applications.
    • Open the installed PWA and test its functionality.

API Documentation

Authentication

Most API endpoints require authentication. Use the /api/auth/login/ endpoint to log in and obtain an authentication token.

  1. Log in to get a token:

    curl -X POST http://127.0.0.1:8000/api/auth/login/ -H "Content-Type: application/json" -d '{
  "username": "your_username",
  "password": "your_password"
}'

    Use the obtained token in the Authorization header for subsequent requests:

    -H "Authorization: Token <your_token_here>"

Testing the APIs

You can test the API using curl, Postman, or Swagger UI.

Using curl

To test the API using curl, use the commands below. Replace <your_token_here> with the token obtained from the login endpoint.

Repeat similar curl commands for other endpoints.

Using Postman

  1. Open Postman.
  2. Create a new request for each endpoint.
  3. Set the method (GET, POST, PUT, DELETE) and URL (e.g., http://127.0.0.1:8000/api/users/).
  4. Under the “Authorization” tab, choose “Bearer Token” and paste your token.
  5. Send the request and check the response.

Using Swagger UI

  1. Navigate to the Swagger UI at http://127.0.0.1:8000/swagger/.
  2. Click on an endpoint to expand it.
  3. Click the “Try it out” button.
  4. Enter the required parameters and authentication token (Token <your_token_here>) in the “Authorization” header. Note that the token should be prefixed with Token and a space.
  5. Click “Execute” to see the API response.
  6. Alternatively, you can simply click the “Authorize” button in the top right corner of the page and enter your token there. This will automatically include the token in all requests. Then repeat steps 3 and 5 to test the endpoints.

Here is how the Swagger UI looks like:

Swagger UI

Using Redoc

  1. Navigate to the Redoc UI at http://127.0.0.1:8000/redoc/.
  2. Click on an endpoint to expand it.
  3. View the API documentation and test the endpoints.

Here is how the Redoc UI looks like:

Redoc UI

Using Django REST Framework Browsable API

  1. Choose any endpoint from the list above.
  2. Navigate to the endpoint URL in your browser.
  3. Log in using the superuser credentials.
  4. You will see a browsable interface where you can view the details of the endpoint.

For example, to view the list of all lessons, go to http://127.0.0.1:8000/api/lessons/. The interface should look like this:

Browsable API

Well, remember to log in first before accessing the API… Don’t forget to log in!

Seeding Sample Data

If you want to seed the database with realistic sample data, you can also run the seed_sample_data management command:

python manage.py seed_sample_data

This command will populate the database with randomly generated users, courses, categories, lessons, quizzes, questions, choices, enrollments, progress records, and notifications.

Note: By default, the seed_sample_data command will be executed when you run the python manage.py migrate command. If you don’t want to seed the database at that time, you can disable it by setting SEED_SAMPLE_DATA_ON_MIGRATE = False in the settings.py file. Also, your data might be different from mine because the data is randomly generated.

To interact with the APIs and databases more easily, you can use the following GUI tools:

For example, you can use MongoDB Compass to view the data in your MongoDB database, RedisInsight to view the data in your Redis database, and Postman to test the API endpoints, like below:

GUI Tools

MongoDB Atlas

This project is set up to use MongoDB Atlas as the cloud database. You can create a free account on MongoDB Atlas and set up a free cluster to use with the project. Follow these steps to set up MongoDB Atlas:

  1. Create a MongoDB Atlas account:

  2. Create a free cluster:

    • Click on “Build a Cluster”.
    • Choose the free tier option.
    • Select the cloud provider and region.
    • Click “Create Cluster”.

  3. Connect to your cluster:

    • Click on “Connect” to connect to your cluster.
    • Whitelist your IP address.
    • Create a MongoDB user and password.

  4. Get your connection string:

    • Click on “Connect” and choose “Connect your application”.
    • Copy the connection string.

  5. Set up the connection string in the Django settings:

    • Replace the .env configuration file with the connection string from MongoDB Atlas.

Alternatively, you can use the local MongoDB server for development and testing purposes.

Deployment

The Learning Management System supports multiple deployment options, from local development to production-grade cloud infrastructure.

Deployment Options Overview

Option Environment Complexity Cost Scalability Best For
Docker Compose Local/Dev Low Free Limited Development, Testing
Kubernetes Any Medium Variable High Self-hosted Production
AWS (Terraform) Cloud Medium-High ~$1400/mo Very High Enterprise Production
Vercel + Render Cloud Low ~$25/mo Medium Small-Medium Projects

Deployment Architecture

graph TB
    subgraph "Development"
        LOCAL[Local Development<br/>Docker Compose]
    end

    subgraph "Staging/Testing"
        K8S[Kubernetes<br/>Self-Hosted]
    end

    subgraph "Production Options"
        AWS[AWS Full Stack<br/>ECS + RDS + DocumentDB]
        VERCEL[Vercel + Render<br/>Managed Services]
    end

    LOCAL --> K8S
    K8S --> AWS
    K8S --> VERCEL

Infrastructure as Code

The project includes production-ready Infrastructure as Code:

See DEPLOYMENT.md for detailed deployment instructions for each option.

Containerization

The project can be containerized using Docker. The Dockerfile and docker-compose.yml files are provided in the repository. To containerize the project, follow these steps:

  1. Change directory into the project root:

    cd Learning-Management-System

  2. Build the Docker image:

    docker compose up --build

The above command will build the Docker image and start the containers for the backend, frontend, MongoDB, and Redis. You can access the application at http://localhost:4200 and the Django REST Framework API at http://localhost:8000.

Kubernetes

The project includes Kubernetes configuration files for deploying the backend and frontend applications. The Kubernetes directory contains the following files:

To deploy the applications to a Kubernetes cluster, follow these steps:

  1. Change directory into the Kubernetes directory:

    cd Kubernetes

  2. Create the configmap:

     kubectl apply -f configmap.yaml

  3. Create the backend deployment:

    kubectl apply -f backend-deployment.yaml

  4. Create the backend service:

     kubectl apply -f backend-service.yaml

  5. Create the frontend deployment:

     kubectl apply -f frontend-deployment.yaml

  6. Create the frontend service:

     kubectl apply -f frontend-service.yaml

The above commands will create the deployments and services for the backend and frontend applications. You can access the applications using the NodePort or LoadBalancer service IP addresses.

Testing

The project includes unit tests for both the backend and frontend applications. You can run the tests using the following commands:

Backend Tests

To run the backend tests, navigate to the LMS-Backend directory and run:

cd LMS-Backend

pytest -q

Frontend Tests

To run the frontend tests, navigate to the LMS-Frontend/app directory and run:

cd LMS-Frontend/app

# Run tests (normal mode)
npm run test

# Run tests (code coverage mode)
npm run coverage

OpenAPI Specification

Using the openapi.yaml File

  1. View the API Documentation
  1. Test the API
  1. Generate Client Libraries
  1. Generate Server Stubs
  1. Run a Mock Server
  1. Validate the OpenAPI File

This guide enables you to view, test, and utilize the API. You can also generate client libraries, server stubs, and run a mock server using the OpenAPI specification.

Jenkins CI/CD

The project includes a Jenkinsfile for setting up CI/CD pipelines using Jenkins. The Jenkinsfile defines the stages for building, testing, and deploying the backend and frontend applications.

To set up the CI/CD pipelines using Jenkins, follow these steps:

  1. Install Jenkins on your system or use a cloud-based Jenkins service.

  2. Create a new Jenkins pipeline project.

  3. Configure the pipeline to use the Jenkinsfile in the project repository.

  4. Run the pipeline to build, test, and deploy the applications.

The Jenkins pipeline will automatically build the Docker images, run the unit tests, and deploy the applications to a Kubernetes cluster.

Troubleshooting

Common Issues

  1. CORS Errors:
  1. Unauthorized Access:
  1. API Connection:
  1. Database Connection:
  1. Dependencies:
  1. UI Issues:
  1. Unable to Log In:

Debugging Tips

Additional Information

Refer to the README files in the LMS-Backend and LMS-Frontend directories for more detailed information on each part of the system.

These README files contain additional information on how to run, test, and contribute to the project.

Contributing

We welcome contributions! Feel free to submit issues and create pull requests.

  1. Fork the repository.
  2. Clone the forked repository to your local machine.
  3. Create a new branch and make your changes.
  4. Commit your changes and push them to your fork.
  5. Create a pull request to the main repository.
  6. I will review your changes and merge them if they are accepted.

License

This project is licensed under the MIT License.

Contact

If you have any questions or need further assistance, contact us at hoangson091104@gmail.com.

Alternatively, you can also open an issue in the repository here.

⬆ Back to Top

This site is open source. Improve this page.