How haidepzai269/booking-show-frontend works
This is a customer-facing cinema discovery and ticket-booking frontend, with account management and an administrative workspace. The principal journey is browsing movies or cinemas, choosing a showtime, selecting seats, completing checkout, then viewing tickets or orders. Catalog and authentication API calls are visible in sampled source; booking, payment, and most admin implementation details are not, so their internal service wiring is left unspecified.
Main entry points: admin/page.tsx Admin workspace · MovieDetailClient.tsx Movie details and showtimes · [showtime_id]/page.tsx Checkout · [showtime_id]/page.tsx Seat selection
Components 29
Film discovery
- Home and highlights
src/app/HomeClient.tsx - Movie catalog
src/app/movies/MoviesClientPage.tsx - Movie details and showtimes
src/app/movies/[id]/MovieDetailClient.tsx - Cinema directory
src/app/cinemas/page.tsx - Cinema and showtimes
src/app/cinemas/[id]/CinemaDetailClient.tsx - Promotions
src/app/promotions/PromotionsClientPage.tsx - Person profiles
src/app/persons/[id]/PersonDetailClient.tsx
Ticket booking
- Seat selection
src/app/booking/seat-selection/[showtime_id]/page.tsx - Checkout
src/app/booking/checkout/[showtime_id]/page.tsx - Checkout steps
src/components/checkout/ConcessionStep.tsx - Payment step
src/components/checkout/PaymentStep.tsx - Payment result
src/app/payment/result/page.tsx - Ticket views
src/app/tickets/my/page.tsx - Order history
src/app/orders/my/page.tsx
Identity and account
- Sign-in and registration
src/app/login/page.tsx - Authentication state
src/store/authStore.ts - Profile and settings
src/app/profile/page.tsx
Cinema administration
- Admin workspace
src/app/admin/page.tsx - Catalog and schedule management
src/app/admin/movies/page.tsx - Order and refund management
src/app/admin/orders/page.tsx - Campaign management
src/app/admin/campaigns/page.tsx - User management
src/app/admin/users/page.tsx
Shared frontend
- Shared navigation
src/components/layout/Header.tsx - Movie search
src/components/layout/SearchBar.tsx - Admin search
src/components/admin/AdminSearchBar.tsx - Admin notifications
src/hooks/useAdminNotifications.ts
Other components
- Customer
- Admin user
- Backend API
Connections 29
- Customer → Home and highlights: opens
- Customer → Movie catalog: browses
- Customer → Cinema directory: browses
- Customer → Promotions: views
- Home and highlights → Backend API: fetches highlights
- Movie catalog → Movie details and showtimes: opens film
- Cinema directory → Cinema and showtimes: opens venue
- Movie details and showtimes → Backend API: loads details
- Movie details and showtimes → Seat selection: chooses showtime
- Cinema and showtimes → Seat selection: chooses showtime
- Seat selection → Checkout: continues booking
- Checkout → Checkout steps: presents steps
- Checkout → Payment step: presents payment
- Payment step → Payment result: continues to result
- Customer → Ticket views: views tickets
- Customer → Order history: views orders
- Customer → Sign-in and registration: authenticates
- Sign-in and registration → Authentication state: uses state
- Authentication state → Backend API: authenticates
- Customer → Profile and settings: manages account
- Movie search → Backend API: searches movies
- Shared navigation → Movie search: offers search
- Admin user → Admin workspace: opens workspace
- Admin workspace → Catalog and schedule management: manages catalog
- Admin workspace → Order and refund management: manages orders
- Admin workspace → Campaign management: manages campaigns
- Admin workspace → User management: manages users
- Admin search → Backend API: searches records
- Admin notifications → Backend API: fetches and updates