Full-Stack Enterprise / Hardware Integration
RFID Attendance System
High-performance RFID attendance kiosk & enterprise administration suite
Overview
The RFID Attendance System is an end-to-end workforce tracking solution designed to replace manual logbooks and error-prone biometric finger scanners in corporate lobbies and operational facilities. Traditional biometric scanners frequently encounter hardware latency, high maintenance costs, and congested queues during shift turnovers.
Engineered with Next.js 16 and React 19, the platform combines a dedicated kiosk attendance terminal with a high-performance administrative command portal. Employees tap their RFID cards for sub-second attendance verification with audio-visual feedback, while HR and operations leaders monitor real-time workforce attendance through a responsive management dashboard.
What I Built
- –Lobby kiosk attendance terminal calibrated for wall-mounted 1080p and 4K displays featuring a high-tech HUD digital clock with Philippine Standard Time (UTC+8) telemetry and an animated seconds meter.
- –Keystroke-guarded RFID HID hardware listener (lib/HIDListeners.js) that captures USB card swipes instantly while ignoring active inputs (INPUT, TEXTAREA, SELECT, contenteditable) to prevent scan interference.
- –High-contrast punch confirmation dossier overlay presenting employee photo, Ashima ID, department, and paired Time In/Out status with a 9-second auto-clearing progress bar.
- –Interactive badge simulator drawer (invoked via hotkey 'D') enabling instant developer and QA testing of valid and unregistered badge scans without physical hardware.
- –Admin portal built with a standardized 4-tier layout (PageHeader -> Command Header -> KPI Strip -> Main Workspace Card) across all modules.
- –Employee records workspace powered by React Server Components for concurrent data fetching, slide-over Sheet dossiers, and base64 photo uploads.
- –Attendance logs module featuring paired daily punch histories, department filters, date range pickers, and client-side CSV export.
- –Granular Role-Based Access Control (RBAC) matrix supporting superadmin, admin, security, and HR roles with bcrypt-hashed credentials.
- –Global keyboard command palette (Cmd+K / Ctrl+K) for rapid administrative navigation.
Engineering
Architected around Next.js 16 App Router and React Server Components to stream employee and attendance datasets concurrently from a MySQL connection pool (mysql2) without client waterfalls.
Designed an embedded JWT permissions mechanism with NextAuth.js that encodes module permissions directly into the user session token upon authentication, eliminating redundant permission queries on every administrative route transition.
Implemented Next.js 16 route proxy middleware (proxy.js) to intercept unauthorized navigations before page rendering, coupled with strict requireAdminSession API route guards.
Engineered keystroke buffer velocity detection and target guarding in HIDListeners.js to differentiate between rapid hardware barcode/RFID scanner inputs and standard keyboard typing.
Enforced end-to-end data validation using centralized Zod schemas on all administrative mutation payloads and parameterized SQL queries to prevent SQL injection.
Outcome
Delivered a seamless, sub-second tap-and-go attendance experience that eliminated shift turnaround bottlenecks. The unified administrative suite gave HR teams instantaneous attendance tracking, automated punch pairing, and audit-ready reporting.