Campus Clock

CampusClock is a smart attendance system using AI face recognition and GPS to ensure secure, real-time check-ins, prevent proxy attendance, and automate alerts for low attendance efficiently.

Comment

CampusClock – AI Smart Attendance System 🚀 Inspiration

Traditional attendance systems are slow, manual, and vulnerable to proxy attendance. There is no guarantee that a student is physically present, and tracking absentees requires manual effort.

To solve this, we built CampusClock, an intelligent system that combines AI face recognition, GPS-based validation, and automated attendance logic.

👉 A student should only be marked present if they are physically present — otherwise, the system should automatically handle absence.

⚙️ What it does

CampusClock is a fully automated, AI-powered attendance system with real-time validation and smart absence handling.

👨‍🎓 Student Registration (Admin Controlled) Only admin can register students using a secure secret key Stored details: Name Registration Number Semester Branch Phone Number Data stored in Supabase 📍 GPS-Based Attendance Restriction Powered by Leaflet.js Admin defines dedicated campus coordinates (geo-fenced area)

✅ Attendance allowed only if:

Student is inside defined GPS boundary

❌ Blocked if:

Student is outside allowed location 🧠 AI Face Recognition Powered by Face-API.js

Process:

Student opens system Camera captures face AI verifies identity Matches with stored data ✅ Smart Attendance Logic

Attendance is marked only when:

✔️ Face is verified ✔️ Location is valid

👉 If both conditions pass:

Attendance is marked Present Stored in Supabase 🌙 Automatic Absence Marking (NEW FEATURE)

This feature ensures complete automation without manual intervention.

If a student does NOT mark attendance before 12:00 AM (midnight): System will automatically mark them as Absent

🔄 How it works:

A scheduled backend process runs daily at midnight It checks: Students who did not mark attendance that day Then: Updates their status to Absent in database

✅ Benefits:

No manual tracking required Accurate daily records Prevents missed or unrecorded attendance ⚠️ Attendance Monitoring & Alerts System tracks attendance percentage continuously If attendance < 60%: Student is flagged Requires admin approval Notification can be sent 🧑‍💼 Admin Dashboard Access controlled via admin secret key

Features:

📊 Overview

Total students Present / Absent count Low attendance alerts

📋 Management

Add / remove students View details

⚠️ Control Panel

Approve flagged students Monitor defaulters

📈 Reports

Daily logs Historical attendance 🛠️ How we built it

  1. Frontend HTML, CSS, JavaScript Camera + location access Clean UI for students & admin
  2. AI Engine Implemented using Face-API.js Real-time face detection & matching
  3. Backend & Database Powered by Supabase

Handles:

Student records Attendance logs Scheduled tasks (midnight absence marking)

  1. Map & GPS System Using Leaflet.js Geo-fencing implementation Location validation ⚔️ Challenges we ran into 🎯 Face recognition accuracy in low light 📍 GPS accuracy and boundary radius issues 🌙 Implementing reliable midnight scheduler 🔐 Securing admin access 🔄 Real-time system synchronization 🏆 Accomplishments that we're proud of ✅ Built a fully automated attendance system ✅ Eliminated proxy attendance ✅ Implemented GPS + AI validation together ✅ Added automatic absence marking ✅ Created a real-world scalable solution 📚 What we learned Using Face-API.js for AI Backend automation with Supabase Geo-fencing using Leaflet.js Handling real-time + scheduled systems together Importance of automation in real-world apps 🔮 What's next for CampusClock 📱 Mobile app version 🔔 SMS/WhatsApp alerts 📊 Advanced analytics 🤖 Better AI model (deep learning upgrade) 🧾 Auto reports (PDF/Excel) 🔐 Multi-authentication (Face + OTP)

Built With

  • admin-secret-key-system
  • browser-devtools
  • camera-api-(mediadevices.getusermedia)
  • cron-jobs
  • css3
  • face-api.js
  • face-recognition-api
  • geolocation-api
  • git
  • html5
  • javascript
  • leaflet.js
  • mediadevices-api
  • postgresql-(via-supabase)
  • role-based-access-control
  • supabase
  • supabase-edge-functions
  • vanilla-javascript
  • vercel-/-netlify
  • vs-code
  • web-application
Share this project:

Updates