Cinema Booking System

This project is a full cinema booking application split into:

• a React + TypeScript frontend
• a Spring Boot backend API

The frontend in this repository handles the user interface, navigation, admin tools, and API integration. The backend is a separate Spring Boot project that exposes authentication, movies, shows, halls, seats, comments, bookings, and user-management endpoints.

What This Project Does

The system supports two main roles:

• regular users
• administrators

User features

• register and log in
• browse movies
• view movie details and comments
• view available showtimes
• select seats for a show
• pay for a booking
• view account information
• view personal bookings

Admin features

• access the dashboard
• add movies
• add halls
• add showtimes
• manage halls
• mark hall seats as VIP
• manage shows
• manage users
• promote users to admin

High-Level Architecture

The application is split by responsibility:

1. Frontend React renders the UI, calls the backend API, caches server state with React Query, stores session data locally, and manages small client-side state with Zustand.

2. Backend Spring Boot handles authentication, business rules, persistence, role-based behavior, and database access.

3. Database The backend stores persistent data such as users, movies, genres, halls, seats, shows, comments, bookings, and payments.

Frontend Structure

The frontend is built with:

• React
• TypeScript
• Vite
• React Router
• React Query
• Axios
• Zustand
• Bootstrap

Frontend entry and app shell

• src/main.tsx Bootstraps the React app.

• src/App.tsx Defines routes and wraps the app with shared providers such as React Query and the alert system.

• src/App.css

• src/index.css Global styling.

src/pages

This folder contains route-level screens.

• src/pages/auth.tsx Login and registration page.

• src/pages/HomePage.tsx Customer landing page showing now-playing and upcoming content.

• src/pages/MovieDetailsPage.tsx Shows movie information, comments, and available showtimes.

• src/pages/SeatSelectionPage.tsx Handles seat picking for a chosen show.

• src/pages/PaymentPage.tsx Displays and finalizes booking payment.

• src/pages/AccountPage.tsx Shows the logged-in user profile and bookings.

• src/pages/DashboardPage.tsx Admin overview page.

• src/pages/ManageCinemaPage.tsx Admin hub linking to cinema-management tasks.

• src/pages/AddMoviePage.tsx Admin form to create new movies.

• src/pages/AddShowPage.tsx Admin form to create a showtime.

• src/pages/AddHallPage.tsx Admin form to create a hall and its seat layout.

• src/pages/ManageHallsPage.tsx Admin page to edit or delete halls.

• src/pages/HallVipPage.tsx Admin page to toggle VIP seats for a hall.

• src/pages/ManageShowsPage.tsx Admin page to edit or remove shows.

• src/pages/ManageUsersPage.tsx Admin page to manage users and promote them to admin.

src/components

Reusable UI building blocks.

• src/components/Navbar.tsx Shared navigation bar.

• src/components/FormInput.tsx Shared form field wrapper.

• src/components/MovieCard.tsx Reusable movie card UI.

• src/components/SocialButton.tsx Social auth button UI.

• src/components/feedback/AlertToast.tsx Visual alert component used by the global alert provider.

src/api

This is the transport layer. Each file groups backend requests by domain.

• src/api/authApi.ts Login, register, logout, and profile fetch.

• src/api/movieApi.ts Movie CRUD-related frontend calls.

• src/api/showApi.ts Show, showtime, and seat-map requests.

• src/api/hallApi.ts Hall queries and mutations.

• src/api/seatApi.ts Seat updates, including VIP configuration.

• src/api/bookingApi.ts Booking creation, fetch, payment, and user booking requests.

• src/api/commentApi.ts Movie comment operations.

• src/api/genreApi.ts Genre loading and creation.

• src/api/userApi.ts Admin-facing user operations.

src/hooks

Reusable hooks and server-state helpers.

• src/hooks/useAlert.ts Hook to trigger global alerts.

• src/hooks/queryKeys.ts Central query-key definitions for React Query.

• src/hooks/queries/* React Query hooks for each domain. These files wrap API calls with caching, loading, invalidation, and mutation behavior.

src/providers

• src/providers/AlertProvider.tsx Holds global alert state and renders the alert UI.

src/auth

• src/auth/session.ts Manages access token and user session values in local storage.

src/lib

• src/lib/http.ts Shared Axios client, request auth header injection, and token refresh handling.

• src/lib/assets.ts Asset helper exports.

src/types

• src/types/cinema.ts Shared TypeScript models for movies, shows, halls, seats, bookings, users, and API responses.

src/store

• src/store/useBookingStore.ts Zustand store for local booking flow state.

src/mappers

• src/mappers/showMappers.ts Transforms show data for frontend rendering, filtering, deduping, and grouping.

• src/mappers/seatMappers.ts Generates hall seat layouts from hall configuration.

src/utils

• src/utils/seatLayout.ts Seat-layout helpers used by seat-based screens.

src/context

• src/context/alert.css
• src/context/alert.types.ts Shared styling and typing for alerts.

src/assets

Static images used in the UI background and visual presentation.

src/services

• src/services/api.ts Legacy/general API access file. The current architecture primarily uses the domain-based files in src/api.

Backend Structure

The backend is a Spring Boot application used by this frontend. In your full project setup, it is the apiCin service. Even though that source is not present in this exact frontend workspace, the frontend is designed against a backend with the following structure.

Backend layers

controllers

REST entry points that receive HTTP requests and return DTO responses.

Typical responsibilities:

• authentication endpoints
• movie endpoints
• show endpoints
• hall endpoints
• seat endpoints
• booking endpoints
• comment endpoints
• user/admin endpoints

Examples from your project naming:

• AuthController
• movie-related controllers
• booking-related controllers
• hall-management controllers

services

Business logic layer.

This layer typically:

• validates operations
• enforces booking rules
• checks seat availability
• handles user role behavior
• maps database entities to DTOs
• coordinates repositories

Example:

• AuthService handles register, login, token issuing, and profile/session-related logic.

repositories

Spring Data JPA repositories responsible for database access.

Typical repository responsibilities:

• finding movies
• loading shows by movie or hall
• loading seats by hall
• persisting bookings and payments
• loading users and roles

entities

Database-mapped domain objects.

Likely entities in this project:

• User
• Movie
• Genre
• Hall
• Seat
• Show
• Comment
• Booking
• Payment

These represent the database schema and are usually annotated with JPA annotations.

dtos

Request and response DTOs used to isolate the API contract from the entity model.

The backend in this project uses DTOs such as:

• request DTOs for login/register/create movie/create show/create booking
• response DTOs for movies, shows, seat maps, bookings, and auth responses

Example from your code:

• UserAuthResponseDto returns userId, name, email, phone, and role to the frontend after authentication.

config

Application and security configuration.

Typical responsibilities:

• CORS
• Spring Security
• JWT filter/config
• password encoder
• authentication manager
• environment property usage

security

If separated from config, this layer usually handles:

• token parsing
• JWT validation
• authentication filters
• user principal loading

resources

Holds configuration files and backend resources.

Typical contents:

• application.properties or application.yml
• SQL seed or migration files
• static backend resource files if any

Frontend to Backend Contract

The frontend expects the backend to provide:

• authentication with access token handling
• role data for admin detection
• movie lists and movie detail data
• showtime lists and seat maps
• hall and seat management endpoints
• booking creation and payment endpoints
• comment endpoints
• user administration endpoints

Important contract areas:

• auth response must include user information used by the navbar and account page
• seat-map responses must include seat ids, row labels, seat numbers, seat types, status, and price
• admin routes depend on hall, seat, show, and user management endpoints being available

State Management Approach

This project uses multiple state layers:

• React Query for server state, fetching, caching, and invalidation

• Zustand for local shared booking flow state

• React Context for global UI concerns such as alerts

• local component state with useState for form inputs, selections, and page-specific UI behavior

Project Flow Summary

Authentication flow

• user opens login/register page
• frontend sends credentials to the backend
• backend returns access token and user data
• frontend stores token and user profile in local storage
• protected requests attach the token automatically

Booking flow

• user opens home page
• chooses a movie
• views available showtimes
• chooses seats
• creates a booking
• moves to payment
• views the result in account/bookings

Admin flow

• admin opens dashboard
• navigates to manage cinema
• adds movies, halls, and shows
• manages halls and VIP seats
• manages users and admin promotions

Running the Frontend

Install dependencies:

npm install

Start development server:

npm run dev

Build production bundle:

npm run build

Preview production build:

npm run preview

Environment Notes

The frontend uses an API base URL from environment configuration in src/lib/http.ts:

• VITE_API_BASE_URL

If that variable is not provided, the frontend falls back to:

http://localhost:8080

Notes

• This frontend repo currently contains the React application only.
• The backend is documented here as the Spring Boot service this UI is built to consume.
• The student-projects/ directory contains collaboration handoff packages for the three-student push workflow and is not part of the production app runtime.