How abdulqadir-b/smart-queue-system works
SQM lets customers find a service queue, join it and track a token; staff advance and complete service, while administrators manage queues and review analytics. The React app calls the Express API for these workflows, with MongoDB-backed records and Socket.io updates for connected clients. The graph preserves authentication, queue-state controls, and customer alerts as separate capabilities. Controller excerpts are partial, so uncertain controller-to-model wiring and unsampled frontend service calls are not expanded; documented but unsampled analytics and management routes are shown at their exact tree paths.
Main entry points: backend/index.js Express server · App.js React app · models/index.js Queue and token models · ApiService.js API client
Components 24
Web client
- React app
frontend/src/App.js - Customer workflow
frontend/src/pages/CustomerView.jsx - Staff workflow
frontend/src/pages/StaffView.jsx - Admin workspace
frontend/src/pages/AdminView.jsx - API client
frontend/src/services/ApiService.js - Socket context
frontend/src/context/SocketContext.js - Turn alerts
frontend/src/components/customer/AutoNotificationManager.jsx
API runtime
- Express server
backend/index.js - Auth routes
backend/routes/authRoutes.js - Queue routes
backend/routes/queueManagementRoutes.js - Token routes
backend/routes/tokenRoutes.js - Queue state routes
backend/routes/queueStateRoutes.js - Analytics routes
backend/routes/analyticsRoutes.js
Queue domain
- Authentication
backend/controllers/authController.js - Queue operations
backend/controllers/queueManagementController.js - Token operations
backend/controllers/tokenController.js - Pause and reset
backend/controllers/queueStateController.js - Queue analytics
backend/controllers/analyticsController.js
Realtime updates
- Socket service
backend/services/socketService.js
Persistent state
- Queue and token models
backend/models/index.js - MongoDB
Other components
- Customer
- Staff
- Administrator
Connections 32
- Customer → React app: uses
- Staff → React app: uses
- Administrator → React app: uses
- React app → Customer workflow: routes
- React app → Staff workflow: routes
- React app → Admin workspace: routes
- Customer workflow → API client: requests
- Staff workflow → API client: requests
- Admin workspace → API client: requests
- API client → Express server: HTTP requests
- Express server → Auth routes: mounts API
- Express server → Queue routes: mounts API
- Express server → Token routes: mounts API
- Express server → Queue state routes: mounts API
- Express server → Analytics routes: mounts API
- Auth routes → Authentication: dispatches
- Queue routes → Queue operations: dispatches
- Token routes → Token operations: dispatches
- Queue state routes → Pause and reset: dispatches
- Analytics routes → Queue analytics: dispatches
- Authentication → Queue and token models: reads and writes
- Queue operations → Queue and token models: reads and writes
- Token operations → Queue and token models: reads and writes
- Pause and reset → Queue and token models: reads and writes
- Queue analytics → Queue and token models: queries
- Queue and token models → MongoDB: persists records
- Token operations → Socket service: emits updates
- Pause and reset → Socket service: emits updates
- Socket context → Express server: connects realtime
- Express server → Socket service: initializes
- Turn alerts → Socket context: subscribes
- Socket service → Socket context: broadcasts events