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 a global API structure designed to interact with a backend server.

Features

Modular Architecture: Organized into modules for easy maintainability and scalability.
Responsive Design: Built with Bootstrap 5.3 to ensure responsiveness across various devices.
Widget System: Extensible widget system with two size types (default full-width and icon-type for sidebar).
Global API System: Clearly defined API structure for communication with a backend (currently mocked).
Layout Modules: Pre-built layouts (Centered, Three-Column, Split-Column) for different page structures.
Page Components: Includes pre-built pages for Login, Register, Dashboard, Settings, Admin, Profile, and Manage Students.
Topbar Module: Navigation and user profile dropdown.
Modal Module: (To be implemented) For reusable modal components.
Basic Authentication Flow: Login and logout functionality with token-based session management (localStorage).

Technologies Used

Vanilla Typescript: For a type-safe and maintainable codebase.
Vite: For fast and efficient development and build process.
Bootstrap v5.3: For responsive layout and styling.
pnpm: Package manager for efficient dependency management.
argon2-browser: (For demonstration purposes - Backend Hashing Recommended) For frontend password hashing demonstration (Argon2id). Important: In a production environment, password hashing should be performed on the backend for security reasons.

Prerequisites

Node.js (>= 18 recommended)
pnpm (Install globally: npm install -g pnpm)

Installation and Setup

Clone the repository:

git clone <repository_url>
cd lms-frontend

Install dependencies using pnpm:
```
pnpm install
```
Start the development server:
```
pnpm dev
```
This will start the Vite development server. Open your browser and navigate to the address provided in the console (usually http://localhost:5173/).

Project Structure

lms-frontend/
├── index.html          # Main HTML entry point
├── pnpm-lock.yaml      # pnpm lock file for dependency management
├── pnpm-workspace.yaml # pnpm workspace configuration
├── public/             # Public assets (images, etc.)
├── README.md           # This README file
├── src/                # Source code directory
│   ├── api/              # API interaction functions (mocked in api.ts)
│   ├── assets/           # Static assets (images, icons)
│   ├── components/       # Reusable components
│   │   ├── layouts/      # Page layout components (CenteredLayout, ThreeColumnLayout, SplitColumnLayout)
│   │   ├── modules/      # Modules (TopbarModule, ModalModule - to be implemented)
│   │   ├── widgets/      # Widget components (LoginWidget, ButtonWidget, etc.)
│   ├── main.ts           # Main entry point for the application
│   ├── pages/            # Page components (LoginPage, DashboardPage, etc.)
│   ├── styles/           # Global styles and Bootstrap import (index.css)
│   ├── types/            # Typescript interfaces (Widget.ts, User.ts)
│   ├── utils/            # Utility functions (api.ts, auth.ts)
│   ├── vite-env.d.ts     # Vite environment declaration
├── tsconfig.json       # Typescript configuration
├── vite.config.ts      # Vite configuration

The frontend is built around a widget system. Widgets are independent, reusable components that display specific information or functionality.

Widget Sizes:
- default: Full column width, suitable for most widgets.
- icon: Smaller size, designed for use in collapsed sidebars or icon-based menus.
Widget Components: Located in src/components/widgets/. Examples include:
- LoginWidget: Login form.
- RegisterWidget: Registration information display.
- ButtonWidget: Reusable button component.
- StudentCountWidget, TeacherCountWidget, ProfileInfoWidget, PostFeedWidget, StudentTableWidget, TuitionFeeWidget: Placeholder widgets to be implemented.

API System

The frontend is designed to interact with a backend through a global API system defined in src/utils/api.ts.

Current Implementation: The api.ts file currently contains mocked API calls for demonstration purposes. It simulates API responses using timeouts and hardcoded data.
Backend Integration: To connect to a real backend, you will need to replace the mocked API calls in api.ts with actual fetch requests to your backend endpoints.
Expected Backend Endpoints (Example):
- POST /api/login: User login.
- GET /api/user: Get user data (requires authentication).
- POST /api/logout: User logout.
- /api/students, /api/teachers, /api/admin/students, etc.: Endpoints for managing students, teachers, and other LMS data.

Backend Considerations

Password Hashing (Backend Recommended): While argon2-browser is included for frontend password hashing demonstration, it is strongly recommended to implement password hashing (using Argon2id or similar) and salting on the backend for enhanced security. The frontend should send passwords securely (HTTPS) to the backend, and the backend should handle the hashing and verification process.
Authentication and Authorization: The backend should implement robust authentication (e.g., JWT or session-based) and authorization mechanisms to secure API endpoints and protect sensitive data.
Database: The database schema outlined in the initial prompt should be implemented on the backend to store user data, course information, enrollments, etc. (Refer to the initial prompt for database schema details).
Backend Technology: You can choose any suitable backend technology (Node.js, Python, Java, PHP, etc.) to build the API endpoints and connect to the database.

Further Development

Implement Modal Module: Create a reusable ModalModule component in src/components/modules/ModalModule.ts to handle modals for various purposes (e.g., classrooms under construction, account settings).
Complete Widget Implementations: Implement the remaining placeholder widgets in src/components/widgets/ (e.g., StudentCountWidget, TeacherCountWidget, ProfileInfoWidget, PostFeedWidget, StudentTableWidget, TuitionFeeWidget) to display actual data from the backend.
Account Settings Modal: Develop the Account Settings Modal to allow users to edit their profile information and change passwords.
Admin Page Functionality: Implement the functionality for the Admin page, including student and teacher management, using appropriate widgets and API calls.
Student Table Widget: Integrate a table library (e.g., Tabulator, DataTables) into the StudentTableWidget for enhanced table features like sorting, filtering, and pagination.
Classrooms Page/Modal: Implement the Classrooms feature, potentially starting with a modal indicating "Under Construction" as initially requested, and then expanding to a full Classrooms page with relevant widgets.
Form Validation: Add client-side form validation to login, registration (if implemented), and account settings forms for better user experience.
Error Handling: Improve error handling in API calls and display user-friendly error messages.
Styling and UI Polish: Enhance the visual design and user interface with custom CSS and Bootstrap components to create a polished and professional LMS frontend.
Backend Integration: Replace the mocked API calls with real API calls to your backend endpoints to connect the frontend to the backend data and functionality.

Contributing

Link to Contribution Guidelines

License

View the License

README.md

Learner Management System Frontend