LMS Documentation

Appearance

Developer Guide ​

Welcome to the LMS Developer Guide! This documentation provides comprehensive technical information for developers working on the Learning Management System.

Overview ​

The LMS is built as a modern, full-stack web application with a focus on type safety, scalability, and developer experience. It uses a monorepo architecture managed by Turborepo.

Technology Stack ​

Frontend ​

  • React 19 - UI library
  • TypeScript - Type-safe JavaScript
  • Vite - Build tool and dev server
  • TanStack Query - Data fetching and caching
  • Redux Toolkit - State management
  • React Router 7 - Client-side routing
  • Tailwind CSS 4 - Utility-first CSS
  • Radix UI - Accessible component primitives
  • Tiptap - Rich text editor
  • Vitest - Unit testing

Backend ​

  • Node.js with Bun - Runtime
  • Express 5 - Web framework
  • TypeORM - ORM for database interactions
  • TSOA - TypeScript OpenAPI generator
  • PostgreSQL - Primary database
  • JWT - Authentication
  • Argon2 - Password hashing

Cloud Functions ​

  • Cloudflare Workers - Serverless edge computing
  • Hono - Lightweight web framework
  • Wrangler - Cloudflare Workers CLI

Shared Packages ​

  • @repo/api - Auto-generated type-safe API client
  • @repo/db - Database entities and models
  • @repo/utils - Shared utilities
  • @repo/translations - Internationalization
  • @repo/vite-plugin-i18n-types - i18n type generation

External Services ​

  • Firebase - Authentication and storage
  • Appwrite - Alternative storage provider
  • OpenAI - AI chat functionality

Project Structure ​

fyp/
├── apps/
│   ├── client-frontend/    # React frontend application
│   ├── client-backend/     # Express backend API
│   ├── cloud-functions/    # Cloudflare Workers
│   └── docs/               # VitePress documentation
├── packages/
│   ├── api/                # Generated API client
│   ├── db/                 # Database entities
│   ├── utils/              # Shared utilities
│   ├── translations/       # i18n resources
│   ├── lint/               # Shared ESLint config
│   └── vite-plugin-i18n-types/  # i18n type plugin
├── deployment/             # Deployment configurations
├── package.json            # Root package configuration
├── pnpm-workspace.yaml     # pnpm workspace config
└── turbo.json              # Turborepo configuration

Key Features ​

Type Safety ​

  • End-to-end type safety from database to frontend
  • OpenAPI-based API contract
  • Auto-generated TypeScript types
  • Type-safe database queries with TypeORM

Developer Experience ​

  • Hot module replacement in development
  • Fast builds with Vite and Bun
  • Integrated linting and formatting
  • Comprehensive test coverage
  • Automated code generation

Architecture Highlights ​

  • Monorepo with shared packages
  • Separation of concerns
  • RESTful API design
  • Event-driven architecture
  • Scalable cloud functions

Getting Started ​

To get started with development, see the Getting Started guide.

Documentation Sections ​

Architecture ​

Components ​

Packages ​

Additional Topics ​

Development Workflow ​

  1. Setup - Clone repository and install dependencies
  2. Development - Make changes with hot reload
  3. Type Generation - Types are auto-generated from OpenAPI spec
  4. Testing - Write and run tests
  5. Linting - Ensure code quality
  6. Build - Build for production
  7. Deploy - Deploy to staging/production

Contributing ​

When contributing to the LMS:

  1. Follow the TypeScript and React best practices
  2. Maintain type safety throughout
  3. Write tests for new features
  4. Update documentation
  5. Follow the existing code style
  6. Create meaningful commit messages

Code Quality ​

The project maintains high code quality through:

  • TypeScript strict mode
  • ESLint with custom rules
  • Prettier for formatting
  • Automated testing
  • Code reviews
  • CI/CD checks

Support ​

For development questions:

  • Check this documentation
  • Review the codebase examples
  • Consult the API documentation
  • Reach out to the development team

Next Steps ​