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.