📦 Classroom Attendance Scanner (React Native + Expo + Zustand)

🧭 Overview

This project is a Proof of Concept (POC) for a classroom attendance app that uses a Bluetooth barcode scanner to log student check-ins and check-outs.

Each student has a barcode ID.
When scanned, the app records:

• Check-in time if the barcode hasn't been seen yet.
• Check-out time if the same barcode is scanned again.

At the end of a class, the instructor can send all attendance records to a mock API endpoint.

---

⚡ Core Features

• Random Mode - Scan ANY barcode and it maps to a random student (perfect for demos!)
• Works with Bluetooth scanners in HID (keyboard emulation) mode
• Auto-Scan Demo Mode for digital-only demonstrations (no physical scanner needed!)
• Tracks check-ins and check-outs automatically
• Uses Zustand for lightweight state management
• Can handle 1000+ scans per session
• Sends all data to a mock API in one batch
• Expo-compatible (no native BLE code needed)
• 20 preset student barcodes for testing

---

🧱 Tech Stack

• React Native (via Expo custom dev client)
• TypeScript
• Zustand — global state management
• Fetch API — mock data submission
• Expo Haptics — tactile feedback on scans

---

🚀 Getting Started

1. Install Dependencies

npm install

2. Start the App

npx expo start

Then choose your platform:

• Press i for iOS simulator
• Press a for Android emulator
• Press w for web browser
• Scan QR code with Expo Go app for physical device

---

🧩 System Flow

1. Instructor pairs Bluetooth scanner to the mobile device (as a keyboard).
2. Each barcode scan "types" into a hidden TextInput.
3. The app listens for Enter key → interprets it as a completed scan.
4. Zustand updates the in-memory list:
   • First scan → checkIn time.
   • Second scan → checkOut time.
5. Instructor presses "Send to Server" → all records are POSTed to the API.
6. Records are marked as "SENT" and displayed with a green indicator.

---

🧠 Data Model

interface ScanRecord {
  barcode: string;
  checkIn: string;
  checkOut?: string;
  sent?: boolean;
}

---

📱 App Screens

Scanner Tab

• Hidden TextInput: Captures barcode input from Bluetooth scanner
• Stats Display: Shows total check-ins, check-outs, and sent records
• Live Records List: Scrollable list of all attendance records
• Action Buttons:
  • "Send to Server" - Batch submit to API
  • "Clear All" - Reset all records

Students Tab

• List of 20 preset student barcodes for testing
• Format: Name + Barcode ID (e.g., "Alice Johnson - STU001")
• Useful reference during POC demos

---

🔧 Testing the Scanner

Option 1: Random Mode with Physical Scanner (EASIEST!)

1. Pair your Bluetooth scanner with your device
2. Open the Scanner tab in the app
3. Random Mode is ON by default - the green toggle shows "✓ Random Mode ON"
4. Scan ANY barcode you have (product barcode, book barcode, anything!)
5. Each scan automatically assigns a random student
6. Scan the same barcode again to check that student out
7. Watch the app track check-in/check-out automatically!

Perfect for: Physical scanner demos without needing special barcodes!

Pro Tip: Scan different items around your room - a book, a box, your phone case - each maps to a different student!

Option 2: Auto-Scan Demo Mode (For Digital Demos)

1. Open the Scanner tab
2. Click "▶ Demo Mode" to expand the demo controls
3. Click "Demo Check-ins (10)" to simulate 10 students checking in
4. Click "Demo Check-outs (5)" to simulate 5 students checking out
5. Watch the app animate scans automatically with haptic feedback!

Perfect for: Video recordings, presentations, and POC demonstrations

Option 3: Manual Typing (Development/Testing)

1. Open the Scanner tab
2. Click into the screen (this will focus the hidden input)
3. Type a barcode manually (e.g., "s001A2JKWX")
4. Press Enter on your keyboard
5. The app will process it as a scan!

Test Student Barcodes

s001A2JKWX (Alice)    s006F7TUZX (Fiona)
s002B3LMYX (Bob)      s007G8VWWX (George)
s003C4NOZX (Charlie)  s008H9XYYX (Hannah)
s004D5PQWX (Diana)    s009I1ABZX (Isaac)
s005E6RSYX (Ethan)    s010J2CDWX (Julia)
... and 10 more (see Students tab in app)

---

🎯 Key Implementation Details

State Management

• Uses Zustand for efficient, lightweight state management
• Store located at /store/attendance-store.ts
• Handles 1000+ records without performance issues

Scan Logic

1. On barcode entry → check if barcode exists in store
2. If new → create record with checkIn: new Date().toISOString()
3. If exists without checkOut → add checkOut: new Date().toISOString()
4. If exists with checkOut → ignore (or show warning)

API Integration

• Endpoint: https://jsonplaceholder.typicode.com/posts
• Method: POST
• Payload: All attendance records + timestamp
• On success: Records marked as "sent"

---

📂 Project Structure

barcode-scanner/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx       # Scanner screen
│   │   ├── explore.tsx     # Students list
│   │   └── _layout.tsx     # Tab navigation
│   └── _layout.tsx         # Root layout
├── store/
│   └── attendance-store.ts # Zustand state management
├── components/             # Reusable UI components
└── package.json

---

🧪 POC Goals

This proof of concept demonstrates:

• ✅ Bluetooth scanner integration without custom native code
• ✅ Real-time attendance tracking
• ✅ Efficient state management for high-volume scanning
• ✅ Clean, modern UI with haptic feedback
• ✅ Batch API submission of attendance data
• ✅ Easy testing with preset student barcodes

---

🚧 Future Enhancements

• Persistent storage (AsyncStorage or SQLite)
• Export to CSV/Excel
• Student photos and additional metadata
• Offline mode with sync queue
• Multi-class support with class sessions
• Student search and filtering
• Analytics and reporting

---

📝 License

This is a proof of concept application for educational purposes.