LMS EPIC MVP

Architecture Overview

High-Level Architecture

1. Frontend: React.js for the user interface.
2. Authentication: AWS Cognito for user authentication and authorization.
3. Backend: AWS Lambda for serverless functions, AWS API Gateway for routing, and AWS DynamoDB for the database.
4. CI/CD: Terraform for infrastructure as code, ensuring repeatable and consistent deployments.
5. Hosting:

Detailed Architecture

Tech Stack

• Frontend: React.js, Tailwind CSS
• Backend: AWS Lambda, AWS API Gateway
• Database: AWS DynamoDB
• Authentication: AWS Cognito
• CI/CD: GitHub Actions, Terraform
• Hosting:

Frontend

• React: For building the user interface.
• Tailwind CSS: For styling the application.
• Authentication: AWS Cognito for user authentication and authorization.
• TanStack React Query: For data fetching and state management.
• Webpack/Babel: For module bundling and transpilation.
• Docker: To containerize the React app for consistent deployment.

Backend

• AWS Lambda: For serverless functions handling the business logic.
• AWS API Gateway: To expose RESTful APIs for the frontend to interact with backend services.
• AWS DynamoDB: For a highly scalable NoSQL database to store application data.
• AWS Cognito: For authentication and authorization.
• Terraform: For infrastructure as code (IaC) to manage AWS resources.
• Database (AWS DynamoDB)
  • Store user profiles, courses, chapters, student interactions, and history.
  • Design DynamoDB tables with appropriate partition keys and secondary indexes for efficient querying.
• Storage (AWS S3)
  • Store course media files (videos, documents).

DevOps

• Docker: For containerization.
• Terraform: For infrastructure management.
• CI/CD Pipeline: Using AWS CodePipeline or GitHub Actions for continuous integration and deployment.

CI/CD with Terraform

• Define Resources:
  • Define resources for DynamoDB tables, Lambda functions, and API Gateway in Terraform.
• Deploy Infrastructure:
  • Use Terraform to deploy and manage infrastructure as code.

Folder Structure

The folder structure remains the same as before for the frontend:

/src
  /api
    - api.js
  /components
    - Auth
      - Login.js
      - Register.js
    - Courses
      - CourseList.js
      - CourseDetail.js
      - CourseForm.js
    - Chapters
      - ChapterList.js
      - ChapterDetail.js
      - ChapterForm.js
    - Profile
      - Profile.js
  /contexts
    - AuthContext.js
  /hooks
    - useAuth.js
    - useCourses.js
    - useChapters.js
  /pages
    - Home.js
    - Login.js
    - Register.js
    - Dashboard.js
    - Profile.js
    - Course.js
    - Chapter.js
  /styles
    - tailwind.css
  /utils
    - helpers.js
    - constants.js
  - App.js
  - index.js

CRUD Functionality with AWS Lambda and DynamoDB

1. Set Up DynamoDB Tables:

   • Create tables for Users, Courses, Chapters, and StudentCourseHistory.

2. Create Lambda Functions:

   • Create Lambda functions for each CRUD operation.

3. Configure API Gateway:

   • Set up REST APIs with routes pointing to Lambda functions.

4. Deploy Infrastructure with Terraform:

   • Write Terraform scripts to deploy DynamoDB tables, Lambda functions, and API Gateway.

Frontend Components

1. Authentication Components:

   • Login.js and Register.js for handling user authentication.

2. Course Management Components:

   • CourseList.js, CourseDetail.js, and CourseForm.js for viewing and managing courses.

3. Chapter Management Components:

   • ChapterList.js, ChapterDetail.js, and ChapterForm.js for viewing and managing chapters.

4. Profile Management:

   • Profile.js for handling user profile updates.

Example Course Form Component

// src/components/Courses/CourseForm.js
import { useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { createCourse } from '../../api/api';

const CourseForm = () => {
    const { user } = useAuth();
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await createCourse({ title, description, author: user.username });
            setTitle('');
            setDescription('');
        } catch (error) {
            console.error("Error creating course", error);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Course Title"
                required
            />
            <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Course Description"
                required
            />
            <button type="submit">Create Course</button>
        </form>
    );
};

export default CourseForm;

Features Breakdown

Authentication (Login, Logout, etc.)

• AWS Cognito: To handle user sign-up, sign-in, password recovery, and multi-factor authentication.

CRUD Functionality

1. User Registration

   • Frontend: React forms for user registration. User submits registration/login form.
   • Backend: AWS Lambda functions triggered via API Gateway. Then stores user profile upon successful registration to DynamoDB.

2. Profile Management

   • Frontend: React components for viewing and editing profiles.
   • Backend: AWS Lambda functions to handle profile updates.

3. Course Management

   • Frontend: React components for creating, reading, updating, and deleting courses. Admin submits course creation/update form.
   • Backend: AWS Lambda functions for course CRUD operations, storing course data in DynamoDB.

4. Student Interaction

   • Frontend: React components for course viewing and interaction. Student requests access to premium content.
   • Backend: AWS Lambda functions to checks user’s subscription status and grants access. Also to track student interactions and store history in DynamoDB.

Course Viewing and Paywall

• Free Course Viewing: Accessible to all authenticated users.
• Premium Content: Managed through a paywall using AWS Cognito groups or custom attributes to differentiate access levels.

Student History Tracking

• Frontend: React components to display history of taken and paid courses.
• Backend: AWS Lambda functions to log and retrieve student activity from DynamoDB.

Admin CRUD Options

• Frontend: React components for admin dashboard with CRUD operations on courses, chapters, and student assignments.
• Backend: AWS Lambda functions to handle admin-specific operations with appropriate access controls via AWS Cognito.

Detailed Architecture Diagram

Diagram

+-------------+      +-----------------------+      +---------------+
|   Frontend  |<---> |  AWS API Gateway      |<---> |  AWS Lambda   |
|   (React)   |      |  (RESTful APIs)       |      |  (Business    |
|             |      +-----------------------+      |  Logic)       |
+-------------+               |                       +---------------+
                              |
                       +------+------+
                       | DynamoDB     |
                       | (Database)   |
                       +--------------+
                              |
                       +------+------+
                       | Cognito      |
                       | (Auth)       |
                       +--------------+
                              |
                       +------+------+
                       | S3           |
                       | (Storage)    |
                       +--------------+
                              |
                       +------+------+
                       | CloudFront   |
                       | (CDN)        |
                       +--------------+

1. Frontend (React App)

   • Dockerized React application hosted on AWS S3 (for static hosting) and served via AWS CloudFront (CDN).

2. Authentication

   • AWS Cognito for user management and authentication.

3. API Layer

   • AWS API Gateway to route requests to AWS Lambda functions.

4. Business Logic

   • AWS Lambda functions for handling CRUD operations and other business logic.

5. Database

   • AWS DynamoDB for storing application data (users, courses, chapters, student interactions, etc.).

6. Storage

   • AWS S3 for storing static files, such as course materials and multimedia content.

7. Infrastructure as Code (IaC)

   • Terraform scripts to manage the AWS infrastructure.

8. CI/CD Pipeline

   • AWS CodePipeline or GitHub Actions for automating the build, test, and deployment processes.

Devs

See setup instructions here

API Design

Data Architecture Overview

Monitoring & Logging

Reliability & Fault Tolerance

Security Architecture Overview

Scalability & Performance

Conclusion

This architecture leverages AWS services to ensure scalability, security, and ease of maintenance. By using serverless technologies like AWS Lambda and DynamoDB, you can achieve a highly scalable and cost-effective solution. Containerization with Docker ensures consistent deployment across different environments. The CI/CD pipeline automates the deployment process, enabling continuous delivery of new features and updates.