🍿 THE ULTIMATE - Movie & TV Platform

THE ULTIMATE is a comprehensive, full-stack MERN (MongoDB, Express, React, Node.js) application designed for movie and TV enthusiasts. Powered by the TMDB API, it offers an immersive, premium, and highly interactive experience to discover, explore, and track cinematic content seamlessly.

---

✨ Key Features

This platform goes beyond basic movie browsing, offering advanced features to curate and tailor the user experience:

• 🔐 User Authentication: Secure registration, login, and JWT-based session management.
• 🎥 Discovery Engine: Advanced filtering by genre, year, rating, and media type to effortlessly find what to watch next.
• 🌍 Cinematic Universes: Automatically curated, chronological watch-orders for massive movie franchises (e.g., Marvel, Star Wars, DC) driven by trending TMDB data.
• 🎰 Movie Roulette (Surprise Me): A sleek, slot-machine-style random movie generator for when you don't know what to watch.
• 🏆 Hall of Fame: Discover the highest-rated and critically acclaimed movies of each decade (Classics to 2020s).
• 📡 Streaming Networks Hub: Browse top series categorized by major streaming providers (Netflix, HBO, Disney+, etc.).
• 📅 Upcoming Theatrical Calendar: A live tracker for upcoming cinema releases with dynamic countdown badges.
• ⭐ Favorites & Watch History: Logged-in users can save specific movies/shows and maintain a history of viewed items.
• 👤 Hollywood Actor's Hub: Detailed profiles for cast and crew, showing biographies and full filmographies.
• 📱 Fully Responsive UI: Carefully crafted with Tailwind CSS to offer a seamless, glassmorphic layout across mobile, tablet, and desktop devices.
• 🛠️ Admin Panel: Dedicated section for administrators to oversee platform activity.

---

🛠️ Tech Stack

Frontend

• React.js (via Vite)
• React Router v6 (Client-side routing)
• Redux Toolkit (State management)
• Tailwind CSS (Styling & layout)
• Axios (API requests)
• Remix Icon / React Player (Icons & media playback)

Backend

• Node.js & Express.js (Server & API logic)
• MongoDB via Mongoose (Database)
• JSON Web Tokens (JWT) (Secure authentication)
• Bcrypt.js (Password hashing)
• CORS & Dotenv (Configuration & security)

External APIs

• TMDB API (The Movie Database): Deep integration for movies, TV series, actors, trailers, providers, and more.

---

📂 Project Structure

This is a monorepo-style structure designed for simple full-stack deployment.

THE-ULTIMATE/
│
├── frontend/             # React (Vite) Frontend
│   ├── src/
│   │   ├── components/   # UI Components & Pages
│   │   ├── store/        # Redux store & slices
│   │   └── utils/        # Axios configurations
│   ├── index.html
│   ├── tailwind.config.js
│   ├── vite.config.js
│   └── vercel.json       # Vercel configuration for SPA
│
├── backend/              # Node.js/Express Backend
│   ├── api/              # Vercel Serverless entry point
│   ├── lib/              # database connections
│   ├── models/           # Mongoose schemas (User, History, etc.)
│   ├── routes/           # API Endpoints (Auth, Favorites, History)
│   ├── server.js         # Main express server
│   └── vercel.json       # Vercel configuration for API
│
└── package.json          # Root scripts for single-server build (Render/Railway)

---

🚀 Installation & Local Development

Prerequisites

Make sure you have Node.js (v18+) and a MongoDB Atlas cluster set up.

1. Clone the repository

git clone https://github.com/patelharsh80874/THE-ULTIMATE.git
cd THE-ULTIMATE

2. Install Dependencies

Run the unified install script from the root folder to install packages for both backend and frontend:

npm run install-all

3. Setup Environment Variables

Backend (backend/.env):

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRE=7d
NODE_ENV=development

Frontend (frontend/.env.development):

VITE_BACKEND_URL=http://localhost:5000/api
VITE_TMDB_TOKEN=your_tmdb_api_read_access_token_here

4. Run Locally

You will need two terminals to run the app locally:

Terminal 1 (Backend):

cd backend
npm run dev

Terminal 2 (Frontend):

cd frontend
npm run dev

Visit http://localhost:5173 in your browser.

---

🌐 Deployment Guidelines

The project is fully optimized for continuous deployment on modern platforms.

Option A: Vercel (Split Deployment)

Deploy the frontend and backend as two separate projects in Vercel.

1. Backend Project: Set root to backend/. Ensure environment variables (MONGO_URI, JWT_SECRET) are configured.
2. Frontend Project: Set root to frontend/. Add the VITE_BACKEND_URL variable pointing to your deployed Vercel backend URL.

Option B: Render / Railway (Single Server)

Use the unified scripts in the root package.json to deploy as a single app where the Express backend serves the React frontend statically.

1. Set the build command to: npm run render-build
2. Set the start command to: npm start
3. Make sure to define VITE_BACKEND_URL=/api in the frontend production environment.

---

📄 License

This project is for educational and portfolio purposes. Data is provided by TMDB. Note: This product uses the TMDB API but is not endorsed or certified by TMDB.