Modern, immersive web client for the Cinema Management System, developed as part of the SoftServe Practice. This application provides a premium user interface for booking tickets and a powerful dashboard for cinema administration.
Official Documentation: Visit our Cinema Platform Docs for the complete REST API reference, system architecture, and developer guides. Backend: Check out cinema-platform-back for the .NET 8 API.
The project is built with Performance and Type Safety in mind, utilizing the latest React 19 features and feature-sliced architectural patterns.
| Layer | Technologies |
|---|---|
| Core | React 19, TypeScript, Vite, Bun |
| State Management | TanStack Query (Server State), Context API (Auth/UI), React Hooks |
| Real-Time | Microsoft SignalR (WebSockets) |
| Styling | Tailwind CSS v4, clsx, tailwind-merge, Lucide React (Icons) |
| Forms & Validation | React Hook Form + Zod |
| Routing | React Router DOM v7 |
| Tooling | Biome.js (Fast Linting & Formatting) |
| Deployment | Vercel (CI/CD) |
- Immersive "Dark Fantasy" UI: Premium aesthetic with glassmorphism, fluid animations, and "rolling text" effects.
- Real-Time Booking:
- Live Seat Locking: See seats turning gray instantly when other users select them (powered by SignalR).
- Visual Hall Map: Interactive SVG/Grid map with distinct seat types (Lux, Love Seats, Standard).
- Digital Member Card: Personal QR code and "Cinema Club" status in the profile.
- Smart Navigation: Full-screen overlay menu and "Fat Footer" with categorized information.
- Dynamic Content: Static pages (Rules, Tech, Privacy) rendered via a unified template system.
- Visual Hall Builder: Drag-and-drop style editor to construct cinema halls and assign seat types.
- Pricing Matrix: Advanced grid interface to set dynamic prices based on day of week and seat type.
- Analytics Dashboard: View user activity, ticket sales, and occupancy rates.
- Content Management: Full CRUD for Movies, Sessions, and Technologies.
- Node.js (v18+)
- Bun (Recommended package manager)
-
Clone the repository:
git clone https://github.com/stkossman/cinema-platform-front.git cd cinema-platform-front -
Install dependencies:
bun install
-
Environment Configuration: Create a
.envfile in the root directory:VITE_API_URL=your.url.com
-
Run the development server:
bun dev
The app will run at
http://localhost:5173.
The application uses SignalR to maintain consistency across all connected clients.
- When User A selects a seat, a WebSocket message is sent.
- The Backend broadcasts a
SeatLockedevent. - User B's client receives the event and updates the React Query cache via
setQueryData, instantly marking the seat as occupied without a page refresh.
Code is organized by features rather than technical layers. For example, features/booking contains:
components/SeatSelector.tsx(UI)hooks/useBooking.ts(Logic & State) This ensures that deleting a feature removes all associated code, keeping the project clean.
This project is licensed under the MIT License.