Update: Enhanced Angular frontend

LMS-Backend/Dockerfile

@@ -0,0 +1,28 @@
+# Use the official Python image as a parent image
+FROM python:3.9-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+# Set the working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libpq-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the project files
+COPY . .
+
+# Expose the port
+EXPOSE 8000
+
+# Run the Django development server
+CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

LMS-Frontend/Dockerfile

@@ -0,0 +1,28 @@
+FROM node:18.19
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json from the Angular app directory
+COPY ./app/package*.json ./
+
+# Install Angular CLI globally
+RUN npm install -g @angular/cli
+
+# Install frontend dependencies
+RUN npm install
+
+# Copy the entire Angular app to the working directory
+COPY ./app .
+
+# Build the Angular application for production
+RUN ng build --configuration production
+
+# Install a lightweight HTTP server to serve the application
+RUN npm install -g http-server
+
+# Expose the port the application will run on
+EXPOSE 8080
+
+# Serve the Angular application
+CMD ["http-server", "dist/your-angular-app-name", "-p", "8080"]

LMS-Frontend/app/package.json

@@ -30,6 +30,7 @@
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
     "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

README.md

@@ -20,6 +20,7 @@ Welcome to the **E-Learning Management System (LMS)**! This project consists of
   - [Testing the APIs](#testing-the-apis)
   - [Seeding Sample Data](#seeding-sample-data)
 - [Recommended GUI Tools](#recommended-gui-tools)
+- [Containerization](#containerization)
 - [Troubleshooting](#troubleshooting)
 - [Contributing](#contributing)
 - [License](#license)
@@ -531,6 +532,22 @@ To interact with the APIs and databases more easily, you can use the following G
 - **Swagger UI**: An interactive API documentation tool. You can access the Swagger UI at [http://127.0.0.1:8000/swagger/](http://127.0.0.1:8000/swagger/). Ensure the server is running before accessing the UI.
 - **Redoc**: Another interactive API documentation tool. You can access the Redoc UI at [http://127.0.0.1:8000/redoc/](http://127.0.0.1:8000/redoc/). Ensure the server is running before accessing the UI.
 
+## 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:**
+
+   ```bash
+   cd Learning-Management-System
+   ```
+
+2. **Build the Docker image:**
+
+   ```bash
+   docker compose up --build
+   ```
+
 ## Troubleshooting
 
 ### Common Issues

docker-compose.yml

@@ -0,0 +1,46 @@
+services:
+  backend:
+    build:
+      context: ./LMS-Backend
+      dockerfile: Dockerfile
+    command: python manage.py runserver 0.0.0.0:8000
+    volumes:
+      - ./LMS-Backend:/app
+    ports:
+      - "8000:8000"
+    depends_on:
+      - mongodb
+      - redis
+    environment:
+      - MONGO_HOST=mongodb
+      - MONGO_PORT=27017
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+
+  frontend:
+    build:
+      context: ./LMS-Frontend
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./LMS-Frontend:/app
+    stdin_open: true
+    tty: true
+
+  mongodb:
+    image: mongo:5.0
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongodb_data:/data/db
+
+  redis:
+    image: redis:6
+    container_name: redis
+    ports:
+      - "6379:6379"
+
+volumes:
+  mongodb_data: