ATTENDENCE HUB

Abstract

1. Introduction

Attendance Hub is a comprehensive, role-based attendance management system designed for educational institutions. Built with a modern tech stack including React, Vite, Tailwind CSS, and Supabase, it provides a seamless experience for both administrators and students to track, manage, and report attendance data.

2. Objective

Attendance management system built with React, Vite, Tailwind, and Supabase.

This project demonstrates how JavaScript, React, Tailwind CSS can be applied to a real-world Full Stack Web Development problem.

3. Key Features / Modules

• Student Management: Add, edit, and view detailed student profiles, including parent contact information and photos.
• Attendance Marking: Effortlessly mark daily attendance for all students with a single click for "all present" or individual status updates.
• History & Logs: Access complete attendance history with advanced filtering by date, class, and status.
• Reports & Analytics: Generate and export attendance statistics, including attendance percentages and trends across the institution.
• Parent Alerts: Send automated attendance alerts to parents via a lightweight PHP-based messaging system.
• Personal Dashboard: View real-time attendance stats, including total days tracked, absent days, and current attendance percentage.
• Attendance Calendar: A color-coded calendar view providing an at-a-glance look at attendance status over the month.
• Detailed History: Review every attendance entry marked by the administrator.
• Performance Reports: Access and export monthly attendance breakdowns to monitor personal progress.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm
• A modern web browser
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/vincenzo-afk/ATTENDENCE-HUB.git
cd ATTENDENCE-HUB

1. Clone the repository:
2. Install dependencies:
3. Environment Configuration:
4. Database Setup:
5. Deploy Edge Functions:
6. npm run admin:bootstrap
7. Verifies Google OAuth bootstrap and prints an OAuth login URL.
8. Sign in using the Gmail set in VITE_ADMIN_EMAIL.

git clone https://github.com/vincenzo-afk/ATTENDENCE-HUB.git
   cd ATTENDENCE-HUB

npm install
   # or
   pnpm install

VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   VITE_ADMIN_EMAIL=admin@example.com
   VITE_SITE_URL=http://localhost:5173
   VITE_PHP_PARENT_ALERT_URL=http://localhost:8000/send-parent-alert.php
   VITE_PHP_PARENT_ALERTS_HISTORY_URL=http://localhost:8000/get-parent-alerts.php

npm run supabase:deploy:functions

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add role-based access control
• Deploy on a VPS or cPanel hosting with a custom domain
• Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Explain the frontend, backend and database layers of this application.
2. How is user authentication and authorisation implemented?
3. Describe the main database tables / collections and their relationships.
4. Which REST APIs or routes are exposed and what do they return?
5. How would you deploy this application to production?

9. Source Code & License

This project is developed by vincenzo-afk and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.