CineHub is a movie and TV show discovery web application built as part of an internship assignment.
It allows users to browse, search, sort, and filter movies and TV shows using real-world data from the TMDB API.
- Browse popular movies
- Search movies by title
- Filter movies by genre
- Sort by rating and release date
- Movie detail pages with cast and overview
- Browse trending and popular TV shows
- View top-rated TV shows
- Search TV shows
- Filter by genre
- TV show detail pages
- Modern dark-themed interface
- Responsive design
- Animated hover effects on movie and TV cards
- Clean navigation with App Router
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS
- TMDB API
- Vercel-ready deployment
app/ ├─ page.tsx # Home page ├─ movies/ # Movies routes ├─ tv/ # TV shows routes components/ ├─ Navbar.tsx ├─ HomeCarousel.tsx lib/ ├─ tmdb.ts # TMDB API helper functions
Follow these steps in order:
git clone <your-repository-url>
cd cinehub
npm installTMDB_API_KEY=your_tmdb_api_key_here
---npm run dev
Open your browser and go to: http://localhost:3000
- Dataset: Movies and TV Shows metadata
- Source: The Movie Database (TMDB)
- URL: https://www.themoviedb.org/
- Data includes: title, genre, rating, release date, posters, and cast
Data was fetched using the official TMDB REST API.
No scraping was performed. All data is retrieved dynamically at runtime using secure API requests.
- Netflix & IMDb-style content layout
- Card-based UI for discoverability
- Focus on clean typography and dark theme for readability
- “Design a clean movie discovery UI using Next.js and Tailwind CSS”
- “Create a reusable TMDB API helper with error handling in TypeScript”
- “Improve UX with hover animations for media cards”
- Add user authentication and watchlists
- Improve homepage carousel animations
- Add pagination or infinite scrolling
- Performance optimizations and caching improvements