Skip to content

Architecture & Technical Overview

Welcome to the technical documentation for the LMS platform. This section is intended for developers and engineers responsible for maintaining, deploying, or scaling the codebase.

The system is designed as a decoupled architecture: two independent frontend Applications (Admin and User) communicating with a centralized backend-as-a-service.

Core Tech Stack

We utilize a modern, highly optimized React ecosystem to ensure fast load times, strict type safety, and maintainable UI components.

  • Frontend Framework: React powered by Vite for lightning-fast hot module replacement and optimized production builds.
  • Backend-as-a-Service: Supabase handles our PostgreSQL database, authentication, and file storage (for course resources).
  • Styling: Tailwind CSS for utility-first, responsive design.
  • UI Architecture: shadcn/ui provides accessible, customizable component primitives (radix-ui) that we own directly in the codebase.
  • Form Management: React Hook Form paired with Zod for strict schema validation, ensuring clean data entry for course creation and user profiles.

Module Structure

The platform is divided into two distinct repositories/directories to separate concerns and minimize the bundle size for end-users:

  1. Admin Application: Handles complex data mutations, course uploading, and employee tracking.
  2. User Application: Read-heavy, focused on delivering video content, resources, and quiz interactions with minimal friction.
  3. Edge Functions: These are used for actions that require third-party API keys or elevated server-side privileges that bypass standard RLS.

Use the guides below to set up your local environment and understand the data flow:

Developed for the Human Resources department.