🎬 OMDB Movie Explorer

A full-stack movie discovery platform built using Spring Boot, React, and Tailwind CSS, powered by the OMDB API.
Search for movies, explore detailed descriptions and save your favorites—all inside a clean, modern, responsive UI.

---

Live Deployed Link: https://cinemaexplorer-cx3n.onrender.com/

Preview

Home, Search Bar and Favourite

### Search Result ### Single Content Result ### Add to favourites ### Footer

🚀 Tech Stack

Frontend

• ⚛️ React (Vite)
• 🎨 Tailwind CSS
• 🔄 Axios / Fetch API
• 🧩 Modular Component Architecture

Backend

• ☕ Spring Boot 4.0.0
• 🌐 RESTful API
• ⚡ Caching with Caffeine (Redis)
• 🔒 Secure API key via environment variables
• 🛠️ Maven + Java 17+

External API

• 🎥 OMDB API (Open Movie Database)

---

📌 Features

🔍 Search Dashboard

• Search movies/series using title input
• Automatic URL encoding
• Fast, cached API responses

🎞️ Results Grid

• Movie posters
• Titles & Release Years
• Fully responsive layout

🎬 Detailed Movie View

• Plot, Genre, Director, Writer
• Actor list
• Ratings (IMDB, Rotten Tomatoes, Metacritic)
• High-quality poster
• Modern modal design

⭐ Favorites

• Add/remove movies to favorites
• Persisted using localStorage
• Horizontal Favorites preview bar

📱 Fully Responsive

• Optimized for:
  • Mobile
  • Tablet
  • Desktop

---

🔄 Workflow (How It Works)

1. User searches for a movie title
2. Frontend calls backend:

   GET /api/search?title=name
   

3. Backend encodes the title and forwards the request to OMDB API
4. OMDB returns movie list → displayed in grid
5. Clicking a movie fetches details:

   GET /api/movie/{imdbID}
   

6. Movie details shown in a modal
7. User may add movie to Favorites
8. Favorites saved locally and shown in a horizontal preview bar

---

🧩 Backend API Endpoints

Search Movies

GET /api/search?title={movie-title}

Get Movie Details

GET /api/movie/{imdbID}

---

🔑 OMDB API Key Setup

Generate a free OMDB API key here:
🔗 https://www.omdbapi.com/apikey.aspx

Set environment variable:

Windows (PowerShell)

$env:OMDB_API_KEY="your_api_key"

Mac/Linux

export OMDB_API_KEY=your_api_key

---

⚙️ Running the Project

Backend

cd backend
mvn spring-boot:run

Frontend

cd frontend
npm install
npm run dev

Open in browser:

http://localhost:5173/

---

🗂️ Folder Structure

omdb-movie-explorer/
│
├── backend/
│   ├── src/main/java/com/omdb/...
│   ├── resources/application.properties
│   └── pom.xml
│
└── frontend/
    ├── src/
    │   ├── components/
    │   ├── api.js
    │   └── App.jsx
    ├── index.html
    └── package.json

---

🚀 Future Enhancements

• 🔐 Authentication + JWT
• 💾 Save favorites in database
• 🌓 Light/Light mode
• 🎞️ Trending Movies section
• ⚡ Pagination for search results

---

---

📜 License

This project is developed by Gaurav Kumar and have licensed under the MIT License.