A movies & TV series browsing app powered by The Movie Database (TMDB). Discover what’s trending, filter by genre, search titles, and open rich detail modals with cast and trailers.
- Trending — Daily trending movies and TV shows in one feed
- Movies & TV Series — Browse popular titles with multi-select genre chips
- Search — Look up movies or series via dedicated tabs
- My List — Save favorites locally with a heart on any card (persisted in the browser)
- Content cards — Poster, title, media type, release date, and rating badge
- Detail modal — Overview, tagline, cast carousel, YouTube trailer, and add/remove from My List
- Loading skeletons — Placeholder cards while results load
- Pagination — Navigate large result sets across all sections
- Mobile-friendly nav — Fixed bottom bar for Trending, Movies, TV, Search, and My List
| Layer | Tools |
|---|---|
| UI | React 18, TypeScript, Material-UI v4 |
| Routing | React Router v6 |
| Data | Axios + TMDB API |
| Extras | react-alice-carousel |
| Tooling | Vite, TypeScript, pnpm |
- Node.js 18+
- pnpm
- A free TMDB API key
git clone <your-repo-url>
cd Entertainment-hub-tsx
pnpm installCreate a .env file in the project root:
VITE_API_KEY=your_tmdb_api_key_herepnpm startApp runs at http://localhost:3000.
pnpm buildsrc/
├── components/ # Header, nav, cards, genres, modal, carousel, pagination, skeletons
├── config/ # API URLs, types, routes, image helpers
├── context/ # Watchlist provider (localStorage)
├── Hooks/ # Genre ID helper for discover queries
├── pages/ # Trending, Movies, TV Series, Search, My List
├── App.tsx
└── index.tsx
| Route | Description |
|---|---|
/ |
Daily trending movies & TV |
/movies |
Discover movies with genre filters |
/tvseries |
Discover TV series with genre filters |
/search |
Search movies or TV series |
/watchlist |
Local My List of saved titles |
- Film & TV data from TMDB
- This product uses the TMDB API but is not endorsed or certified by TMDB