How vdong4419-lab/badminton-booking-system works
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: App.jsx Role-based routes · app.js HTTP API router · khach-vang-lai.js Public API routes · main.jsx React entry
Components 20
Client application
- React entry
client/src/main.jsx - Role-based routes
client/src/App.jsx - Navigation layout
client/src/components/GiaoDienKhung.jsx - API request helper
client/src/api/gui-yeu-cau-api.js
Customer journey
- Public browse and access
client/src/pages/khach-vang-lai - Court booking
client/src/pages/khach-hang/DatLichSan.jsx - Customer account and history
client/src/pages/khach-hang - Browser local storage
Staff operations
- Reception operations
client/src/pages/le-tan - Administration and reports
client/src/pages/admin
Backend services
- HTTP API router
backend/app.js - Public API routes
backend/routes/khach-vang-lai.js - Customer API routes
backend/routes/khach-hang.js - Reception API routes
backend/routes/le-tan.js - Admin API routes
backend/routes/quan-tri-admin.js - Token authentication
backend/middleware/xac-thuc-dang-nhap.js - Role authorization
backend/middleware/phan-quyen.js - MySQL connection pool
backend/config/ket-noi-csdl.js
Other components
- Visitor or user
- MySQL database
Connections 18
- 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