https://github.com/muzamilofficial/attendance-management-system-in-react-firebase-using-face-recognization
The Attendance Management System is a real-time solution that eliminates the hassle of manual attendance tracking. Using advanced face recognition, Firebase authentication, and a seamless React UI, this system ensures secure, fast, and accurate attendance logging for schools, offices, and institutions.
https://github.com/muzamilofficial/attendance-management-system-in-react-firebase-using-face-recognization
andriod-app computer-vision facerecognition firebase flask flutter machine-learning python reactjs
Last synced: 4 months ago
JSON representation
The Attendance Management System is a real-time solution that eliminates the hassle of manual attendance tracking. Using advanced face recognition, Firebase authentication, and a seamless React UI, this system ensures secure, fast, and accurate attendance logging for schools, offices, and institutions.
- Host: GitHub
- URL: https://github.com/muzamilofficial/attendance-management-system-in-react-firebase-using-face-recognization
- Owner: Muzamilofficial
- Created: 2025-02-17T14:17:13.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-17T14:24:25.000Z (4 months ago)
- Last Synced: 2025-02-17T15:28:32.023Z (4 months ago)
- Topics: andriod-app, computer-vision, facerecognition, firebase, flask, flutter, machine-learning, python, reactjs
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Attendance Management System 🏫📷
[](https://reactjs.org/)
[](https://firebase.google.com/)
[](https://github.com/justadudewhohacks/face-api.js)
> **AI-Powered Attendance System Using Face Recognition!** 🤖💡
> A smart and efficient way to track attendance using face recognition, powered by React and Firebase.
---
## 🚀 Overview
The **Attendance Management System** is a **real-time** solution that eliminates the hassle of manual attendance tracking. Using advanced face recognition, Firebase authentication, and a seamless React UI, this system ensures secure, fast, and accurate attendance logging for schools, offices, and institutions. 📊✅
---
## 🎯 Features
- **Face Recognition Attendance** 📸
- Uses AI-powered facial recognition to mark attendance automatically.
- **Real-Time Database** 🔥
- Firebase Firestore stores attendance records securely.
- **User Authentication** 🔐
- Sign up/login using email & password (Firebase Auth).
- **Admin Dashboard** 📊
- View attendance logs, manage users, and generate reports.
- **Live Camera Feed** 🎥
- Captures live images for facial recognition.
- **Multi-Device Support** 📱💻
- Works on web, mobile, and tablets.
- **Export Attendance Data** 📜
- Download reports in CSV format.
---
## 🔍 Technologies Used
| Tech | Purpose |
|----------------|---------------------------------|
| **React.js ⚛️** | Frontend framework |
| **Firebase 🔥** | Database & Authentication |
| **Face API.js 🤖** | Face recognition engine |
| **Tailwind CSS 🎨** | UI Styling |
| **Redux Toolkit ⚡** | State management |
| **Chart.js 📊** | Attendance analytics |
---
## 🛠️ Installation & Setup
### 1️⃣ Clone the Repository
```bash
git clone https://github.com/yourusername/face-recognition-attendance.git
cd face-recognition-attendance
```
### 2️⃣ Install Dependencies
```bash
npm install
```
### 3️⃣ Set Up Firebase 🔥
```bash
Go to Firebase Console and create a new project.
Enable Firestore Database and Authentication (Email/Password).
Copy your Firebase config and paste it into .env file:
env
```
```bash
REACT_APP_API_KEY=your_firebase_api_key
REACT_APP_AUTH_DOMAIN=your_firebase_auth_domain
REACT_APP_PROJECT_ID=your_firebase_project_id
REACT_APP_STORAGE_BUCKET=your_firebase_storage_bucket
REACT_APP_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
REACT_APP_APP_ID=your_firebase_app_id
```
### 4️⃣ Start the Development Server 🚀
```bash
npm start
```
Open http://localhost:3000 to access the app. 🎉
## 🚀 Future Enhancements
- 📌 Mobile App (React Native)
- 🔔 Push Notifications for Attendance Alerts
- 🌍 Multi-Language Support
# 📸 Some Screenshots of the Project 🖼️✨