SeatSnap - Full Stack Ticketing Platform
A complete event management and ticketing platform with integrated payments, and role-based admin controls.
Ready to explore the codebase?
Dive into the source code to see how it's built, or check out the live demo to experience the performance firsthand.
Overview
SeatSnap is a production-ready event ticketing and management platform featuring a complete user booking flow, secure payment integration with PhonePe, QR-code based ticket validation, and a comprehensive admin dashboard. Built with Next.js App Router and Firebase, it handles events, movies, and plays with real-time data management and email confirmations.
Problem Statement
Traditional event ticketing systems face several challenges:
This project delivers a complete solution covering the entire ticketing lifecycle from booking to entry validation.
Goals & Requirements
Primary Goals
Integrate PhonePe payment gateway with secure webhook processing.
Build admin CRUD interfaces for events, movies, and plays.
Implement Firebase-based authentication with custom role claims.
Tech Requirements
Secure payment processing with SHA-256 verification
Server-side role validation using Firebase Admin SDK
Responsive design for mobile and desktop booking
Key Features
PhonePe Payment Integration
Complete payment flow with API initiation, redirect handling, and webhook verification. Supports secure transaction processing with SHA-256 signatures and handles payment success/failure callbacks.
Role-Based Admin Dashboard
Protected admin routes using Firebase custom claims. Admins can create, edit, and manage events, movies, and plays. Includes booking management and message viewing interfaces.
Multi-Event Type Management
Supports three event categories (events, movies, plays) with dedicated pages, booking flows, and admin tables. Each type has customizable fields and pricing structures.
Architecture
The application uses Next.js App Router for file-based routing with server and client components. Firebase handles authentication, database, and admin operations, while serverless API routes manage payment processing and webhooks.
Frontend
Backend
Performance Optimizations
Server-side rendering for SEO and initial load performance
Firebase security rules for data protection
Optimized image assets with Next.js Image component
Code splitting with dynamic imports
What I Learned
Payment gateway integration requires careful webhook verification and idempotency handling.
Firebase custom claims are powerful for role-based access but need proper token refresh flows.
QR code generation and scanning can be efficiently handled client-side with proper security checks.
TypeScript strict mode catches many edge cases in payment and booking flows.
Ready to explore the codebase?
Dive into the source code to see how it's built, or check out the live demo to experience the performance firsthand.