February 2024

Person Tracking System for Smart Attendance

A comprehensive, real-time smart attendance system utilizing facial recognition and barcode scanning. This project consists of a React/TypeScript frontend and a Python (Flask) backend to provide seamless attendance tracking, student registration, and data reporting.

View on GitHub

Features

Face Recognition: Automatic attendance marking using real-time facial recognition via webcams.
Barcode/QR Scanner: Alternative attendance marking system using barcodes.
Student Registration: Web interface for registering new students and capturing their photos.
Real-time Processing: Live camera feed with on-the-fly detection and processing.
Attendance Reports: Downloadable attendance data as CSV files.
Modern UI: A sleek frontend built with React, Tailwind CSS, and Framer Motion.

Technology Stack

Frontend

React 18 & TypeScript
Vite & Tailwind CSS
Framer Motion
Lucide React
Supabase (Optional Integration)

Backend

Python & Flask (Flask-CORS)
OpenCV
face-recognition & dlib
pyzbar
MySQL

Setup Instructions

1. Prerequisites

Node.js (v18+), Python (v3.8+), MySQL Server and Workbench, and a working webcam.

2. Database Setup

Open MySQL Workbench and create a database (e.g., krisanth).
Run the SQL commands from backend/sql_project.sql.
Update the database connection credentials inside backend/facialrecognition.py:

mydb = mysql.connector.connect(
    host='localhost',
    user='root',
    passwd='YOUR_PASSWORD',
    port='3306',
    database='krisanth',
    auth_plugin='mysql_native_password'
)

3. Backend Setup

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt

Setup face images: Place student photos in the backend/faces/ folder using the format RegisterNumber_Name.jpg (e.g., URK22CS5025_Krisanth M.jpg).

4. Frontend Setup

npm install
npm run dev

Running the Application

Start the Backend

cd backend
python facialrecognition.py

Start the Frontend

npm run dev

Navigate to http://localhost:5173

Project Structure

.
├── backend/
│   ├── faces/                  # Directory for storing student photos
│   ├── templates/              # HTML templates
│   ├── barcodescanner.py       # Standalone barcode scanner script
│   ├── facialrecognition.py    # Main Flask API & face recognition logic
│   ├── requirements.txt        # Python dependencies
│   └── sql_project.sql         # Database schema
├── src/                        # React Frontend Source Code
│   ├── components/             # Reusable UI components
│   ├── pages/                  # Application pages/routes
│   ├── contexts/               # React Contexts for state management
│   ├── hooks/                  # Custom React hooks
│   ├── utils/                  # Helper functions
│   ├── App.tsx                 # Main React component
│   └── main.tsx                # React entry point
├── package.json                # Node.js dependencies & scripts
├── tailwind.config.js          # Tailwind CSS configuration
├── vite.config.ts              # Vite configuration
└── README.md                   # This file

Troubleshooting

Camera not working: Ensure no other application (like Zoom or another terminal) is currently using your webcam.
Database Connection Error: Verify that MySQL is running on localhost:3306 and your credentials match those in facialrecognition.py.
dlib Installation Issues: Installing dlib on Windows might require C++ Build Tools. Ensure you have Visual Studio installed with the "Desktop development with C++" workload.