CineHub 🎬

A modern movie and TV show discovery web application built with Next.js, React, TypeScript, Tailwind CSS, and the TMDB API.

CineHub lets users discover movies and TV shows using live data from The Movie Database (TMDB), with search, filtering, sorting, ratings, cast information, and dedicated detail pages.

🌐 Live Demo

✨ Features

🎥 Movies

• Browse trending and popular movies
• Search movies by title
• Filter movies by genre
• Sort and discover movies using TMDB data
• View movie details, ratings, overview, and cast

📺 TV Shows

• Browse trending, popular, and top-rated TV shows
• Search TV shows
• Filter by genre
• View dedicated TV show detail pages

🎨 User Experience

• Modern dark-themed interface
• Responsive layouts for different screen sizes
• Interactive movie and TV cards
• Homepage carousel
• Clean navigation using the Next.js App Router

🛠️ Tech Stack

Technology	Purpose
Next.js 16	Application framework and App Router
React 19	User interface
TypeScript	Type-safe development
Tailwind CSS	Styling and responsive design
TMDB API	Live movie and TV show data

🧠 How It Works

CineHub retrieves movie and TV metadata dynamically from the TMDB REST API. The application uses reusable TypeScript helpers for API requests and supports movie discovery, search, genres, details, credits, and TV data.

The TMDB integration also includes request error handling, retry logic, timeouts, and production revalidation to improve reliability.

📂 Project Structure

cinehub/
├── app/                 # Next.js App Router pages
│   ├── movies/          # Movie routes and detail pages
│   ├── tv/              # TV show routes and detail pages
│   └── page.tsx         # Homepage
├── components/          # Reusable UI components
├── lib/
│   └── tmdb.ts          # TMDB API helpers and TypeScript types
├── public/              # Static assets
├── screenshots/         # Project screenshots
└── README.md

⚙️ Run Locally

1. Clone the repository

git clone https://github.com/saadrahmans/cinehub.git
cd cinehub

2. Install dependencies

npm install

3. Configure the TMDB API key

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

TMDB_API_KEY=your_tmdb_api_key_here

You will need your own TMDB API key to run the application locally.

4. Start the development server

npm run dev

5. Open CineHub

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

📸 Screenshots

🏠 Home

🔥 Trending Movies

🎥 Movie Discovery

📺 TV Show Discovery

🎬 Movie Details

📊 Data Source

CineHub uses movie and TV metadata from The Movie Database (TMDB), including titles, genres, ratings, release dates, posters, overviews, and cast information.

No web scraping is used; application data is retrieved through the TMDB API.

📚 What I Learned

Building CineHub helped me gain practical experience with:

• Building applications with Next.js and the App Router
• Working with React and TypeScript
• Integrating a third-party REST API
• Handling asynchronous API requests and errors
• Creating reusable API helper functions and typed data models
• Building responsive interfaces with Tailwind CSS
• Structuring a modern web application

🚀 Future Improvements

• User authentication
• Personal watchlists and favorites
• Pagination or infinite scrolling
• Improved caching and performance optimization
• Enhanced homepage animations
• More advanced discovery filters

👨‍💻 Author

Mohammad Saad ur Rahman

• GitHub: saadrahmans
• LinkedIn: Mohammad Saad ur Rahman

---

CineHub was built as a hands-on project to strengthen my experience with modern web development, API integration, and TypeScript.