Skip to content

AmanBhaskar16/Movie-Ticket-Booking

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 

Repository files navigation

🎬 Movie Ticket Booking Application

🌟 Project Overview

This is a full-stack movie ticket booking application built with the MERN stack (MongoDB, Express.js, React, Node.js).
It allows users to browse movies, view showtimes, select seats, and book tickets.
An Admin Dashboard is also included for managing shows, bookings, and revenue.


🚀 Features

  • 🔑 User Authentication – Secure login & signup powered by Clerk
  • 🎥 Movie Listings – Browse “Now Playing” movies via the TMDB API
  • Showtimes & Seating – Interactive seat layout and time selection
  • 🎟 Booking System – Book tickets with payment & booking management
  • 💳 Stripe Integration – Secure payments for ticket purchases
  • 📊 Admin Dashboard – Manage shows, view all bookings, monitor revenue
  • 📧 Email Notifications – Booking confirmations & reminders via Nodemailer
  • 📱 Responsive Design – Modern UI with Tailwind CSS

🛠️ Technology Stack

Frontend

  • ⚛️ React + Vite
  • 🛣️ React Router
  • 🎨 Tailwind CSS
  • 🔑 Clerk (Auth)
  • 🔔 React Hot Toast
  • 🎬 React Player
  • 🌐 Axios

Backend

  • 🟢 Node.js + Express.js
  • 🍃 MongoDB + Mongoose
  • 🔑 Clerk Middleware
  • 💳 Stripe
  • 📧 Nodemailer
  • Inngest (background tasks)
  • 🌐 Axios (external API requests)

📂 Project Structure

Client


client/
├── src/
│   ├── assets/        # Images, icons, and dummy data
│   ├── components/    # Reusable UI components
│   │   ├── admin/     # Admin-specific components
│   ├── context/       # React Context for global state
│   ├── lib/           # Utility functions
│   ├── pages/         # Main application pages
│   │   ├── admin/     # Admin dashboard pages
│   ├── App.jsx        # Main app component with routing
│   ├── index.css      # Global styles
│   └── main.jsx       # React entry file

Server


server/
├── controllers/   # API request logic
├── configs/       # DB & email configs
├── inngest/       # Background task handlers
├── middleware/    # Auth & access control
├── models/        # MongoDB schemas
├── routes/        # Express routes
├── .env           # Environment variables (ignored in git)
└── server.js      # Main server file


⚙️ Setup & Installation

🔹 Prerequisites

  • Node.js v18+
  • MongoDB
  • Stripe Account
  • Clerk Account
  • TMDB API Key

🔹 Backend Setup

git clone <repository-url>
cd movie-ticket-booking/server
npm install

Create a .env file:

PORT=3000
MONGODB_URI=<your_mongodb_connection_string>
CLERK_SECRET_KEY=<your_clerk_secret_key>
STRIPE_SECRET_KEY=<your_stripe_secret_key>
STRIPE_WEBHOOK_SECRET=<your_stripe_webhook_secret>
TMDB_API_V4_TOKEN=<your_tmdb_api_key>
SMTP_USER=<your_smtp_user>
SMTP_PASSWORD=<your_smtp_password>
SENDER_EMAIL=<your_sender_email>
INNGEST_SIGNING_KEY=<your_inngest_signing_key>
INNGEST_EVENT_KEY=<your_inngest_event_key>

Run backend:

npm start

🔹 Frontend Setup

cd ../client
npm install

Create a .env file:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
VITE_CURRENCY=$
VITE_BASE_URL=http://localhost:3000
VITE_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p/original

Run frontend:

npm run dev

Frontend runs on 👉 http://localhost:5173


📊 Database Schema (Simplified ERD)

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

    USER {
        string id
        string name
        string email
    }

    MOVIE {
        string id
        string title
        string description
    }

    SHOW {
        string id
        date showtime
        string movieId
    }

    BOOKING {
        string id
        string userId
        string showId
        array seats
    }

    PAYMENT {
        string id
        string bookingId
        number amount
        string status
    }
Loading

🚀 Deployment

  • Frontend: Vercel
  • Backend: Vercel
  • Database: MongoDB Atlas
  • Payments: Stripe Webhooks (configure in dashboard)

📌 Future Enhancements

  • 🎟 Loyalty / Reward system
  • 🎭 Multi-theater support
  • 📱 React Native mobile app

📸 Screenshots

image image image image

👨‍💻 Author

Aman Bhaskar

Built with ❤️ using the MERN stack.


About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages