🎬 MovWatch

A full-stack MERN movie ticket booking platform with secure authentication, online payments, trailer playback, and automated email notifications.

🌐 Live Demo: mov-watch.vercel.app

---

✨ Features

• 🔐 Authentication — secure sign-up/login and session management via Clerk
• 🎞️ Movie browsing & trailers — in-app trailer playback
• 💳 Online payments — checkout support Stripe
• ⚙️ Background jobs — event-driven workflows (e.g. booking reminders, cleanup tasks) powered by Inngest
• 🪝 Webhook verification — secure handling of incoming webhooks via Svix
• ☁️ Media management — image uploads and delivery via Cloudinary
• 📸 Ticket/screenshot export — capture bookings or pages as images (html-to-image / html2canvas)
• 🔔 Toast notifications — instant UI feedback
• 📱 Responsive UI — built with Tailwind CSS v4

---

🛠️ Tech Stack

Frontend (/client)

Technology	Purpose
React 19	UI framework
Vite 7	Build tool & dev server
Tailwind CSS v4	Utility-first styling
React Router v7	Client-side routing
Clerk (@clerk/clerk-react)	Authentication UI & session handling
Axios	HTTP client for API calls
React Player	Movie trailer / video playback
html-to-image / html2canvas	Export DOM elements (e.g. tickets) as images
Lucide React	Icon library
React Hot Toast	Toast notifications

Backend (/server)

Technology	Purpose
Node.js + Express 5	REST API server
MongoDB + Mongoose	Database & ODM
Clerk (@clerk/express)	Server-side auth middleware
Stripe	Payment processing
Cloudinary	Image/media storage & delivery
Inngest	Event-driven background jobs & scheduled functions
Svix	Webhook signature verification
CORS	Cross-origin request handling
dotenv	Environment variable management
Nodemon (dev)	Auto-restart during development

Deployment

• Vercel — hosting for both frontend and/or serverless backend functions

---

🚀 Getting Started

Prerequisites

• Node.js (v20.19+ recommended, per Vite 7 / Mongoose 9 engine requirements)
• MongoDB instance (local or Atlas)
• Accounts/API keys for: Clerk, Stripe, Cloudinary, Inngest

1. Clone the repository

git clone https://github.com/Osagani31/MovWatch-MERN.git
cd MovWatch-MERN

2. Backend setup

cd server
npm install

Create a .env file in /server:

PORT=5000
MONGODB_URI=your_mongodb_connection_string

# Clerk
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_WEBHOOK_SECRET=your_svix_webhook_secret

# Stripe
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Inngest
INNGEST_EVENT_KEY=your_inngest_event_key
INNGEST_SIGNING_KEY=your_inngest_signing_key

Start the backend server:

npm run dev

3. Frontend setup

cd client
npm install

Create a .env file in /client:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_RAZORPAY_KEY_ID=your_razorpay_key_id
VITE_BASE_URL=http://localhost:5000

Start the dev server:

npm run dev

The app will be available at http://localhost:5173

---

📦 Available Scripts

Frontend

Command	Description
npm run dev	Start development server with HMR
npm run build	Create an optimized production build
npm run preview	Preview the production build locally
npm run lint	Run ESLint

Backend

Command	Description
npm run dev	Start server with Nodemon (auto-restart)
npm start	Start server in production mode

---

🔒 Authentication Flow

1. User signs up or logs in through Clerk's hosted/embedded auth UI
2. Clerk issues a session token, verified server-side by @clerk/express middleware on protected routes
3. User events (creation, updates) are pushed to the backend via Clerk webhooks, verified using Svix

💳 Payments Flow

1. User selects a movie/showtime and proceeds to checkout
2. Payment is processed via Stripe (server-side), depending on configuration
3. On successful payment, the backend confirms the booking and triggers a confirmation notification

⚙️ Background Jobs

• Inngest handles asynchronous, event-driven tasks — such as sending booking confirmations, reminders, or cleaning up unpaid/expired bookings — decoupled from the main request/response cycle.

---

🚧 Project Status

• ✅ Deployed: mov-watch.vercel.app

👩‍💻 Author

Osagani Perera Second-Year Computer Science Undergraduate Passionate about Full-Stack Development and UI/UX

---

📄 License

This project is open-source and available for learning, research, and academic purposes.