Smart Attendance System

A modern face recognition-based attendance system built with React, Convex, and Clerk.

Features

• 🔐 Secure authentication with Clerk
• 👤 Face registration and recognition using face-api.js
• 📊 Admin dashboard for viewing all attendance records
• ⚡ Real-time updates with Convex
• 📱 Responsive design with Tailwind CSS

Setup

1. Install dependencies:

   npm install

2. Download face-api.js models: Download the required models from face-api.js models and place them in the public/models directory:

   • tiny_face_detector_model-weights_manifest.json
   • tiny_face_detector_model-shard1
   • face_landmark_68_model-weights_manifest.json
   • face_landmark_68_model-shard1
   • face_recognition_model-weights_manifest.json
   • face_recognition_model-shard1

3. Configure Clerk:

   • Create a Clerk account at clerk.com
   • Create a new application
   • Copy your publishable key to .env

4. Configure Convex:

   • Install Convex CLI: npm install -g convex
   • Run: npx convex dev
   • Copy your Convex URL to .env

5. Environment variables: Create a .env file with:

   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key
   VITE_CONVEX_URL=your_convex_url
   

6. Run the development server:

   npm run dev

Usage

1. Sign up and create an account
2. Register your face using the registration page
3. Mark attendance by scanning your face
4. Admin users can view all attendance records in the admin dashboard

Tech Stack

• Frontend: React, TypeScript, Tailwind CSS
• Backend: Convex
• Authentication: Clerk
• Face Recognition: face-api.js
• UI Components: shadcn/ui