Punch In Records

Punch In Records Smart Vision based AI attendance system

About the project We built this project to replace manual attendance with a fast, contactless system using browser-based face recognition. It was inspired by the need for more reliable attendance tracking in classrooms and training sessions, especially when manual roll calls become slow and error-prone.

What we learned Full-stack development with Node.js and Express Serving static frontend assets from a backend service Integrating face-api.js models in the browser Managing API routes for student registration, sessions, attendance, and reports Deploying a monorepo-style app on Render with a render.yaml manifest How we built it Backend: backend/server.js with Express, CORS, and a simple NeDB-based datastore Frontend: frontend/* pages plus JavaScript for dashboard, register, session, and reports Face recognition: captured face descriptors and used real-time matching in the browser Deployment: configured Render to run from the backend root so backend and frontend work together Challenges Getting face recognition working reliably across camera feeds and user permissions Making the frontend use the deployed backend URL instead of hardcoded localhost Serving the SPA fallback correctly for all frontend pages Packaging the app for Render deployment as one web service

Built With

• browser-camera-apis
• cors
• express.js
• face-api.js
• html/css/javascript
• nedb
• node.js