A stunning, responsive movie discovery platform with live trailer playback — built with modern web technologies.
🔍 Instant Movie Search
Find movies instantly by title — results fetched live from the OMDB API with poster, title, year, and type.
Watch official trailers inline on the Movie Details page or in a full-screen dedicated Trailer Page — powered by the YouTube Data API v3 with a native iframe embed.
🔥 Trending This Week
Home page shows a horizontally scrollable carousel of trending movies fetched from the TMDb API, complete with rating badges.
📄 Detailed Movie Insights
Click any movie to see its full details: Plot, Cast, Director, Writer, Genre, Runtime, Awards, Box Office, and all ratings from IMDb, Rotten Tomatoes & Metacritic.
🌗 Dark & Light Mode
Seamlessly switch between Dark and Light themes — preference is applied instantly across all pages.
❤️ Watchlist / Favorites
Save movies with a single heart click from any card or the details page. Your watchlist is persisted in localStorage — it survives browser refreshes. A badge on the Navbar always shows how many movies you've saved.
No results found? Trailer unavailable? Every state is handled with a friendly UI and a fallback YouTube search link.
📱 Fully Responsive
Optimized for all devices — large desktops, tablets, and mobile phones.
| Category | Technology | Description |
|---|---|---|
| Frontend Framework | ⚛️ React 19 (Vite) | Fast, component-based UI |
| State Management | 🔄 Redux Toolkit | Async thunks for API calls |
| Styling | 🎨 Tailwind CSS v3 | Utility-first CSS framework |
| Routing | 🛣️ React Router DOM v7 | Client-side routing |
| HTTP Client | 📡 Axios | Promise-based HTTP requests |
| Movie Data | 🎥 OMDB API | Search & detailed movie info |
| Trending Data | 📈 TMDb API | Weekly trending movies |
| Trailer Search | 🔎 YouTube Data API v3 | Fetch official trailer video IDs |
| Icons | 🎭 Lucide React | Beautiful & consistent icons |
src/
├── 📂 app/ # Redux store configuration
├── 📂 components/
│ ├── Navbar.jsx # Top navbar with search, watchlist & theme toggle
│ ├── SearchBar.jsx # Controlled search input
│ ├── MovieCard.jsx # Card with poster, rating badge & ▶ Trailer hover
│ ├── MovieGrid.jsx # Responsive grid of MovieCards
│ ├── TrailerPlayer.jsx # ★ NEW — iframe trailer embed with fallback
│ ├── TrendingSection.jsx # ★ NEW — TMDb trending horizontal carousel
│ └── Loader.jsx # Loading spinner
├── 📂 features/
│ ├── 📂 movies/ # Search, details, trailer & trending Redux slice
│ ├── 📂 theme/ # Dark/Light mode slice
│ └── 📂 watchlist/ # Watchlist slice (localStorage persistence)
├── 📂 pages/
│ ├── Home.jsx # Search results + popular + trending section
│ ├── MovieDetails.jsx # Full details + inline trailer + all ratings
│ ├── TrailerPage.jsx # ★ NEW — Full-screen trailer with blurred backdrop
│ └── WatchlistPage.jsx # Saved movies watchlist
└── 📂 services/
└── api.js # OMDB, TMDb & YouTube API endpointsgit clone <your-repo-url>
cd movie-search-appnpm installThe following keys are already configured in src/services/api.js:
| API | Key Variable | Where to get one |
|---|---|---|
| OMDB | OMDB_API_KEY |
omdbapi.com |
| TMDb | TMDB_API_KEY |
themoviedb.org |
| YouTube | YOUTUBE_API_KEY |
Google Cloud Console |
Note: For production apps, move API keys to environment variables (
.envfile).
npm run devOpen your browser at http://localhost:5173
| Route | Page | Description |
|---|---|---|
/ |
Home | Search bar, popular movies & trending carousel |
/movie/:id |
Movie Details | Full info, ratings, and inline trailer player |
/trailer/:id |
Trailer Page | Full-screen YouTube trailer with blurred backdrop |
/watchlist |
Watchlist | All saved favourite movies |
This project is open source and available under the MIT License.