A cinematic movie and TV discovery dashboard built with Vite and React. Search TMDB content, browse featured movies, filter by media type, and open rich detail drawers with cast, metadata, trailers, and continue-watching UI.
https://farzanuddin.github.io/current
The goal of this project was to build a polished streaming-dashboard interface while exploring a few frontend concepts: a dark glassy UI with responsive card-mode layouts and live requests to the TMDB API,
- Live TMDB data — fetches trending, discovery, search, details, credits, videos, and images
- Movie details drawer — opens a right-side panel with hero artwork, metadata, genres, overview, cast, and trailer actions
- Responsive layout — mobile hamburger navigation, sticky top search, and contained card mode on larger screens
| Technology | Version | Role |
|---|---|---|
| React | ^18.2.0 | UI framework |
| Vite | ^5.0.8 | Build tool & dev server |
| Styled Components | ^6.1.8 | Component-scoped styling |
| Axios | ^1.6.5 | TMDB API requests |
| Ant Design Icons | ^5.2.6 | Icon system |
| React Modern Drawer | ^1.2.2 | Slide-out drawer UI |
| PropTypes | ^15.8.1 | Runtime prop type checking |
This app uses a TMDB bearer token from VITE_TMDB_AUTH_KEY. Because this is a browser-only app, the
token is included in client-side requests and should not be treated as a private secret.
-
Install dependencies:
npm install
-
Create your local environment file:
cp .env.example .env
Open
.envand replaceyour_tmdb_bearer_tokenwith a TMDB API bearer token. -
Start the dev server:
npm run dev