Movie Finder

Project Overview

The Movie Finder project is a full-stack web application built using the MERN stack (MongoDB, Express.js, React.js, Node.js) that allows users to search for movies, view detailed information, and manage their favorite films in a personalized list.

It uses the OMDb (Open Movie Database) API to fetch real-time movie data such as posters, release year, ratings, plot, and cast. Users can add or remove movies from their favorites list, which is stored securely in a MongoDB database.

The app provides a simple, responsive interface with seamless backend integration, making it a great example of how to consume third-party APIs within a modern full-stack web project.

Screenshots

Key Features

Search Movies: Users can search for movies by title and instantly get results fetched from the OMDb API.
Movie Details: View full movie information — including poster, plot, ratings, release date, and cast.
Add to Favorites: Save your favorite movies to your personal list with one click.
Remove from Favorites: Instantly remove a movie from your favorites list.
Dynamic API Integration: Uses OMDb API to fetch live movie data through the backend.
MongoDB Database: Stores user favorites persistently.
Responsive UI: Built with React and styled for smooth performance across devices.
Error Handling & Validation: Handles invalid searches, missing API keys, and backend errors gracefully.

Functionality

Search Movies: Sends user input from frontend → backend → OMDb API → returns movie results.
View Details: Fetches detailed data (plot, ratings, year) by IMDB ID.
Add Favorite: Saves selected movie (title, poster, imdbID) in MongoDB via backend API.
Remove Favorite: Deletes movie entry from MongoDB favorites collection.
Display Favorites: Fetches and displays all stored favorites from the database.

Technology Used

Frotnend:
- React.js – UI development
- Axios – API calls
- React Hooks (useState, useEffect) – state management
- CSS / Tailwind / Bootstrap (optional) – responsive design
Backend:
- Node.js – server environment
- Express.js – REST API handling
- Mongoose – MongoDB ODM for schema & queries
- dotenv – environment variable management
- Axios – to fetch OMDb API data server-side
- MongoDB – to store favorite movies

Why This Project Is Useful

Real-world Integration: Demonstrates how to connect a backend with an external API (OMDb).
Full-Stack Skills: Covers all aspects of MERN — frontend UI, backend APIs, database storage, and third-party integration.
Portfolio-Ready: Clean, modern project to showcase full-stack capabilities.
Practical Use Case: Users can explore, learn, and manage their movie preferences interactively.
Customizable: Can be expanded with user authentication, watchlists, or rating features.

Deployment and Environment Setup

Environment Variables Setup:
- backend/.env
  - PORT: 3000
  - MONGO_URI: mongodb_url_string
  - JWT_SECRET: your_jwt_secret_key_here (if needed)
- frontend/.env
  - VITE_API_URL: backend_url
Deployment Overview:
- Render or Railway for backend hosting
- Vercel or Netlify for frontend hosting
- MongoDB Atlas for the database
Backend Deployment:
- Push your code to GitHub.
- Go to Render.com or Railway.app.
- Create a new Web Service and connect your GitHub repository.
- Choose “backend/” as the root directory.
- Add the following environment variables on Render:
- PORT=10000
- MONGO_URI=your MongoDB Atlas URI
- JWT_SECRET=your JWT secret
- Start command: npm start (Ensure your backend/package.json includes “start”: “node server.js”)
- After deployment, note your backend URL, e.g. https://your-backend-name.onrender.com
Frontend Deployment:
- Go to Vercel.com or Netlify.com.
- Create a new project and connect the GitHub repo.
- Select the “frontend/” folder as root.
- In environment variables, set:
- VITE_API_URL=https://your-backend-domain.com/api (or REACT_APP_API_URL if using CRA)
- Deploy.
MongoDB Atlas Setup:
- Go to https://cloud.mongodb.com
- Create a free cluster.
- Add your current IP address in Network Access.
- Create a database user and password.
- Copy the connection string and replace username, password, and database name in MONGO_URI in backend/.env