# qkrgusrb0123a-ui/week10_workout architecture

> Architecture diagram of the GitHub repository qkrgusrb0123a-ui/week10_workout, 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/qkrgusrb0123a-ui/week10_workout
- Repository: https://github.com/qkrgusrb0123a-ui/week10_workout

## Overview

Concert Ticketing is a mock ticket-reservation web app. Visitors browse performances and seat availability, enter the queue when booking access is limited, select a seat, complete a security challenge, and then retrieve or cancel a reservation. The Express API serves the frontend and routes concert, queue, and reservation requests; SQLite stores the catalog, seats, and reservation history. Queue admission and booking challenges are in-memory services. The excerpts show the main server wiring and booking flows; some frontend and reservation-page interactions are documented in the README but their source was not excerpted.

Main entry points: [`public/js/api.js`](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/api.js) (Fetch API client), [`server/routes/reservations.js`](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/reservations.js) (Reservation routes), [`server/app.js`](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/app.js) (Express app), [`server/routes/queue.js`](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/queue.js) (Queue routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web frontend"]
  node_catalog_ui["Concert listing<br/>[index.js]"]
  node_concert_ui["Seat booking<br/>[concert.js]"]
  node_queue_ui["Queue status<br/>[waiting.js]"]
  node_reservation_ui["Reservation lookup<br/>[reservation.js]"]
  node_api_client["Fetch API client<br/>[api.js]"]
end

subgraph group_server["API server"]
  node_express["Express app<br/>[app.js]"]
  node_concert_routes["Concert routes<br/>[concerts.js]"]
  node_queue_routes["Queue routes<br/>[queue.js]"]
  node_reservation_routes["Reservation routes<br/>[reservations.js]"]
end

subgraph group_booking["Booking services"]
  node_queue_service["Admission queue<br/>[queue.js]"]
  node_challenge_service["Security challenge<br/>[booking.js]"]
end

subgraph group_storage["Persistent data"]
  node_sqlite[("SQLite database<br/>[db.js]")]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_catalog_ui
node_visitor -->|"selects seats"| node_concert_ui
node_visitor -->|"waits in"| node_queue_ui
node_visitor -->|"checks booking"| node_reservation_ui
node_catalog_ui -->|"requests concerts"| node_api_client
node_concert_ui -->|"requests booking"| node_api_client
node_queue_ui -->|"polls queue"| node_api_client
node_reservation_ui -->|"uses booking API"| node_api_client
node_express -->|"mounts routes"| node_concert_routes
node_express -->|"mounts routes"| node_queue_routes
node_express -->|"mounts routes"| node_reservation_routes
node_express -->|"checks health"| node_sqlite
node_api_client -->|"calls API"| node_concert_routes
node_api_client -->|"calls API"| node_queue_routes
node_api_client -->|"calls API"| node_reservation_routes
node_concert_routes -->|"reads catalog"| node_sqlite
node_queue_routes -->|"checks concert"| node_sqlite
node_queue_routes -->|"manages tickets"| node_queue_service
node_reservation_routes -->|"books and cancels"| node_sqlite
node_reservation_routes -->|"validates admission"| node_queue_service
node_reservation_routes -->|"creates and verifies"| node_challenge_service

click node_catalog_ui "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/index.js"
click node_concert_ui "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/concert.js"
click node_queue_ui "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/waiting.js"
click node_reservation_ui "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/reservation.js"
click node_api_client "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/api.js"
click node_express "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/app.js"
click node_concert_routes "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/concerts.js"
click node_queue_routes "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/queue.js"
click node_reservation_routes "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/reservations.js"
click node_queue_service "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/services/queue.js"
click node_challenge_service "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/services/booking.js"
click node_sqlite "https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/db.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_catalog_ui,node_concert_ui,node_queue_ui,node_reservation_ui,node_api_client toneBlue
class node_express,node_concert_routes,node_queue_routes,node_reservation_routes toneAmber
class node_queue_service,node_challenge_service toneMint
class node_sqlite toneRose
class node_visitor toneIndigo
```

## Components

### Web frontend

- [Concert listing](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/index.js): `public/js/index.js`
- [Seat booking](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/concert.js): `public/js/concert.js`
- [Queue status](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/waiting.js): `public/js/waiting.js`
- [Reservation lookup](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/reservation.js): `public/js/reservation.js`
- [Fetch API client](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/public/js/api.js): `public/js/api.js`

### API server

- [Express app](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/app.js): `server/app.js`
- [Concert routes](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/concerts.js): `server/routes/concerts.js`
- [Queue routes](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/queue.js): `server/routes/queue.js`
- [Reservation routes](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/routes/reservations.js): `server/routes/reservations.js`

### Booking services

- [Admission queue](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/services/queue.js): `server/services/queue.js`
- [Security challenge](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/services/booking.js): `server/services/booking.js`

### Persistent data

- [SQLite database](https://github.com/qkrgusrb0123a-ui/week10_workout/blob/main/server/db.js): `server/db.js`

### Other components

- **Visitor**

## Connections

- Visitor → Concert listing: browses (evidence: `README.md`)
- Visitor → Seat booking: selects seats (evidence: `README.md`)
- Visitor → Queue status: waits in (evidence: `README.md`)
- Visitor → Reservation lookup: checks booking (evidence: `README.md`)
- Concert listing → Fetch API client: requests concerts (evidence: `public/js/index.js`)
- Seat booking → Fetch API client: requests booking (evidence: `public/js/concert.js`)
- Queue status → Fetch API client: polls queue (evidence: `public/js/waiting.js`)
- Reservation lookup → Fetch API client: uses booking API (evidence: `README.md`)
- Express app → Concert routes: mounts routes (evidence: `server/app.js`)
- Express app → Queue routes: mounts routes (evidence: `server/app.js`)
- Express app → Reservation routes: mounts routes (evidence: `server/app.js`)
- Express app → SQLite database: checks health (evidence: `server/app.js`)
- Fetch API client → Concert routes: calls API (evidence: `public/js/api.js`)
- Fetch API client → Queue routes: calls API (evidence: `public/js/api.js`)
- Fetch API client → Reservation routes: calls API (evidence: `public/js/api.js`)
- Concert routes → SQLite database: reads catalog (evidence: `server/routes/concerts.js`)
- Queue routes → SQLite database: checks concert (evidence: `server/routes/queue.js`)
- Queue routes → Admission queue: manages tickets (evidence: `server/routes/queue.js`)
- Reservation routes → SQLite database: books and cancels (evidence: `server/routes/reservations.js`)
- Reservation routes → Admission queue: validates admission (evidence: `server/routes/reservations.js`)
- Reservation routes → Security challenge: creates and verifies (evidence: `server/routes/reservations.js`)