DigiToken

DigiToken is a queue management web app for service centers. Customers can book or scan for a queue token, while staff manage the live queue from the admin dashboard.

Features

• Customer dashboard with active token and estimated wait time
• Online service and time-slot booking flow
• Walk-in QR scanning with camera support
• Admin queue controls for serving, completing, and marking no-shows
• Live queue updates through Server-Sent Events
• Browser notification events for queue changes
• Notification history page
• Admin analytics with token volume, service mix, and wait-time charts
• Responsive rounded navigation on customer and admin views
• Light and dark themes

Project Structure

DigiToken/
├── admin.html
├── dashboard.html
├── display.html
├── walkin.html
├── service.html
├── notifications.html
├── profile.html
├── help.html
├── auth.html
├── assets/
│   ├── css/
│   │   ├── style.css
│   │   ├── admin.css
│   │   └── dashboard.css
│   ├── js/
│   │   ├── main.js
│   │   └── admin/
│   │       ├── app.js
│   │       ├── navigation.js
│   │       ├── notifications.js
│   │       ├── queue.js
│   │       └── state.js
│   └── img/
├── data/store.json
├── server.js
└── package.json

Run Locally

Requirements: Node.js 18 or newer.

npm start

Open http://localhost:3000 in a browser.

Useful pages:

• Customer dashboard
• Admin dashboard
• Walk-in QR scanner
• Public display

Camera QR scanning requires localhost or HTTPS and browser camera permission. Browsers without QR detection support can use the demo QR fallback.

Backend API

• GET /api/health - check service health
• GET /api/queue - read the current queue
• POST /api/tokens - create a token
• PATCH /api/tokens/:id/status - update token status
• GET /api/notifications - read notification history
• POST /api/notifications - create a notification event
• GET /api/events - subscribe to live queue and notification events

Queue and notification data is stored in data/store.json for this prototype. Email, WhatsApp, SMS, and push delivery require an external provider and credentials.

For more backend details, see BACKEND.md. Recent work is summarized in update.md.