QR Attendance System 🏆

Real-time QR code attendance tracking for programming & robotics competitions.

Tech Stack

• React 18 + TypeScript
• Firebase (Auth, Firestore)
• EmailJS — send QR codes via email
• jsQR — QR code scanning
• xlsx — Excel import/export
• Vite — build tool

Features

• 📱 QR code scanning for team check-in
• 📊 Real-time attendance dashboard
• 📧 Automated QR email delivery
• 📁 Bulk Excel import with column mapping
• 🔐 Admin-only dashboard with Firebase Auth

Setup

1. Clone & Install

```bash git clone cd qr-attendance-system npm install ```

2. Environment Variables

```bash cp .env.example .env ```

Fill in .env:

Variable	Description
VITE_FIREBASE_API_KEY	Firebase API Key
VITE_FIREBASE_AUTH_DOMAIN	Firebase Auth Domain
VITE_FIREBASE_PROJECT_ID	Firestore Project ID
VITE_FIREBASE_STORAGE_BUCKET	Storage Bucket
VITE_FIREBASE_MESSAGING_SENDER_ID	Messaging Sender ID
VITE_FIREBASE_APP_ID	App ID
VITE_EMAILJS_SERVICE_ID	EmailJS Service ID
VITE_EMAILJS_TEMPLATE_ID	EmailJS Template ID
VITE_EMAILJS_PUBLIC_KEY	EmailJS Public Key
VITE_DEMO_ADMIN_EMAIL	Demo login email (optional)
VITE_DEMO_ADMIN_PASSWORD	Demo login password (optional)

3. Firebase Setup

Firestore Rules: ```bash firebase deploy --only firestore:rules ```

Firestore Indexes: ```bash firebase deploy --only firestore:indexes ```

Create admin user in Firestore: ``` /users/{uid} role: "admin" name: "Your Name" disabled: false ```

4. Run

```bash npm run dev ```

5. Build

```bash npm run build ```

Routes

Route	Description	Auth
/login	Admin login	Public
/admin	Admin dashboard	Admin only
/scanner	QR scanner	Open
/success	Check-in success	Open

Project Structure

``` src/ ├── components/ │ ├── admin/ # Admin dashboard components │ └── common/ # Shared components ├── context/ # React contexts (Auth, Teams, Toast) ├── hooks/ # Custom hooks ├── lib/ # Firebase initialization ├── pages/ # Page components ├── services/ # Firebase & EmailJS services ├── styles/ # Global CSS ├── types/ # TypeScript types └── utils/ # Helper functions ```

Security Notes

• EmailJS keys are client-side by nature — restrict domains in EmailJS dashboard
• Demo credentials are exposed to client bundle — use only for portfolio demos
• Firestore rules enforce admin-only writes on teams collection
• Scanner page is intentionally open (no auth) for event day use