🚀 Built a Real-Time Face Recognition Attendance System — Now as a Full-Stack Web App! Started with Python. Leveled up with React. 💪 What I built: ✅ Live webcam face detection in the browser ✅ Real-time face recognition & identification ✅ Auto attendance marking with date & time ✅ Unknown faces flagged with red box ✅ Known faces highlighted with green box ✅ Excel-style attendance log — zero duplicates --- 🛠️ Tech Stack: ⚛️ React.js — Component-based UI 📷 WebRTC / getUserMedia — Live webcam access 🧠 face-api.js — Face detection & recognition in browser 🎨 CSS3 / Tailwind — Responsive UI design 📊 SheetJS / openpyxl — Attendance Excel export 🐍 Python 3.10 + FastAPI — Backend API 📡 REST API — Frontend ↔ Backend communication --- ⚙️ How It Works (Workflow): 1️⃣ React app opens webcam via browser 2️⃣ face-api.js detects faces in real-time 3️⃣ Encodes face into 128-point vectors 4️⃣ Sends encoding to Python backend API 5️⃣ Backend compares with known dataset 6️⃣ Returns matched name or "UNKNOWN" 7️⃣ React UI draws box + label on video 8️⃣ Attendance saved → Excel auto-updated --- 📁 Project Structure: ``` project/ ├── frontend/ ← React App │ ├── src/ │ │ ├── App.jsx │ │ ├── WebcamView.jsx │ │ └── AttendanceTable.jsx ├── backend/ ← Python API │ ├── main.py │ ├── dataset/ │ └── attendance.xlsx ``` 💡 Key Highlights: → Runs 100% in the browser — no app install needed → Modular React components → Python handles heavy AI computation → Scalable to 100+ users Next step: Deploy on AWS + add email notification alerts! 🔥 👇 Comment "CODE" if you want the GitHub link! #React #Python #FaceRecognition #ComputerVision #FullStack #WebDevelopment #OpenCV #AI #JavaScript #BuildInPublic #TechProject #ReactJS #MachineLearning #Automation #StudentProject #100DaysOfCode

To view or add a comment, sign in

Explore content categories