This is the frontend for a modular and responsive Learner Management System (LMS), built with Vanilla Typescript, Vite, and Bootstrap v5.3. It utilizes a widget-based system and interacts with a dedicated backend server via a RESTful API using PAKE SRP for authentication.

Features

Modular Architecture: Organized into distinct modules (widgets, layouts, pages, API) for maintainability and scalability.
Responsive Design: Uses Bootstrap 5.3 for a consistent experience across desktops, tablets, and mobiles.
Widget System: Extensible widgets with default (full-width) and icon (sidebar) sizes.
API Integration: Connects to a live backend API (default: http://localhost:8080/api) for data fetching and actions.
Secure Authentication: Implements Password-Authenticated Key Exchange (PAKE SRP) for secure login via the thin-srp library.
Token-Based Sessions: Manages user sessions using tokens obtained from the backend upon successful login (stored in localStorage by default).
Layout Modules: Provides pre-built layouts: CenteredLayout, ThreeColumnLayout, SplitColumnLayout.
Core Pages: Includes pages for Login, Register (info only), Dashboard, Profile, Account Settings (Modal), Admin Dashboard, Manage Students.
Topbar Module: Features main navigation and a user profile dropdown with account actions.
Modal Module: Provides a reusable container for modal dialogs (e.g., Account Settings, notifications).

Technologies Used

Vanilla Typescript: For a robust, type-safe, and maintainable codebase without framework overhead.
Vite: For an extremely fast development server and optimized build process.
Bootstrap v5.3: For responsive layout, styling components, and utility classes.
pnpm: Efficient package manager for dependency management.
thin-srp: JavaScript client library for Secure Remote Password (SRP) protocol implementation.

Prerequisites

Node.js (>= 18 recommended)
pnpm (Install globally: npm install -g pnpm)
Running Backend: The LMS backend service must be running (see backend README) and accessible (defaults to http://localhost:8080).

Installation and Setup

Clone the repository:

git clone <your-frontend-repository-url>
cd lms-frontend

Install dependencies using pnpm:
```
pnpm install
```
Configure API Base URL (Optional):
- If your backend runs on a different address or port, update the API_BASE_URL constant in src/api/api.ts.
Start the development server:
```
pnpm dev
```
This will start the Vite development server. Open your browser and navigate to the address provided (usually http://localhost:5173).

Project Structure

lms-frontend/
├── index.html          # Main HTML entry point
├── package.json        # Project dependencies and scripts
├── pnpm-lock.yaml      # pnpm lock file
├── public/             # Static assets served directly
├── README.md           # This README file
├── src/                # Source code directory
│   ├── api/
│   │   └── api.ts      # Functions for interacting with the backend API (SRP, data fetching)
│   ├── assets/         # Static assets processed by Vite (images, icons)
│   ├── components/
│   │   ├── layouts/    # Page layout components
│   │   ├── modules/    # Larger UI modules (TopbarModule, ModalModule)
│   │   └── widgets/    # Reusable UI widgets
│   ├── main.ts         # Application entry point, initializes router/app state
│   ├── pages/          # Page-level components/logic
│   ├── styles/
│   │   └── index.css   # Global styles, Bootstrap import
│   ├── types/          # TypeScript interfaces and type definitions
│   ├── utils/
│   │   └── utils.ts    # Utility functions (auth state management, storage)
│   └── vite-env.d.ts   # Vite environment type declarations
├── tsconfig.json       # TypeScript configuration
├── tsconfig.node.json  # TypeScript configuration for Node contexts (e.g., Vite config)
└── vite.config.ts      # Vite build tool configuration

The UI is composed of reusable widgets found in src/components/widgets/. Each widget encapsulates specific functionality or displays data. They support different sizes (default, icon) for adaptability within various layouts.

API System

Defined in src/api/api.ts, this module handles all communication with the backend API.

Live Interaction: Functions use fetch to make requests to the running backend (default: http://localhost:8080/api).
SRP Flow: The login function implements the two-step SRP authentication handshake with the backend.
Authenticated Requests: Other API functions automatically include the stored authentication token in the Authorization: Bearer <token> header for protected endpoints.
Error Handling: Includes basic error handling and detection of unauthorized (401) responses.
Key Endpoints Used:
- POST /api/auth/srp/start
- POST /api/auth/srp/verify
- POST /api/auth/logout
- GET /api/profile/{user_id}
- PUT /api/profile/settings
- GET /api/admin/dashboard
- GET /api/admin/students
- GET /api/admin/students/{student_id}/financials

Backend Interaction Notes

Authentication: The backend handles the secure verification of passwords using SRP. The frontend never stores or hashes the raw password itself after the initial SRP calculation during login.
Authorization: Access to specific API endpoints (e.g., admin routes) is controlled by the backend based on the user's role/permissions associated with their session token.
Data Source: All dynamic data (user info, student lists, etc.) is fetched from the backend, which interacts with the MariaDB database.

Further Development

Complete Widget Functionality: Ensure all widgets fetch and display real data from the backend API.
Admin Page Enhancements: Implement full CRUD operations for student/teacher management, filtering, batch actions, and enrollment assignments.
Student Table Widget: Integrate a robust table library (e.g., Tabulator, TanStack Table) for improved sorting, filtering, and pagination.
Classrooms Module: Build out the Classrooms feature beyond the placeholder modal.
Robust Error Handling: Implement more comprehensive error handling and user feedback mechanisms throughout the UI.
Client-Side Validation: Add more input validation for forms (e.g., account settings).
UI/UX Polish: Refine styling, transitions, and interactions for a smoother user experience.
Testing: Implement unit and potentially end-to-end tests.
State Management: For larger applications, consider introducing a dedicated state management library (like Zustand, Pinia, Redux Toolkit) instead of relying solely on utils.ts.

Contributing

Link to Contribution Guidelines

License

View MIT License

README.md

Learner Management System Frontend