Skill Bolt
Initializing Platform
Skill Bolt
Marketplace Services Custom Projects Customization About Blog Contact Affiliate Program
Login Get Started Free

Connect with us

website Development v1.0.0 Intermediate

Geo Face Attendance System

0.0 (0)
0 Downloads
Updated 46 minutes ago

AI-powered attendance system using face recognition and geolocation with secure JWT authentication, admin dashboard, and MongoDB.

Technologies & Skills

React (Vite) JavaScript Axios Face-api.js HTML5 CSS3 Node.js Express.js MongoDB Atlas Mongoose JWT Authentication bcrypt.js CORS dotenv Render Vercel Git GitHub
INR 1,000
INR 1,500 33% OFF

Limited time offer

What's Included

Complete Source Code
Documentation
Project Report
Presentation Slides
External Download Link

Support & Customization

Support: Basic
Custom modifications not available
File Size 4.73 MB
Last Updated Jun 29, 2026

Resource Links

Purchase this project to unlock source and premium resources. Document/report remain secure preview-based on this page.

# Geo Face Attendance System


Geo Face Attendance System is a full-stack MERN application that enables secure and automated attendance using **Face Recognition** and **Geolocation Verification**.


The system verifies a user's identity through facial recognition and ensures attendance can only be marked from an authorized location. JWT authentication protects all user sessions, while the admin panel provides attendance management and user monitoring.


## Features


✅ Secure User Registration & Login (JWT Authentication)


✅ Face Recognition using Face-api.js


✅ Geolocation-based Attendance Verification


✅ Student Dashboard


✅ Admin Dashboard


✅ Protected REST APIs


✅ Attendance History


✅ MongoDB Atlas Database


✅ Responsive User Interface


## Tech Stack


### Frontend

- React.js (Vite)

- Axios

- HTML5

- CSS3

- Face-api.js


### Backend

- Node.js

- Express.js

- MongoDB Atlas

- Mongoose

- JWT

- bcrypt.js


### Deployment

- Render (Backend)

- Vercel (Frontend)

- MongoDB Atlas (Database)


## Challenges Solved


- Secure authentication with JWT

- Real-time face verification

- GPS-based attendance validation

- REST API integration

- Cloud deployment using Render & Vercel


## Future Improvements


- Attendance analytics dashboard

- Email notifications

- QR Code attendance

- Multi-face detection

- Mobile application

- AI-based liveness detection

Future Enhancements

  • AI-based liveness detection to prevent spoofing.
  • QR code-based attendance as an alternative verification method.
  • Email and push notifications.
  • Attendance analytics and reporting dashboard.
  • Export attendance records to PDF and Excel.
  • Mobile application for Android and iOS.
  • Multi-factor authentication.
  • Facial recognition performance optimization.


Known Issues

  • Face recognition accuracy depends on lighting conditions and camera quality.
  • Geolocation accuracy varies based on the device and browser.
  • The free Render service may take 30–60 seconds to wake up after inactivity.
  • Camera permission must be granted before attendance can be marked.


Installation

Prerequisites

  • Node.js (v18 or later)
  • npm
  • MongoDB Atlas account
  • Git

Clone the Repository

git clone https://github.com/AdiCoder0721/geo-face-attendance.git
cd geo-face-attendance

Backend Setup

cd server
npm install

Create a .env file inside the server directory:

MONGO_URI=your_mongodb_connection_string
ADMIN_KEY=your_admin_secret_key

Start the backend server:

npm run dev

Frontend Setup

Open a new terminal:

cd client
npm install

Create a .env file:

VITE_API_URL=http://localhost:5000

Start the frontend:

npm run dev

Open your browser and visit:

http://localhost:5173


Usage

  1. Register a new user account or log in with existing credentials.
  2. Allow the browser to access your webcam and location.
  3. The application verifies the user's face and current location.
  4. If verification is successful, attendance is recorded in MongoDB Atlas.
  5. Users can view their attendance history from the dashboard.
  6. Administrators can manage users and monitor attendance records through the admin dashboard.
  7. The backend REST API is hosted on Render, while the frontend is deployed on Vercel.


System Requirements

Operating System:

  • Windows 10/11, macOS, or Linux

Software Requirements:

  • Node.js v18 or later
  • npm
  • Modern Web Browser (Chrome, Edge, Firefox)

Database:

  • MongoDB Atlas

Hardware Requirements:

  • Minimum 4 GB RAM
  • 2 GB Free Disk Space
  • Webcam (required for face verification)
  • Internet Connection
  • GPS/Location access enabled in the browser


Open Slides

No Q&A available yet

Be the first to ask a question!

Ask a Question

Customer Reviews

0.0 0 reviews
5
0
4
0
3
0
2
0
1
0

Write Your Review

No reviews yet

Be the first to review this project!

Related

Similar Projects

You might also be interested in these projects

Full Stack Bhautika-_Portfolio-application-
website Development
0.0 (0)
Intermediate
K
Kartik
Verified Seller
25% OFF

Full Stack Bhautika-_Portfolio-application-

Booking-enabled portfolio site for physiotherapist Nirupama Bhatt, built with React, Firebase, and Gemini AI lets clients view her work and book slot

HTML CSS JAVASCRIPT +5
₹1,500 ₹2,000
View Project
StayNext - Pg Discovery Platform
website Development
0.0 (0)
Intermediate
R
Rajeev Patel
Verified Seller

StayNext - Pg Discovery Platform

Built a full-stack PG platform where users discover PGs and owners manage listings, rooms, and tenant details.

Spring Boot Mysql Html +2
Full-Stack E-Commerce website with MERN
website Development
0.0 (0)
Advanced
S
SHYAM PATIDAR
Verified Seller
20% OFF

Full-Stack E-Commerce website with MERN

Artisan Bazaar is a full-stack e-commerce website designed to connect local artisans with digital shoppers.

React MongoDB CSS +3
₹4,000 ₹5,000
View Project
Task Manager App – MERN Stack
website Development
FREE
0.0 (0)
Intermediate
C
Charishma Nelakurthi
Verified Seller

Task Manager App – MERN Stack

A full-stack Task Manager app built with MERN stack featuring priority levels, due dates, dark mode, and live deployment.

MongoDB Express React +1