# mamatanlg/queuemate architecture

> Architecture diagram of the GitHub repository mamatanlg/queuemate, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mamatanlg/queuemate
- Repository: https://github.com/mamatanlg/queuemate

## Overview

QueueMate’s README distinguishes an unfinished target architecture from the existing legacy application. The target backend currently exposes health checks and Socket.IO scaffolding; the legacy React app provides kiosk ticketing, queue administration, public displays, tracking, analytics, and announcements. Source excerpts do not establish how the legacy UI connects to its server, so that relationship is not drawn. The target PostgreSQL schema and planned client apps are not present in the tree.

Main entry points: [`src/App.jsx`](https://github.com/mamatanlg/queuemate/blob/main/src/App.jsx) (Route shell), [`src/context/SocketContext.jsx`](https://github.com/mamatanlg/queuemate/blob/main/src/context/SocketContext.jsx) (Socket state), [`src/pages/Display/Display.jsx`](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Display/Display.jsx) (Public display), [`src/components/VoiceAnnouncer.jsx`](https://github.com/mamatanlg/queuemate/blob/main/src/components/VoiceAnnouncer.jsx) (Voice announcements)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_legacy_ui["Legacy React UI"]
  node_app["Route shell<br/>[App.jsx]"]
  node_landing["Queue entry<br/>[Landing.jsx]"]
  node_kiosk["Ticket kiosk<br/>[Kiosk.jsx]"]
  node_admin["Queue admin<br/>[Admin.jsx]"]
  node_dashboard["Analytics<br/>[Dashboard.jsx]"]
  node_display["Public display<br/>[Display.jsx]"]
  node_tracking["Ticket tracking<br/>[Track.jsx]"]
  node_ticket_view["Ticket view<br/>[TicketView.jsx]"]
  node_number_display["Number display<br/>[NumberDisplay.jsx]"]
  node_announcer["Voice announcements<br/>[VoiceAnnouncer.jsx]"]
end

subgraph group_legacy_runtime["Legacy Queue Runtime"]
  node_server_entry["Queue server<br/>[index.js]"]
  node_store[("Queue state<br/>[store.js]")]
end

subgraph group_backend["Backend Scaffold"]
  node_backend_server["Backend startup<br/>[server.js]"]
  node_backend_app["Express app<br/>[app.js]"]
  node_api_routes["API routes<br/>[index.js]"]
  node_health_routes["Health routes<br/>[health-routes.js]"]
  node_health_controller["Health checks"]
  node_db_pool[("Database pool<br/>[pool.js]")]
  node_socket_server["Socket server"]
  node_socket_handlers["Socket handlers"]
end

subgraph group_shared["Shared UI Services"]
  node_socket_context["Socket state<br/>[SocketContext.jsx]"]
  node_voice["Speech playback<br/>[useVoice.js]"]
  node_sounds["Sound themes<br/>[sounds.js]"]
  node_translations["Translations<br/>[i18n.js]"]
  node_formatters["Ticket formatting<br/>[formatters.js]"]
end

node_user(("Queue users"))

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_kiosk
node_app -->|"routes to"| node_admin
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_display
node_app -->|"routes to"| node_tracking
node_app -->|"provides"| node_socket_context
node_kiosk -->|"renders"| node_ticket_view
node_display -->|"renders"| node_number_display
node_display -->|"renders"| node_announcer
node_announcer -->|"uses"| node_voice
node_announcer -->|"uses"| node_sounds
node_announcer -->|"uses"| node_translations
node_kiosk -->|"uses"| node_socket_context
node_admin -->|"uses"| node_socket_context
node_dashboard -->|"uses"| node_socket_context
node_display -->|"uses"| node_socket_context
node_tracking -->|"uses"| node_socket_context
node_landing -->|"uses"| node_socket_context
node_admin -->|"formats tickets"| node_formatters
node_display -->|"formats tickets"| node_formatters
node_server_entry -->|"uses"| node_store
node_backend_server -->|"creates"| node_backend_app
node_backend_server -->|"uses"| node_db_pool
node_backend_server -->|"creates"| node_socket_server
node_backend_app -->|"mounts"| node_api_routes
node_api_routes -->|"mounts"| node_health_routes
node_health_routes -->|"routes to"| node_health_controller
node_health_controller -->|"checks"| node_db_pool
node_socket_server -->|"registers"| node_socket_handlers

click node_app "https://github.com/mamatanlg/queuemate/blob/main/src/App.jsx"
click node_landing "https://github.com/mamatanlg/queuemate/blob/main/src/pages/Landing/Landing.jsx"
click node_kiosk "https://github.com/mamatanlg/queuemate/blob/main/src/pages/Kiosk/Kiosk.jsx"
click node_admin "https://github.com/mamatanlg/queuemate/blob/main/src/pages/Admin/Admin.jsx"
click node_dashboard "https://github.com/mamatanlg/queuemate/blob/main/src/pages/Dashboard/Dashboard.jsx"
click node_display "https://github.com/mamatanlg/queuemate/blob/main/src/pages/Display/Display.jsx"
click node_tracking "https://github.com/mamatanlg/queuemate/blob/main/src/pages/Track/Track.jsx"
click node_ticket_view "https://github.com/mamatanlg/queuemate/blob/main/src/components/TicketView.jsx"
click node_number_display "https://github.com/mamatanlg/queuemate/blob/main/src/components/NumberDisplay.jsx"
click node_announcer "https://github.com/mamatanlg/queuemate/blob/main/src/components/VoiceAnnouncer.jsx"
click node_server_entry "https://github.com/mamatanlg/queuemate/blob/main/server/index.js"
click node_store "https://github.com/mamatanlg/queuemate/blob/main/server/store.js"
click node_socket_context "https://github.com/mamatanlg/queuemate/blob/main/src/context/SocketContext.jsx"
click node_voice "https://github.com/mamatanlg/queuemate/blob/main/src/hooks/useVoice.js"
click node_sounds "https://github.com/mamatanlg/queuemate/blob/main/src/utils/sounds.js"
click node_translations "https://github.com/mamatanlg/queuemate/blob/main/src/utils/i18n.js"
click node_formatters "https://github.com/mamatanlg/queuemate/blob/main/src/utils/formatters.js"
click node_backend_server "https://github.com/mamatanlg/queuemate/blob/main/backend/src/server.js"
click node_backend_app "https://github.com/mamatanlg/queuemate/blob/main/backend/src/app.js"
click node_api_routes "https://github.com/mamatanlg/queuemate/blob/main/backend/src/routes/index.js"
click node_health_routes "https://github.com/mamatanlg/queuemate/blob/main/backend/src/routes/health-routes.js"
click node_health_controller "https://github.com/mamatanlg/queuemate/blob/main/backend/src/controllers/health-controller.js"
click node_db_pool "https://github.com/mamatanlg/queuemate/blob/main/backend/src/db/pool.js"
click node_socket_server "https://github.com/mamatanlg/queuemate/blob/main/backend/src/sockets/create-socket-server.js"
click node_socket_handlers "https://github.com/mamatanlg/queuemate/blob/main/backend/src/sockets/register-handlers.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_landing,node_kiosk,node_admin,node_dashboard,node_display,node_tracking,node_ticket_view,node_number_display,node_announcer toneBlue
class node_server_entry,node_store toneAmber
class node_backend_server,node_backend_app,node_api_routes,node_health_routes,node_health_controller,node_db_pool,node_socket_server,node_socket_handlers toneMint
class node_socket_context,node_voice,node_sounds,node_translations,node_formatters,node_user toneRose
```

## Components

### Legacy React UI

- [Route shell](https://github.com/mamatanlg/queuemate/blob/main/src/App.jsx): `src/App.jsx`
- [Queue entry](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Landing/Landing.jsx): `src/pages/Landing/Landing.jsx`
- [Ticket kiosk](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Kiosk/Kiosk.jsx): `src/pages/Kiosk/Kiosk.jsx`
- [Queue admin](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Admin/Admin.jsx): `src/pages/Admin/Admin.jsx`
- [Analytics](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Dashboard/Dashboard.jsx): `src/pages/Dashboard/Dashboard.jsx`
- [Public display](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Display/Display.jsx): `src/pages/Display/Display.jsx`
- [Ticket tracking](https://github.com/mamatanlg/queuemate/blob/main/src/pages/Track/Track.jsx): `src/pages/Track/Track.jsx`
- [Ticket view](https://github.com/mamatanlg/queuemate/blob/main/src/components/TicketView.jsx): `src/components/TicketView.jsx`
- [Number display](https://github.com/mamatanlg/queuemate/blob/main/src/components/NumberDisplay.jsx): `src/components/NumberDisplay.jsx`
- [Voice announcements](https://github.com/mamatanlg/queuemate/blob/main/src/components/VoiceAnnouncer.jsx): `src/components/VoiceAnnouncer.jsx`

### Legacy Queue Runtime

- [Queue server](https://github.com/mamatanlg/queuemate/blob/main/server/index.js): `server/index.js`
- [Queue state](https://github.com/mamatanlg/queuemate/blob/main/server/store.js): `server/store.js`

### Backend Scaffold

- [Backend startup](https://github.com/mamatanlg/queuemate/blob/main/backend/src/server.js): `backend/src/server.js`
- [Express app](https://github.com/mamatanlg/queuemate/blob/main/backend/src/app.js): `backend/src/app.js`
- [API routes](https://github.com/mamatanlg/queuemate/blob/main/backend/src/routes/index.js): `backend/src/routes/index.js`
- [Health routes](https://github.com/mamatanlg/queuemate/blob/main/backend/src/routes/health-routes.js): `backend/src/routes/health-routes.js`
- [Health checks](https://github.com/mamatanlg/queuemate/blob/main/backend/src/controllers/health-controller.js): `backend/src/controllers/health-controller.js`
- [Database pool](https://github.com/mamatanlg/queuemate/blob/main/backend/src/db/pool.js): `backend/src/db/pool.js`
- [Socket server](https://github.com/mamatanlg/queuemate/blob/main/backend/src/sockets/create-socket-server.js): `backend/src/sockets/create-socket-server.js`
- [Socket handlers](https://github.com/mamatanlg/queuemate/blob/main/backend/src/sockets/register-handlers.js): `backend/src/sockets/register-handlers.js`

### Shared UI Services

- [Socket state](https://github.com/mamatanlg/queuemate/blob/main/src/context/SocketContext.jsx): `src/context/SocketContext.jsx`
- [Speech playback](https://github.com/mamatanlg/queuemate/blob/main/src/hooks/useVoice.js): `src/hooks/useVoice.js`
- [Sound themes](https://github.com/mamatanlg/queuemate/blob/main/src/utils/sounds.js): `src/utils/sounds.js`
- [Translations](https://github.com/mamatanlg/queuemate/blob/main/src/utils/i18n.js): `src/utils/i18n.js`
- [Ticket formatting](https://github.com/mamatanlg/queuemate/blob/main/src/utils/formatters.js): `src/utils/formatters.js`

### Other components

- **Queue users**

## Connections

- Queue users → Route shell: opens (evidence: `src/App.jsx`)
- Route shell → Queue entry: routes to (evidence: `src/App.jsx`)
- Route shell → Ticket kiosk: routes to (evidence: `src/App.jsx`)
- Route shell → Queue admin: routes to (evidence: `src/App.jsx`)
- Route shell → Analytics: routes to (evidence: `src/App.jsx`)
- Route shell → Public display: routes to (evidence: `src/App.jsx`)
- Route shell → Ticket tracking: routes to (evidence: `src/App.jsx`)
- Route shell → Socket state: provides (evidence: `src/App.jsx`)
- Ticket kiosk → Ticket view: renders (evidence: `src/pages/Kiosk/Kiosk.jsx`)
- Public display → Number display: renders (evidence: `src/pages/Display/Display.jsx`)
- Public display → Voice announcements: renders (evidence: `src/pages/Display/Display.jsx`)
- Voice announcements → Speech playback: uses (evidence: `src/components/VoiceAnnouncer.jsx`)
- Voice announcements → Sound themes: uses (evidence: `src/components/VoiceAnnouncer.jsx`)
- Voice announcements → Translations: uses (evidence: `src/components/VoiceAnnouncer.jsx`)
- Ticket kiosk → Socket state: uses (evidence: `src/pages/Kiosk/Kiosk.jsx`)
- Queue admin → Socket state: uses (evidence: `src/pages/Admin/Admin.jsx`)
- Analytics → Socket state: uses (evidence: `src/pages/Dashboard/Dashboard.jsx`)
- Public display → Socket state: uses (evidence: `src/pages/Display/Display.jsx`)
- Ticket tracking → Socket state: uses (evidence: `src/pages/Track/Track.jsx`)
- Queue entry → Socket state: uses (evidence: `src/pages/Landing/Landing.jsx`)
- Queue admin → Ticket formatting: formats tickets (evidence: `src/pages/Admin/Admin.jsx`)
- Public display → Ticket formatting: formats tickets (evidence: `src/pages/Display/Display.jsx`)
- Queue server → Queue state: uses (evidence: `server/index.js`)
- Backend startup → Express app: creates (evidence: `backend/src/server.js`)
- Backend startup → Database pool: uses (evidence: `backend/src/server.js`)
- Backend startup → Socket server: creates (evidence: `backend/src/server.js`)
- Express app → API routes: mounts (evidence: `backend/src/app.js`)
- API routes → Health routes: mounts (evidence: `backend/src/routes/index.js`)
- Health routes → Health checks: routes to (evidence: `backend/src/routes/health-routes.js`)
- Health checks → Database pool: checks (evidence: `backend/src/controllers/health-controller.js`)
- Socket server → Socket handlers: registers (evidence: `backend/src/sockets/create-socket-server.js`)