🎬 Cinema Seat Booking – Interactive React Component

A modern and responsive seat booking system with dynamic layouts, seat categories, pricing, and booking flow built using React.js and TailwindCSS.
Perfect for cinema halls, events, and theater seat reservation systems.

---

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🧱 Project Structure
6. 📝 Customization
7. 🤝 Contribution
8. 🔗 Contacts
9. 📄 License
10. 🙏 Acknowledgements

---

✨ Introduction

CinemaSeatBooking is an interactive and customizable seat booking component built in React. It features:

• Seat selection with categories (Regular, Premium, VIP)
• Dynamic pricing and booking summary
• Aisle separation and booked seat management
• Customizable layout, seat pricing, and booking callbacks

It’s ideal for use in cinema halls, theater reservations, or event booking platforms.

---

⚙️ Tech Stack

⚡ Core Technologies

• React.js – Component-based UI
• TailwindCSS – Modern utility-first styling
• JavaScript (ES6+) – State management and interactivity

🧹 Tooling

• Vite / CRA – Fast development with hot reload
• VS Code – Development environment

---

🔋 Features

• 🎟️ Dynamic Seat Map – Rows, seats per row, and aisle separation
• 🎨 Seat Categories – Regular, Premium, VIP (customizable)
• 💸 Booking Summary – Selected seats, seat count, and total price
• 🚫 Booked Seat Handling – Disable unavailable seats
• ⚡ Interactive UI – Click-to-select seats with animations
• 📱 Responsive Design – Works across devices
• 🟢 Inline Notifications – Shows success/error messages instead of alerts
• ✅ Post-Booking Status – Button shows booked seat IDs after completion

---

🤸 Quick Start

Prerequisites

• Node.js
• Git

Clone the Project

git clone https://github.com/Itssanthoshhere/Cinema-Seat-Booking.git
cd Cinema-Seat-Booking

Install Dependencies

npm install

Start Development Server

npm run dev

---

🧱 Project Structure

File/Folder	Description
App.jsx	Entry point with demo usage
components/	Contains the CinemaSeatBooking component
CinemaSeatBooking.jsx	Main seat booking component
assets/	Images or thumbnails
README.md	Documentation

---

📝 Customization

• Change seat layout (rows, seats per row, aisle position):

layout={{
  rows: 8,
  seatsPerRow: 12,
  aislePosition: 5,
}}

• Update seat categories and pricing:

seatTypes={{
  regular: { name: "Regular", price: 150, rows: [0, 1, 2] },
  premium: { name: "Premium", price: 250, rows: [3, 4, 5] },
  vip: { name: "VIP", price: 350, rows: [6, 7] },
}}

• Predefine booked seats:

bookedSeats={["C2", "C4"]}

• Capture booking completion:

onBookingComplete={(booking) => console.log(booking)}

---

🤝 Contribution

Contributions are welcome! You can:

1. Fork the repo
2. Create a new branch (git checkout -b feature/my-feature)
3. Make your changes
4. Commit (git commit -m 'feat: my feature')
5. Push (git push origin feature/my-feature)
6. Create a Pull Request

---

🔗 Contacts

• GitHub: Itssanthoshhere
• LinkedIn: Santhosh VS

---

📄 License

This project is for educational and portfolio purposes. All rights for logos, assets, and branding belong to their respective owners.

---

🙏 Acknowledgements

• React – For the component-based UI
• TailwindCSS – For styling utilities
• Vercel – For live deployment

---

⭐ Show Your Support

If you liked this project, give it a ⭐ and share it with your network!

---