🎬 CineMatch

A cinematic movie and series discovery platform built with Next.js 15 and TypeScript, powered by the TMDB API. Browse trending titles, explore by genre, search with filters, and save titles to your personal watchlist.

---

✨ Features

• 🔥 Trending Today — Live trending movies and series from TMDB
• ⭐ Top Rated — Highest rated titles updated in real time
• 🎭 Genre Browse — Visual genre grid with colour-coded cards
• 🔍 Search & Filter — Search by title, filter by type (Movie/Series) and genre
• 🎬 Movie Detail Pages — Full page per title with backdrop, cast, trailer link, similar movies, and production details
• 🔖 Watchlist — Save and manage titles across the app (in-memory, per session)
• 💀 Skeleton Loading — Shimmer placeholders while data fetches
• 📱 Responsive Layout — Works across desktop and tablet

---

🗂 Project Structure

cinematch/
├── app/
│   ├── layout.tsx           # Root layout, navbar, footer, context providers
│   ├── page.tsx             # Home page (Trending, Top Rated, Genre Browse)
│   ├── globals.css          # Global styles, shimmer animation
│   ├── search/
│   │   └── page.tsx         # Search & filter page
│   ├── watchlist/
│   │   └── page.tsx         # Saved titles page
│   └── movie/
│       └── [id]/
│           └── page.tsx     # Dynamic movie detail page
├── components/
│   ├── Navbar.tsx           # Sticky navbar with search, links, watchlist badge
│   ├── Footer.tsx           # Footer with links and TMDB credit
│   ├── MovieCard.tsx        # Poster card with hover, badge, bookmark
│   ├── SkeletonCard.tsx     # Shimmer loading placeholder
│   ├── HorizontalRow.tsx    # Horizontal scrollable movie row
│   ├── Hero.tsx             # Homepage hero section with live posters
│   └── GenreBrowse.tsx      # Colour-coded genre grid
├── context/
│   └── WatchlistContext.tsx # Global watchlist state (React Context)
├── data/
│   └── movies.ts            # TMDB config, genre map, type converter
├── hooks/
│   ├── useTMDB.ts           # Hooks for rows and search
│   └── useMovieDetail.ts    # Hook for single movie detail + cast + videos
├── types/
│   └── movie.ts             # Shared Movie type
├── next.config.ts           # Image domain allowlist
└── tailwind.config.ts

---

🚀 Getting Started

1. Clone and install

git clone https://github.com/your-username/cinematch.git
cd cinematch
npm install

2. Set up your environment variable

Create a .env.local file in the root of the project:

touch .env.local

Add your TMDB API key:

NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key_here

Get a free API key at themoviedb.org/settings/api

3. Run the dev server

npm run dev

Open http://localhost:3000.

---

🔑 Environment Variables

Variable	Description	Required
NEXT_PUBLIC_TMDB_API_KEY	Your TMDB v3 API key	✅ Yes

---

🛠 Tech Stack

Tool	Purpose
Next.js 15	React framework with App Router
TypeScript	Type safety
Tailwind CSS	Utility styling
TMDB API	Movie & series data
next/image	Optimised image loading

---

📄 License

MIT — free to use and modify.

---

Data provided by The Movie Database (TMDB). This product uses the TMDB API but is not endorsed or certified by TMDB.