🎬 GoCine — Movie Ticket Booking Application

A Production-Ready Full Stack MERN Application

GoCine is a feature-rich, production-deployed movie ticket booking platform built with the MERN Stack. It delivers a seamless end-to-end experience — from browsing movies and selecting showtimes to secure payment processing and downloadable e-tickets — with a dedicated admin dashboard for complete content management.

🌐 Live Demo · 📖 Documentation · 🐛 Report Bug · ✨ Request Feature

🌐 Live Deployment

GoCine is fully deployed and running in production.

Service	Platform	URL	Status
Frontend	Vercel	gocine-app-eldho.vercel.app	✅ Live
Backend	Render	gocine-api.onrender.com	✅ Live
Database	MongoDB Atlas	Cloud-hosted cluster	✅ Active

Note: The backend is hosted on Render's free tier and may take ~30 seconds to cold-start on the first request.

🏆 Why This Project Stands Out

Aspect	Details
🏗️ Real-World Architecture	Production-grade MERN stack with clean separation of concerns, RESTful API design, and scalable folder structure
🔐 Authentication System	Complete user registration and login flow with role-based access control (User / Admin)
🎟️ Booking Workflow	End-to-end ticket booking — browse → select → book → pay → receive e-ticket with QR code
💳 Payment Integration	Secure payment processing with Razorpay payment gateway for real transaction handling
👨‍💼 Admin Dashboard	Full-featured admin panel for managing movies, showtimes, bookings, and platform analytics
📱 Responsive UI	Mobile-first responsive design built with Tailwind CSS and Material UI
🚀 Production Deployment	Fully deployed on Vercel (frontend) and Render (backend) with MongoDB Atlas
📄 E-Ticket Generation	Downloadable PDF tickets with QR codes using `html2pdf.js` and `qrcode.react`

🛠️ Tech Stack

Frontend

Technology	Purpose
React 19	UI library with component-based architecture
Vite 6.3	Lightning-fast build tool and dev server
Tailwind CSS 4.1	Utility-first CSS framework
Material UI 7.1	Pre-built UI component library
React Router DOM 7.6	Client-side routing and navigation
Axios	HTTP client for API communication
Razorpay	Payment gateway integration
html2pdf.js	PDF generation for e-tickets
qrcode.react	QR code generation for bookings
React Icons	Icon library
jsPDF	PDF document generation

Backend

Technology	Purpose
Node.js	Server-side JavaScript runtime
Express 5.1	Web application framework
MongoDB + Mongoose 8.16	NoSQL database with ODM
Razorpay SDK	Payment processing (server-side)
Multer 2.0	File upload middleware
CORS	Cross-origin resource sharing
dotenv	Environment variable management

DevOps & Deployment

Technology	Purpose
Vercel	Frontend hosting and CI/CD
Render	Backend hosting and deployment
MongoDB Atlas	Cloud-hosted database
GitHub Actions	Automated CI/CD pipeline
ESLint	Code linting and quality
Prettier	Code formatting

🏛️ Architecture Overview

┌──────────────────────────────────────────────────────────────────┐
│                        CLIENT (Vercel)                           │
│  ┌────────────┐  ┌──────────────┐  ┌──────────────────────────┐ │
│  │  React 19  │  │ Tailwind CSS │  │   Material UI Components │ │
│  │  + Vite    │  │   + MUI      │  │   + React Router DOM     │ │
│  └─────┬──────┘  └──────────────┘  └──────────────────────────┘ │
│        │                                                         │
│        │  Axios HTTP Requests                                    │
└────────┼─────────────────────────────────────────────────────────┘
         │
         │  REST API (JSON)
         ▼
┌──────────────────────────────────────────────────────────────────┐
│                       SERVER (Render)                             │
│  ┌────────────┐  ┌──────────────┐  ┌──────────────────────────┐ │
│  │ Express 5  │  │  Middleware   │  │     Route Handlers       │ │
│  │  Server    │──│  (CORS,JSON) │──│  Auth│Rooms│Bookings│Pay │ │
│  └────────────┘  └──────────────┘  └───────────┬──────────────┘ │
│                                                 │                │
│  ┌──────────────────┐  ┌────────────────────────┘               │
│  │  Razorpay SDK    │  │                                         │
│  │                  │  ▼                                         │
│  └──────────────────┘  ┌──────────────────────────┐              │
│                        │   Mongoose ODM            │              │
│                        └───────────┬──────────────┘              │
└────────────────────────────────────┼─────────────────────────────┘
                                     │
                                     ▼
                        ┌──────────────────────┐
                        │   MongoDB Atlas       │
                        │   (Cloud Database)    │
                        └──────────────────────┘

✨ Features

🎭 User Features

Browse Movies — Explore a curated catalog of movies with rich details, ratings, and imagery
Movie Details — View comprehensive movie information including synopsis, cast, and showtimes
Seat Selection — Interactive seat picker for choosing preferred seats
Secure Booking — Complete ticket booking with real-time availability updates
Secure Payment — Pay via Razorpay with secure transaction handling
E-Ticket with QR — Receive downloadable PDF tickets with embedded QR codes
Booking History — View and manage all past and upcoming bookings
User Authentication — Secure registration and login with session management

👨‍💼 Admin Features

Admin Dashboard — Comprehensive analytics and management overview
Movie Management — Add, edit, and remove movie listings with image uploads
Showtime Management — Configure showtimes, pricing, and availability
Booking Oversight — Monitor all bookings and revenue analytics
Role-Based Access — Admin-only routes with protected access control

🎨 UI/UX Features

Responsive Design — Fully responsive across mobile, tablet, and desktop
Modern Interface — Clean, intuitive design with Material UI components
Smooth Animations — Polished transitions and micro-interactions
Dark/Light Theming — Professional visual hierarchy with consistent styling

📸 Screenshots

🏠 Home Page

Landing page with cinematic hero section, movie search, and date/ticket selection

🎬 Movie Listing

Browse all now-showing movies with genre filters, ratings, and sorting options

⭐ Testimonials & Footer

User reviews, social links, and professional footer with newsletter subscription

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Tool	Version	Download
Node.js	≥ 18.x	nodejs.org
npm	≥ 9.x	Included with Node.js
MongoDB	Atlas or Local	mongodb.com
Git	Latest	git-scm.com

Installation

# 1. Clone the repository
git clone https://github.com/eldhoaby/GoCineApp.git
cd GoCineApp

# 2. Install backend dependencies
cd backend
npm install

# 3. Install frontend dependencies
cd ../frontend
npm install

Running Locally

# Terminal 1 — Start Backend Server
cd backend
npm start
# Server runs on http://localhost:3000

# Terminal 2 — Start Frontend Dev Server
cd frontend
npm run dev
# App runs on http://localhost:5173

📖 For detailed setup instructions, see docs/setup.md

⚙️ Environment Setup

Backend (`backend/.env`)

PORT=3000
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/gocine
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret

Frontend (`frontend/.env`)

VITE_API_URL=http://localhost:3000
VITE_RAZORPAY_KEY_ID=your_razorpay_key_id

⚠️ Never commit .env files. Use the provided .env.example as a template.

📡 API Overview

The backend exposes a RESTful API with the following endpoint groups:

Method	Endpoint	Description	Auth
`POST`	`/users/register`	Register a new user	Public
`POST`	`/users/login`	Authenticate user	Public
`GET`	`/rooms`	Get all movie listings	Public
`GET`	`/rooms/:id`	Get movie details by ID	Public
`POST`	`/bookings`	Create a new booking	User
`GET`	`/bookings`	Get user's bookings	User
`POST`	`/razorpay`	Process Razorpay payment	User
`GET`	`/admin/dashboard`	Admin dashboard data	Admin
`POST`	`/admin/rooms`	Add new movie listing	Admin
`PUT`	`/admin/rooms/:id`	Update movie listing	Admin
`DELETE`	`/admin/rooms/:id`	Delete movie listing	Admin

📖 For comprehensive API documentation, see docs/api-overview.md

🚢 Deployment

Deployment Architecture

GoCine follows a modern JAMstack-inspired deployment architecture:

GitHub Repository
       │
       ├──→ Vercel (Frontend)
       │     ├── Automatic deployments on push
       │     ├── Edge network CDN
       │     └── Environment variables configured
       │
       ├──→ Render (Backend)
       │     ├── Automatic deployments on push
       │     ├── Node.js runtime environment
       │     └── Environment variables configured
       │
       └──→ MongoDB Atlas (Database)
             ├── Cloud-hosted cluster
             ├── Automatic backups
             └── Network access whitelist

Frontend Deployment (Vercel)

Connect your GitHub repository to Vercel
Set the Root Directory to frontend
Set the Build Command to npm run build
Set the Output Directory to dist
Configure environment variables (VITE_API_URL, VITE_RAZORPAY_KEY_ID)

Backend Deployment (Render)

Create a new Web Service on Render
Connect your GitHub repository
Set the Root Directory to backend
Set the Build Command to npm install
Set the Start Command to npm start
Configure all environment variables

📖 For step-by-step deployment guide, see docs/deployment.md

📁 Project Structure

GoCineApp/
├── frontend/                   # React + Vite Frontend Application
│   ├── public/                 # Static assets
│   ├── src/
│   │   ├── assets/             # Images, icons, and media
│   │   ├── components/         # Reusable UI components
│   │   │   ├── hotelOwner/     # Admin panel components
│   │   │   │   ├── Admin.jsx       # Admin layout with routing
│   │   │   │   ├── Dashboard.jsx   # Analytics dashboard
│   │   │   │   ├── EditRoom.jsx    # Edit movie listing
│   │   │   │   ├── HotelReg.jsx    # Add new movie listing
│   │   │   │   ├── ListRooms.jsx   # Manage all listings
│   │   │   │   └── Sidebar.jsx     # Admin sidebar navigation
│   │   │   ├── Footer.jsx         # App footer
│   │   │   ├── Hero.jsx           # Landing hero section
│   │   │   ├── HotelCard.jsx      # Movie card component
│   │   │   ├── Login.jsx          # Login modal
│   │   │   ├── Navbar.jsx         # Navigation bar
│   │   │   ├── Register.jsx       # Registration modal
│   │   │   └── ...
│   │   ├── config/             # App configuration
│   │   │   └── api.js              # API base URL config
│   │   ├── pages/              # Page-level components
│   │   │   ├── Home.jsx            # Landing page
│   │   │   ├── AllRooms.jsx        # Movie listing page
│   │   │   ├── RoomDetails.jsx     # Movie details + booking
│   │   │   ├── Payment.jsx         # Payment processing
│   │   │   ├── Confirmation.jsx    # Booking confirmation + e-ticket
│   │   │   └── MyBookings.jsx      # User booking history
│   │   ├── App.jsx             # Root component with routing
│   │   └── main.jsx            # Application entry point
│   ├── package.json
│   └── vite.config.js
│
├── backend/                    # Node.js + Express Backend API
│   ├── configs/
│   │   └── db.js                   # MongoDB connection config
│   ├── models/
│   │   ├── user.js                 # User schema
│   │   ├── room.js                 # Movie/Room schema
│   │   └── booking.js              # Booking schema
│   ├── routes/
│   │   ├── auth.js                 # Authentication routes
│   │   ├── rooms.js                # Movie CRUD routes
│   │   ├── bookings.js             # Booking management routes
│   │   ├── payment.js              # Stripe payment routes
│   │   ├── razorpay.js             # Razorpay payment routes
│   │   └── admin.js                # Admin management routes
│   ├── server.js               # Express server entry point
│   └── package.json
│
├── docs/                       # Project documentation
│   ├── setup.md                    # Detailed setup guide
│   ├── deployment.md               # Deployment instructions
│   ├── api-overview.md             # API documentation
│   └── project-structure.md        # Architecture details
│
├── .github/                    # GitHub configuration
│   ├── workflows/                  # CI/CD pipelines
│   ├── ISSUE_TEMPLATE/             # Issue templates
│   └── PULL_REQUEST_TEMPLATE.md    # PR template
│
├── CONTRIBUTING.md             # Contribution guidelines
├── CODE_OF_CONDUCT.md          # Code of conduct
├── SECURITY.md                 # Security policy
├── CHANGELOG.md                # Version changelog
├── LICENSE                     # MIT License
└── README.md                   # This file

📖 For detailed architecture documentation, see docs/project-structure.md

🔮 Future Improvements

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

👤 Author

Eldho Aby

_{⭐ If you found this project helpful, please consider giving it a star!}

_{Built with ❤️ using the MERN Stack}

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.github		.github
backend		backend
docs		docs
frontend		frontend
screenshots		screenshots
.editorconfig		.editorconfig
.env.example		.env.example
.gitignore		.gitignore
.markdownlint.json		.markdownlint.json
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CODEOWNERS		CODEOWNERS
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md

Folders and files

Latest commit

History

Repository files navigation

🎬 GoCine — Movie Ticket Booking Application

A Production-Ready Full Stack MERN Application

📋 Table of Contents

🌐 Live Deployment

🏆 Why This Project Stands Out

🛠️ Tech Stack

🏛️ Architecture Overview

✨ Features

🎭 User Features

👨‍💼 Admin Features

🎨 UI/UX Features

📸 Screenshots

🏠 Home Page

🎬 Movie Listing

⭐ Testimonials & Footer

🚀 Getting Started

Prerequisites

Installation

Running Locally

⚙️ Environment Setup

Backend (backend/.env)

Frontend (frontend/.env)

📡 API Overview

🚢 Deployment

Deployment Architecture

Frontend Deployment (Vercel)

Backend Deployment (Render)

📁 Project Structure

🔮 Future Improvements

📄 License

👤 Author

About

Topics

Resources

License

Code of conduct

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Backend (`backend/.env`)

Frontend (`frontend/.env`)

Packages