This is a redesigned and modernized version of the original Biometric Attendance System with Google Sheet Sync and SQL Database, focused on a fully responsive and interactive web-based Admin Panel UI.

The redesigned panel improves the user experience with a clean UI in both light and dark themes for the following key routes:

• /login
• /dashboard
• /enroll
• /settings

Light Mode	Dark Mode

Light Mode	Dark Mode

Light Mode	Dark Mode

Light Mode	Dark Mode

This modern UI is intended for seamless integration with the original biometric system that synchronizes data with Google Sheets and SQL databases. It serves as a frontend SPA (Single Page Application) to manage and view biometric attendance records with ease.

Key Features:

• Mobile-friendly responsive design
• Theme toggling: Light/Dark
• Clean, minimalist layout with Tailwind CSS
• Modular and extensible architecture

You can find the hardware setup, Arduino code, and integration steps on the original Circuit Digest post:

🔗 Biometric Attendance System with Google Sheets

• Frontend: Vanilla JS + Vite + Tailwind CSS
• Theme Toggle: Dark/Light mode
• Backend Integration: Placeholder for future API endpoints to interface with biometric device and database

The project is organized into multiple components, including the Admin Panel (frontend UI), Arduino-based biometric firmware, Google Apps Script for Sheets integration, and optional 3D-printable casing parts.

├── 3D files/                  → 3D-printable faceplate and backplate for fingerprint sensor module
├── Admin Panel/              → Vanilla JS + Vite based frontend SPA
├── Biometric_Attendance_System/ → Arduino firmware & static HTML for ESP32
├── Google Script/            → Google Apps Script for syncing with Google Sheets
├── images/                   → Media assets used in the documentation and website
├── Schematics/              → Circuit diagram and electronics schematics
├── README.md                → Project documentation (you're reading this)

Tech Stack: Vite + Vanilla JS + Tailwind CSS Path: Admin Panel/

Make sure you have Node.js ≥ 16 and npm installed.

# Go to the Admin Panel folder
cd "Admin Panel"

# Install dependencies
npm install

To start the frontend locally:

npm run dev

This will launch the app at http://localhost:5173.

To build the project and generate compressed files (including Gzip for ESP32 deployment):

npm run build

This will output static files in Admin Panel/dist/.

Board: ESP32 Path: Biometric_Attendance_System/

Install the following libraries in the Arduino IDE:

• Adafruit Fingerprint Sensor Library
• Adafruit SSD1306
• ESP32 Arduino SQLite3 library

• Biometric_Attendance_System.ino: Main firmware sketch
• config/: Configuration headers (secrets, fonts, icons)
• data/: Static HTML pages served from ESP32 (deprecated after SPA integration)
• src/: External libraries (you can also install via Library Manager)

To upload HTML/JS to ESP32 SPIFFS, use the Arduino ESP32 filesystem uploader.

Path: Google Script/Code.gs This script runs on Google Apps Script linked with your Google Sheet to automatically log attendance data pushed from ESP32.

To set up:

1. Create a new Google Apps Script project.
2. Paste the contents of Code.gs.
3. Deploy as a web app and allow permissions.
4. Link the URL in your firmware or webhook logic.

Path: 3D files/ Includes .stl files for:

• Fingerprint Faceplate v3.stl
• Fingerprint Backplate v1.stl

These can be printed using standard FDM printers with PLA/ABS for mounting the fingerprint module cleanly on an enclosure.

• Ensure Wi-Fi credentials and Google Script endpoint are correctly placed in secrets.h.
• If using the new SPA (Admin Panel/), embed the compressed index.html.gz into ESP32's SPIFFS and configure it to serve at the root route.