Attendance Management Web UI

A modern web interface for managing class attendance, built with NestJS and vanilla JavaScript.

Features

Teacher Login: Secure authentication for teachers only
Day-based Tabs: Navigate between different class days with attendance records
Interactive Attendance List: Click on presence/absent chips to manually toggle student status
Reset List: Reset all attendance for a selected day
Delete Day: Remove all attendance records for a specific day
Export CSV: Export attendance data to CSV format

Prerequisites

Node.js (v18 or higher)
The backend server (isys556-attendance) must be running on http://localhost:3000

Installation

npm install

Development

npm run dev

The application will be available at http://localhost:3001

Production

npm run build
npm start

Configuration

The frontend communicates with the backend API. Make sure the backend is running on port 3000. If your backend runs on a different port, update the API_BASE_URL constant in public/app.js.

Usage

Start the backend server (isys556-attendance)
Start this web UI server
Navigate to http://localhost:3001
Login with teacher credentials (e.g., username: ljin, password: tcljin556)
Use the dashboard to manage attendance

Project Structure

TapClassWebUI/
├── src/
│   ├── app.module.ts    # NestJS module configuration
│   └── main.ts          # Application entry point
├── public/
│   ├── index.html       # Main HTML file
│   ├── styles.css       # Styling
│   └── app.js           # Frontend application logic
├── package.json
└── tsconfig.json

Sprk3lzZ/TapClassWebUI