Movie Explorer is a modern React web application that allows users to discover trending, top-rated, and even lesser-known movies via the TMDB (The Movie Database) API.
It features a modern, responsive UI built with Tailwind CSS and enriches each movie’s details with AI-generated summaries via OpenAI’s GPT-3.5 API. Users can seamlessly search for films, view detailed information (with AI bullet-point summaries), and create a personal watchlist of favourite movies.
- Search movies - Find films by title with instant search-as-you-type filtering and suggestions.
- AI-powered summaries - View concise bullet-point summaries for each movie, generated by an OpenAI GPT-3.5 model based on the movie’s description.
- Trending & top-rated - Browse current trending movies and top-rated classics fetched in real-time from the TMDB API.
- Advanced filtering - Narrow results by genre, release year, or minimum rating, and sort the list by popularity, release date, or rating.
- Watchlist - Save movies to your personal watchlist with one click. The watchlist is stored locally and can be searched, sorted, exported to JSON, or cleared as needed.
- Ratings at a glance - See star-based viewer ratings (from TMDB) on each movie card, giving quick insight into a film’s reception.
- Smooth UX - Enjoy fast client-side routing with React Router, infinite scrolling of results (with virtualisation for performance), and subtle UI animations/transitions for a more engaging experience.
| Layer | Tech |
|---|---|
| Frontend | React, React Router, Tailwind CSS |
| APIs | TMDB, OpenAI GPT-3.5 |
| Hosting | Vercel |
| Dev Tools | Vite, Axios |
| Package | Description |
|---|---|
react |
JavaScript library for building user interfaces |
react-dom |
Provides DOM-specific methods for React |
react-router-dom |
Declarative routing for React apps |
vite |
Fast development build tool and dev server |
| Package | Description |
|---|---|
tailwindcss |
Utility-first CSS framework for fast UI styling |
postcss |
Used with Tailwind for processing CSS |
autoprefixer |
Adds vendor prefixes to CSS automatically |
| API | Description |
|---|---|
| TMDB API | Fetches trending, top-rated, and detailed movie data |
| OpenAI API | Provides GPT-3.5 model for AI-generated movie summaries |
| Package | Description |
|---|---|
@vitejs/plugin-react |
Official React plugin for Vite |
eslint (optional) |
Linter for catching JavaScript errors |
movie_explorer/
├── client/
│ ├── src/
│ │ ├── components/ # SearchBar, MovieCard, etc.
│ │ ├── pages/ # Home.jsx, MovieDetail.jsx
│ │ ├── services/ # TMDB and OpenAI logic
│ │ ├── styles/ # Tailwind global styles
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── index.html
| └── .env # VITE_TMDB_API_KEY & VITE_OPENAI_API_KEY
Create a .env file inside the client/ folder with:
VITE_TMDB_API_KEY=your_tmdb_api_key
VITE_OPENAI_API_KEY=your_openai_api_key
Deployed on Vercel
➤ Live Demo
- Authenticated user accounts
- Save ratings and watchlist to a backend
- Custom movie recommendations
- Infinite scroll on search results
- Dark/light theme toggle
- Add option to view the trailer for the movie