🎬 QuickShow — Movie Ticket Booking Platform (Full-Stack)

QuickShow is a full-stack movie ticket booking web app where:

• Users can browse movies, watch trailers, save favorites, select seats, book and pay.
• Admins can manage shows, view bookings, and monitor dashboard analytics.

Frontend: quickshow-mocha.vercel.app Backend: quickshow-server-two-gray.vercel.app

---

✨ Highlights

✅ Clerk authentication (multi-account support)
✅ Movie browsing + trailer section (YouTube player)
✅ Favorites saved in Clerk metadata
✅ Seat selection + occupied seats detection
✅ Bookings stored in MongoDB
✅ Stripe payment integration
✅ Auto-cancel unpaid bookings after 10 minutes (Inngest)
✅ Email sending (Nodemailer + SMTP provider)
✅ Admin dashboard (shows, bookings, analytics)

---

🖼 Screenshots

🏡 Home Page

🎭 Movie Details & Seat Selection

🎟️ My Bookings

🛠️ Admin Dashboard

📚 SignIn

🧱 Tech Stack

Frontend

• React 19 + React Router DOM 7
• TailwindCSS 4
• Clerk (@clerk/clerk-react)
• Axios
• React Player (trailers)
• React Hot Toast
• Lucide Icons

Backend

• Node.js + Express
• MongoDB + Mongoose
• Clerk (@clerk/express) middleware
• Inngest for event-driven workflows + scheduled cleanup
• Stripe for payments
• Nodemailer for emails
• Svix for webhook verification (Clerk webhooks)
• Cloudinary dependency included

---

🧭 Product Modules

User Side

• Home (navbar + hero + featured movies)
• Trailers (YouTube player + trailer grid)
• Movies listing page
• Movie details page (showtimes + seat selection)
• Favorites page
• My Bookings page

Admin Side

• Dashboard (active shows + totals)
• Shows list (table)
• Bookings list (table)
• Add Show (now playing movies + form: price + datetime)

---

🏗️ System Architecture

flowchart TB
  U[User Browser] --> FE[Frontend: React + Clerk]
  FE -->|Axios + Clerk Token| BE[Backend: Express API]
  BE -->|Mongoose| DB[(MongoDB)]
  BE -->|Create/Verify Payments| STRIPE[Stripe]
  STRIPE -->|Webhook confirmation| BE
  BE --> MAIL[Nodemailer / SMTP Provider]
  CLERK[Clerk Auth] --> FE
  CLERK -->|Webhooks via Svix| BE
  BE --> ING[Inngest Functions]
  ING --> DB

Loading

🔐 Auth & User Sync (Clerk → MongoDB via Inngest)

Used Clerk + Inngest to keep the MongoDB User model synced with Clerk users.

sequenceDiagram
  participant C as Clerk
  participant B as Backend (Express)
  participant I as Inngest
  participant D as MongoDB

  C->>B: Webhook: user.created / user.updated / user.deleted (Svix signed)
  B->>I: Trigger Inngest event
  I->>D: Create/Update/Delete user in User collection
  D-->>I: OK
  I-->>B: Done

Loading

🔁 Frontend ↔ Backend Communication

Frontend uses a global context (AppContext) that:

• reads Clerk auth state

• gets Clerk JWT token

• calls backend APIs using Axios

• fetches:

  • shows
  • favorites
  • bookings
  • admin role validation (isAdmin)

sequenceDiagram
  participant FE as React AppContext
  participant CL as Clerk
  participant API as Express Backend
  participant DB as MongoDB

  FE->>CL: Get session + JWT token
  FE->>API: Request (Authorization: Bearer <token>)
  API->>API: Clerk middleware verifies token
  API->>DB: Query/Update
  DB-->>API: Result
  API-->>FE: JSON response

Loading

🎟️ Booking + Seat Reservation + Payment Flow

This is the core QuickShow experience:

sequenceDiagram
  participant U as User
  participant FE as Frontend
  participant API as Backend
  participant DB as MongoDB
  participant S as Stripe
  participant I as Inngest

  U->>FE: Select showtime + seats
  FE->>API: Get occupied seats (showId)
  API->>DB: Find booked seats for show
  DB-->>API: Occupied seats
  API-->>FE: Occupied seats list

  U->>FE: Confirm booking
  FE->>API: Create booking (pending payment)
  API->>DB: Save booking + reserve seats
  DB-->>API: Booking created

  API->>S: Create payment session / intent
  S-->>API: Payment session info
  API-->>FE: Redirect/checkout details

  Note over I,DB: If payment not completed within 10 minutes:
  I->>DB: Delete pending booking + release seats
  I-->>FE: (Optional) notify / reflect availability

Loading

✅ Auto-Cancel Unpaid Bookings (10 minutes)

Implemented an Inngest scheduled function that:

• finds bookings still unpaid after 10 minutes
• deletes them (or marks expired)
• releases reserved seats automatically

🧾 Data Model (High-Level)

erDiagram
  USER ||--o{ BOOKING : makes
  MOVIE ||--o{ SHOW : has
  SHOW  ||--o{ BOOKING : receives

  USER {
    string clerkUserId
    string email
    string name
    boolean isAdmin
  }

  MOVIE {
    string title
    string overview
    string posterUrl
    string backdropUrl
  }

  SHOW {
    string movieId
    datetime showTime
    number price
    string screen
  }

  BOOKING {
    string userId
    string showId
    array seats
    string status
    string paymentId
    datetime createdAt
  }

Loading

🧩 API Modules (What Your Backend Provides)

✅ Shows

• Get now playing movies (for Add Show page)
• Add show (admin)
• Get all shows
• Get single show details

✅ Bookings

• Create booking
• Get occupied seats
• Admin: get all bookings
• User: get user bookings

✅ Admin

• Dashboard analytics
• Shows table data
• Bookings table data
• isAdmin verification

✅ User

• Get favorites
• Update favorites
• Get my bookings

📁 Repository Structure

quickshow/
├─ client/                # React + Tailwind + Clerk
│  └─ src/
│     ├─ context/         # AppContext.jsx (global state + API calls)
│     ├─ pages/           # Home, Movies, Favorites, Details, Bookings, Admin pages
│     └─ components/      # Navbar, Footer, MovieCard, SeatSelector, etc.
└─ server/                # Express + MongoDB + Clerk + Inngest
   ├─ models/             # User, Movie, Show, Booking
   ├─ controllers/        # showController, bookingController, adminController, userController
   ├─ routes/             # showRouter, bookingRouter, adminRouter, userRouter
   ├─ middleware/         # Clerk auth middleware
   ├─ inngest/            # index.js (events + scheduled jobs)
   └─ server.js