Architecture & Structure

The system consists of three core components that work together.

General architecture

Frontend service

Technology: React 19 and TypeScript

Key features:

Student interface: Provides tools and views for student tasks
Teacher interface: Supports class and resource management
Authentication: Integrates with Microsoft Authentication Library (MSAL) and handles user state
Responsive design: Adapts to desktop and mobile screen sizes

Communication: Uses REST APIs to interact with backend services

Backend service

Technology: Node.js 24+ with Express

Key features:

Authentication and authorization: Uses MSAL id tokens to control access
Security: Applies rate limiting and input validation
Email support: Sends emails using EmailLabs
Logging: Writes log data to files for monitoring and debugging

API documentation: Defined with the OpenAPI specification

Database layer

Primary database: MariaDB 11 or later
Cache: Redis, used to improve query performance

Project structure

DirectoryprojectMS/
- Directory.husky/ (Git hooks and pre-commit configuration)
  - …
- Directorydbinit
  - init.sql (MariaDB database initialization script)
- Directoryfrontend (React application)
  - Directorypublic/ (Static assets: favicon, etc.)
    …
  - Directorysrc/
    Directoryassets/ (Images, icons, and static resources)
    …
    Directoryconfig/ (Application configuration files)
    …
    Directorycore/ (Core: router, auth, API helpers)
    …
    Directoryfeatures/ (Feature-based modules and components)
    …
    Directorylocales/ (Internationalization and translation files)
    …
    Directoryshared/ (Reusable UI components and utilities)
    …
    App.tsx (Main application component)
    main.tsx (Application entry point and providers)
  - Dockerfile (Container configuration for production)
  - package.json (Dependencies and scripts)
  - pnpm-lock.yaml (Dependency lock file)
  - index.html (HTML entry point)
- Directoryscripts (scripts)
  - …
- Directoryserver (Express.js backend)
  - Directorylogs/ (Winston log files when logging is enabled)
    …
  - Directorysrc/
    Directoryconfig/ (Server configuration files)
    …
    Directorycore/ (Application logic: types, enums, interfaces)
    …
    Directorydatabase/ (Database schemas, migrations, and utilities)
    …
    Directoryfeatures/ (Feature-based API modules)
    …
    Directoryshared/ (Shared utilities and helper functions)
    …
    app.ts (Express application setup)
    index.ts (Server entry point)
  - Dockerfile (Container configuration)
  - openapi.yaml (API specification and documentation)
  - package.json (Dependencies and scripts)
  - pnpm-lock.yaml (Dependency lock file)
- .env (environmental variables)
- biome.json (Code linting and formatting configuration)
- commitlint.config.js (Commit message linting rules)
- docker-compose.yml (Production container orchestration)
- docker-compose.dev.yml (Development environment setup)
- package.json (Root workspace configuration)
- tsconfig.json (TypeScript compiler configuration)

For step-by-step instructions on installation and setup, please check installation guide.