# vdong4419-lab/badminton-booking-system architecture

> Architecture diagram of the GitHub repository vdong4419-lab/badminton-booking-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vdong4419-lab/badminton-booking-system
- Repository: https://github.com/vdong4419-lab/badminton-booking-system

## Overview

This is a badminton-court booking and facility-management system with a React client and an Express/MySQL backend. The main user journey is public court and availability discovery, followed by account access, booking and deposit payment; customers can also review bookings and courts. Reception staff handle bookings, court status, check-ins and customer operations, while administrators manage facilities, pricing, promotions, staff, customers and reporting. The excerpts show some frontend booking state stored locally, so client-to-API wiring beyond the sampled code is left unspecified.

Main entry points: [`client/src/App.jsx`](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/App.jsx) (Role-based routes), [`backend/app.js`](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/app.js) (HTTP API router), [`backend/routes/khach-vang-lai.js`](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/khach-vang-lai.js) (Public API routes), [`client/src/main.jsx`](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client application"]
  node_client_entry["React entry<br/>[main.jsx]"]
  node_routes_ui["Role-based routes<br/>[App.jsx]"]
  node_layout["Navigation layout<br/>[GiaoDienKhung.jsx]"]
  node_api_client["API request helper<br/>[gui-yeu-cau-api.js]"]
end

subgraph group_customer["Customer journey"]
  node_public_pages["Public browse and access"]
  node_booking["Court booking<br/>[DatLichSan.jsx]"]
  node_customer_pages["Customer account and history"]
  node_browser_storage[("Browser local storage")]
end

subgraph group_operations["Staff operations"]
  node_reception_pages["Reception operations"]
  node_admin_pages["Administration and reports"]
end

subgraph group_server["Backend services"]
  node_api_app["HTTP API router<br/>[app.js]"]
  node_guest_routes["Public API routes<br/>[khach-vang-lai.js]"]
  node_customer_routes["Customer API routes<br/>[khach-hang.js]"]
  node_reception_routes["Reception API routes<br/>[le-tan.js]"]
  node_admin_routes["Admin API routes<br/>[quan-tri-admin.js]"]
  node_authentication["Token authentication"]
  node_authorization["Role authorization<br/>[phan-quyen.js]"]
  node_db_pool["MySQL connection pool<br/>[ket-noi-csdl.js]"]
end

node_visitor(("Visitor or user"))
node_mysql[("MySQL database")]

node_visitor -->|"opens"| node_client_entry
node_client_entry -->|"renders"| node_routes_ui
node_routes_ui -->|"mounts routes"| node_layout
node_routes_ui -->|"routes to"| node_public_pages
node_routes_ui -->|"routes to"| node_booking
node_routes_ui -->|"routes to"| node_customer_pages
node_routes_ui -->|"routes to"| node_reception_pages
node_routes_ui -->|"routes to"| node_admin_pages
node_booking -->|"reads and writes"| node_browser_storage
node_api_app -->|"dispatches"| node_guest_routes
node_api_app -->|"dispatches"| node_customer_routes
node_api_app -->|"dispatches"| node_reception_routes
node_api_app -->|"dispatches"| node_admin_routes
node_api_app -->|"authenticates protected routes"| node_authentication
node_api_app -->|"checks route roles"| node_authorization
node_guest_routes -->|"protects booking endpoint"| node_authentication
node_guest_routes -->|"queries"| node_db_pool
node_db_pool -->|"connects"| node_mysql

click node_client_entry "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/main.jsx"
click node_routes_ui "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/App.jsx"
click node_layout "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/components/GiaoDienKhung.jsx"
click node_api_client "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/api/gui-yeu-cau-api.js"
click node_public_pages "https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/khach-vang-lai"
click node_booking "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/pages/khach-hang/DatLichSan.jsx"
click node_customer_pages "https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/khach-hang"
click node_reception_pages "https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/le-tan"
click node_admin_pages "https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/admin"
click node_api_app "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/app.js"
click node_guest_routes "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/khach-vang-lai.js"
click node_customer_routes "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/khach-hang.js"
click node_reception_routes "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/le-tan.js"
click node_admin_routes "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/quan-tri-admin.js"
click node_authentication "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/middleware/xac-thuc-dang-nhap.js"
click node_authorization "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/middleware/phan-quyen.js"
click node_db_pool "https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/config/ket-noi-csdl.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_client_entry,node_routes_ui,node_layout,node_api_client,node_visitor toneBlue
class node_public_pages,node_booking,node_customer_pages,node_browser_storage,node_mysql toneAmber
class node_reception_pages,node_admin_pages toneMint
class node_api_app,node_guest_routes,node_customer_routes,node_reception_routes,node_admin_routes,node_authentication,node_authorization,node_db_pool toneRose
```

## Components

### Client application

- [React entry](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/main.jsx): `client/src/main.jsx`
- [Role-based routes](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Navigation layout](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/components/GiaoDienKhung.jsx): `client/src/components/GiaoDienKhung.jsx`
- [API request helper](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/api/gui-yeu-cau-api.js): `client/src/api/gui-yeu-cau-api.js`

### Customer journey

- [Public browse and access](https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/khach-vang-lai): `client/src/pages/khach-vang-lai`
- [Court booking](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/client/src/pages/khach-hang/DatLichSan.jsx): `client/src/pages/khach-hang/DatLichSan.jsx`
- [Customer account and history](https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/khach-hang): `client/src/pages/khach-hang`
- **Browser local storage**

### Staff operations

- [Reception operations](https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/le-tan): `client/src/pages/le-tan`
- [Administration and reports](https://github.com/vdong4419-lab/badminton-booking-system/tree/main/client/src/pages/admin): `client/src/pages/admin`

### Backend services

- [HTTP API router](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/app.js): `backend/app.js`
- [Public API routes](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/khach-vang-lai.js): `backend/routes/khach-vang-lai.js`
- [Customer API routes](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/khach-hang.js): `backend/routes/khach-hang.js`
- [Reception API routes](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/le-tan.js): `backend/routes/le-tan.js`
- [Admin API routes](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/routes/quan-tri-admin.js): `backend/routes/quan-tri-admin.js`
- [Token authentication](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/middleware/xac-thuc-dang-nhap.js): `backend/middleware/xac-thuc-dang-nhap.js`
- [Role authorization](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/middleware/phan-quyen.js): `backend/middleware/phan-quyen.js`
- [MySQL connection pool](https://github.com/vdong4419-lab/badminton-booking-system/blob/main/backend/config/ket-noi-csdl.js): `backend/config/ket-noi-csdl.js`

### Other components

- **Visitor or user**
- **MySQL database**

## Connections

- Visitor or user → React entry: opens
- React entry → Role-based routes: renders
- Role-based routes → Navigation layout: mounts routes
- Role-based routes → Public browse and access: routes to
- Role-based routes → Court booking: routes to
- Role-based routes → Customer account and history: routes to
- Role-based routes → Reception operations: routes to
- Role-based routes → Administration and reports: routes to
- Court booking → Browser local storage: reads and writes
- HTTP API router → Public API routes: dispatches
- HTTP API router → Customer API routes: dispatches
- HTTP API router → Reception API routes: dispatches
- HTTP API router → Admin API routes: dispatches
- HTTP API router → Token authentication: authenticates protected routes
- HTTP API router → Role authorization: checks route roles
- Public API routes → Token authentication: protects booking endpoint
- Public API routes → MySQL connection pool: queries
- MySQL connection pool → MySQL database: connects