Event Ticket Booking Platform with Interactive Seat Map

Booking an event ticket looks simple to the user, but the engineering underneath is genuinely tricky: the seat map must stay in sync with the order total, two buyers must never confirm the same seat, and the price shown has to itemize every fee exactly. This project builds a complete event ticketing platform around those problems. Customers browse a catalogue of events, open any event to pick an exact seat — section, row and number — on an interactive SVG seat map with category-wise pricing, and complete a guided checkout with validation, a working promo code, and a simulated payment step that issues a booking reference. While seats are selected, a 10-minute countdown hold protects them and releases them automatically on expiry — the same hold-and-release pattern real ticketing carts use against double-booking races. The demo build re-renders its full 248-seat map in about 6 milliseconds per repaint (measured during the build), so the map stays fluid even at stadium scale. Everything runs from a single self-contained HTML file with no backend, which makes it easy to demo, explain and extend in a viva.

1. The app loads a catalogue of events defined as plain JavaScript data (title, venue, showtimes, priced sections), rendered as cards with live search and category filters.
2. Choosing an event and showtime opens the seat-map view, where a deterministic generator lays out 248 seats across priced sections and marks about 28% as already booked, so the demo behaves like a live event.
3. Clicking a seat toggles it in a single selection set; the SVG map is fully re-rendered from that set in about 6 ms per repaint (measured), so the map, the selection tray and the totals can never disagree with each other.
4. The first selected seat starts a 10-minute countdown hold shown in the header; if the timer expires, the selection is released automatically and the map re-renders.
5. Checkout validates the name, email and a 10-digit Indian mobile number, applies the STUDENT10 promo if entered, and shows an itemized bill — tickets, ₹40-per-ticket convenience fee and 18% GST on the fee — before the mock payment step.
6. On payment, the app generates a booking reference, saves the order to browser localStorage, and shows a confirmation screen; the order then appears in My Bookings, where it can be cancelled.

Tech stack:

• HTML5, CSS3, vanilla JavaScript (single-file SPA, no build step)
• SVG seat-map renderer (no external graphics library)
• Hash-based client-side routing
• Web Storage API (localStorage) for booking persistence
• Embedded woff2 webfonts (Plus Jakarta Sans, JetBrains Mono)
• Responsive flexbox and grid layouts

• [Interactive SVG seat map] Every seat is a clickable element in a rendered venue map — section, row and seat number with category-wise pricing and color coding. Already-booked seats are visibly locked, and selecting or deselecting any seat updates the order instantly.
• [Event catalogue with search and filters] Six realistic events across concerts, sports, theatre, comedy, conferences and classical music, with live search, category chips, showtime selection and per-event price lists.
• [10-minute seat-hold countdown] Selected seats are protected by an in-browser countdown timer that releases them automatically on expiry — no server polling is needed for the demo's hold semantics. One order is capped at 10 seats, the same ceiling real carts use to stop bulk-hold abuse.
• [Guided checkout with validation] Name, email and Indian mobile-number validation, a working STUDENT10 promo code worth 10% off tickets, and an itemized order summary showing ticket prices, a ₹40-per-ticket convenience fee and 18% GST before payment.
• [Simulated payment and booking reference] A mock payment step issues a unique booking reference (for example SW-7KX4PQ) and a confirmation screen with the full itinerary; bookings persist in the browser and appear in a My Bookings view with cancellation.
• [Measured render performance] The demo's full 248-seat map re-renders in about 6 ms per repaint (measured in the demo build on desktop Chrome), so seat selection stays fluid at stadium scale.
• [Optional: admin event manager] (Scope decided at order time.) A small admin view to add events, set prices and mark seats blocked — useful if the student wants a two-sided story in the report.
• [Future scope: real backend and payments] Documented extension path — seat inventory moved to a real database with transactional holds, plus a payment-gateway integration and e-ticket QR codes.

• Working single-file demo web app (the SeatWave build) with the complete booking flow
• Full source code with commented seat-map, hold-timer and pricing logic
• Project report PDF (problem, design, seat-map rendering approach, hold semantics, test cases)
• Abstract PDF (10-section structure)
• PPT presentation for the final review
• Viva Q&A preparation document (SVG rendering, state management, race conditions, pricing math)
• Report-ready screenshots (the three gallery images)