🎬 StreamScout

StreamScout is a movie search engine that helps you find where to watch your favorite movies across different streaming platforms. It fetches movie metadata from OMDb API and OTT provider information from TMDb API, merges the results, caches them for faster subsequent searches, and displays everything in a beautiful React UI.

• 🔍 Movie Search: Search any movie by title
• 📊 Rich Metadata: Get details like plot, cast, director, rating, year, genre
• 📺 OTT Providers: See where the movie is available (Netflix, Prime Video, etc.)
• ⚡ Caching: In-memory cache for faster repeated searches
• 🎨 Modern UI: Clean, responsive design with TailwindCSS
• 🚀 Fast: Built with Vite for lightning-fast development

streamscout/
├── backend/
│   ├── services/
│   │   ├── omdb.js          # OMDb API integration
│   │   └── tmdb.js          # TMDb API integration
│   ├── utils/
│   │   └── merge.js         # Utility to merge API results
│   ├── server.js            # Express server with /search endpoint
│   ├── package.json
│   ├── .env.example
│   └── .gitignore
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── SearchBar.jsx       # Search input component
│   │   │   ├── ResultCard.jsx      # Movie details card
│   │   │   ├── Providers.jsx       # OTT providers display
│   │   │   └── Recommendations.jsx # Placeholder recommendations
│   │   ├── App.jsx          # Main app component
│   │   ├── main.jsx         # React entry point
│   │   └── index.css        # Global styles
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   ├── postcss.config.js
│   └── .gitignore
│
└── README.md

• Node.js (v18 or higher)
• npm (comes with Node.js)
• OMDb API Key (free): Get it from http://www.omdbapi.com/apikey.aspx
• TMDb API Key (free): Get it from https://www.themoviedb.org/settings/api

cd streamscout

# Navigate to backend folder
cd backend

# Install dependencies
npm install

# Create .env file from example
copy .env.example .env

# Edit .env and add your API keys:
# OMDB_API_KEY=your_omdb_key_here
# TMDB_API_KEY=your_tmdb_key_here
# PORT=5000

# Navigate to frontend folder (from project root)
cd frontend

# Install dependencies
npm install

You need to run both backend and frontend in separate terminal windows.

cd backend
npm run dev

✅ Backend should start on http://localhost:5000

cd frontend
npm run dev

✅ Frontend should open automatically on http://localhost:3000

1. Open your browser at http://localhost:3000
2. Type a movie name in the search bar (e.g., "Inception", "Avatar")
3. Click Search or press Enter
4. View movie details, ratings, and streaming providers
5. Check where you can watch the movie (Netflix, Prime, etc.)

Search for a movie.

Example:

http://localhost:5000/search?query=inception

Response:

{
  "title": "Inception",
  "poster": "https://...",
  "year": "2010",
  "rating": "8.8",
  "genre": "Action, Sci-Fi, Thriller",
  "plot": "A thief who steals corporate secrets...",
  "director": "Christopher Nolan",
  "actors": "Leonardo DiCaprio, Joseph Gordon-Levitt...",
  "runtime": "148 min",
  "providers": [
    {
      "name": "Netflix",
      "logo": "https://...",
      "type": "stream",
      "link": "..."
    }
  ],
  "cached": false
}

Get cache statistics (for debugging).

Clear all cached results.

• Node.js - JavaScript runtime
• Express - Web framework
• Axios - HTTP client for API calls
• node-cache - In-memory caching
• dotenv - Environment variable management
• CORS - Cross-origin resource sharing

• React - UI library
• Vite - Build tool and dev server
• TailwindCSS - Utility-first CSS framework
• Axios - API calls to backend

• OMDb API - Movie metadata
• TMDb API - Streaming provider data

User enters movie name
        ↓
Frontend sends request to /search endpoint
        ↓
Backend checks cache
        ↓
    [Cache Hit?]
    ↙         ↘
  YES         NO
   ↓           ↓
Return      Fetch from APIs
cached    (OMDb + TMDb in parallel)
result          ↓
           Merge results
                ↓
           Cache result
                ↓
          Return to frontend
                ↓
        Display in UI

✅ Express server with REST API
✅ OMDb service for movie metadata
✅ TMDb service for streaming providers
✅ Merge utility to combine results
✅ In-memory caching with node-cache
✅ Error handling
✅ CORS enabled
✅ Environment variable configuration

✅ React with functional components
✅ SearchBar with real-time input
✅ ResultCard with movie details
✅ Providers component showing OTT platforms
✅ Recommendations carousel (placeholder)
✅ Loading animations
✅ Error handling and display
✅ Responsive design
✅ TailwindCSS styling

• Add real movie recommendations using AI
• Support for TV shows
• User authentication and watchlist
• Multiple region support for providers
• Advanced filters (genre, year, rating)
• Trailer integration
• Database for persistent caching
• Deployment to production

• Check if port 5000 is already in use
• Verify API keys in .env file
• Run npm install again

• Check if port 3000 is already in use
• Run npm install again
• Clear browser cache

• Make sure backend is running on port 5000
• Check firewall settings

• Try a different movie title
• Check if OMDb API key is valid

• TMDb might not have provider data for that movie
• Check if TMDb API key is valid

This is an MVP project for demonstration purposes.

• OMDb API - http://www.omdbapi.com/
• TMDb API - https://www.themoviedb.org/

For issues or questions, please create an issue in the repository.

Happy Streaming! 🎬🍿