Full-stack movie booking experience built with React, Node.js, and MongoDB.
Book tickets in real-time, manage theaters, process payments, and enjoy an admin dashboard that brings the magic of cinema to your fingertips.
Designed for movie lovers, admins, and modern theaters seeking a digital booking system.
Designed for movie lovers, admins, and modern theaters seeking a digital booking system.
- ✨ Introduction
- ⚙️ Tech Stack
- 🔋 Features
- ⚡ Automation & Background Jobs
- 🤸 Quick Start
- 🧱 Project Structure
- 🧩 API Overview
- 🚀 Deployment
- 📝 Customization
- 🤝 Contribution
- 🔗 Contacts
- 📄 License
- 🙏 Acknowledgements
QuickShow is a modern movie theater booking platform that simplifies ticket management for users and administrators.
It provides a complete end-to-end cinema booking experience, including:
- real-time seat selection
- secure payment processing
- automated show management
- email notifications
- background job automation
The system also integrates TMDB movie data and Inngest workflows to automatically keep the platform updated with new movies and shows.
🎯 Whether you're running a cinema or booking your next movie night — QuickShow delivers a seamless experience.
- React 19 + Vite – Fast modern frontend stack
- Tailwind CSS 4 – Responsive UI styling
- React Router DOM – Navigation and routing
- Axios – API communication
- Lucide React – Lightweight icon system
- Node.js + Express 5 – Backend API framework
- MongoDB + Mongoose – Database and schema management
- Stripe – Secure payment processing
- Clerk – Authentication and user management
- TMDB API – Movie data provider
- Cloudinary – Media storage for images
- Nodemailer – Email notifications
- Inngest – Background jobs and workflow automation
- 🎟️ Smart Booking System – Real-time seat availability and interactive seat layouts
- 💳 Secure Payments – Integrated with Stripe Checkout and webhooks
- 👥 User Management – Authentication, profiles, and favorites powered by Clerk
- 🧑💼 Admin Dashboard – Manage movies, shows, and bookings from a centralized admin panel
- 🎬 Movie Catalog – Browse movies with posters, ratings, runtime, and details
- 🔄 Automatic Movie Sync – Fetches Now Playing movies from TMDB API
- 📅 Automatic Show Generation – Background job automatically creates shows for upcoming days
- 📧 Email Notifications – Booking confirmations and reminders via Nodemailer
- ⏰ Background Workflows – Powered by Inngest for:
- user synchronization
- booking validation
- payment verification
- show reminders
- automated movie updates
- ☁️ Cloud Storage – Media storage handled using Cloudinary
- 📱 Responsive UI – Optimized for desktop, tablet, and mobile devices
QuickShow uses Inngest workflows to automate backend operations.
| Workflow | Description |
|---|---|
| User Sync | Syncs Clerk users to MongoDB |
| Payment Validation | Cancels unpaid bookings after 10 minutes |
| Booking Confirmation | Sends confirmation email after payment |
| Show Reminders | Sends reminder emails before showtime |
| New Show Notifications | Alerts users when new shows are added |
| TMDB Movie Sync | Fetches now-playing movies automatically |
| Show Generator | Creates showtimes for upcoming days |
These workflows ensure the platform stays fully automated and up-to-date without manual admin work.
Install the following:
- Git
- Node.js
- MongoDB Atlas
- Vercel (for deployment)
git clone https://github.com/Itssanthoshhere/QuickShow-Movie-Theater-Booking-Platform.git
cd QuickShow-Movie-Theater-Booking-Platformcd client
npm install
cd ../server
npm installCreate .env files for client and server.
MONGODB_URI=
CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
INNGEST_EVENT_KEY=
INNGEST_SIGNING_KEY=
TMDB_API_KEY=
STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
SENDER_EMAIL=
SMTP_USER=
SMTP_PASS=TMDB_API_KEY should be the TMDB Read Access Token (v4) from:
https://www.themoviedb.org/settings/api
VITE_CURRENCY='₹'
VITE_CLERK_PUBLISHABLE_KEY=
VITE_BASE_URL=http://localhost:3000
VITE_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p/originalStart backend:
cd server
npm run devStart frontend:
cd client
npm run devOpen:
http://localhost:5173
QuickShow/
├── client/
│ ├── src/
│ ├── public/
│ ├── vite.config.js
│ └── vercel.json
│
└── server/
├── configs/
├── controllers/
├── models/
├── routes/
├── middleware/
├── inngest/
├── server.js
└── vercel.json
| Endpoint | Method | Description |
|---|---|---|
/api/show |
GET | Fetch available shows |
/api/show/:movieId |
GET | Fetch showtimes for a movie |
/api/booking |
POST | Create booking |
/api/user/bookings |
GET | Get user bookings |
/api/user/favourites |
GET | Fetch favourite movies |
/api/user/update-favourite |
POST | Add/remove favourite movie |
/api/admin/add-show |
POST | Add a new show |
/api/admin/all-bookings |
GET | Get all bookings |
/api/admin/dashboard |
GET | Admin analytics |
/api/stripe/webhook |
POST | Stripe payment webhook |
QuickShow is deployed using Vercel.
https://quick-show-ticketbooking.vercel.app/
https://quick-show-servers.vercel.app/
The backend handles:
- authentication
- bookings
- payments
- background workflows
- automated movie syncing
- 🎨 Update branding & colors in
client/src/index.css - 🖼️ Replace hero images in
client/public/readme/ - 🧠 Modify API routes in
server/routes/ - 💼 Configure environment settings in
.envfiles
Contributions are welcome!
- Fork the repository
- Create a feature branch
git checkout -b feature/my-feature
- Commit your changes
git commit -m "feat: add new feature"
- Push the branch
git push origin feature/my-feature
- Open a Pull Request
- GitHub: Itssanthoshhere
- LinkedIn: Santhosh VS
This project is for educational and portfolio use only. All trademarks, logos, and assets belong to their respective owners.
- React – Frontend framework
- Node.js – Backend runtime
- Tailwind CSS – Styling framework
- Vercel – Hosting platform
- Stripe – Payment gateway
- Clerk – Authentication
- Cloudinary – Media storage
- Inngest – Background workflows
If you like QuickShow, give it a ⭐ on GitHub and share it with your network!