MovieDB - Movie Discovery Platform

A full-stack movie database application built with the MERN stack, featuring a comprehensive collection of 250+ movies with search, filtering, and admin management capabilities.

Live Demo: https://mern-movie-db.vercel.app/

Table of Contents

• Features
• Tech Stack
• Project Structure
• Installation
• Environment Variables
• Running Locally
• Database Seeding
• User Roles
• API Endpoints
• Deployment
• Screenshots
• Future Enhancements
• Contributing
• License

Features

User Features

• Browse 250+ curated movies with pagination
• Advanced search and filtering by title, genre, rating, and year
• View detailed movie information including cast, director, duration, and synopsis
• Responsive design optimized for mobile, tablet, and desktop
• User authentication with JWT tokens
• Secure login and registration

Admin Features

• Full CRUD operations for movie management
• Add new movies with complete metadata
• Edit existing movie information
• Delete movies from the database
• Admin dashboard with statistics
• Role-based access control

Technical Features

• RESTful API architecture
• MongoDB database with Mongoose ODM
• JWT-based authentication and authorization
• Password hashing with bcrypt
• CORS-enabled backend
• Environment-based configuration
• Spotlight card hover effects
• Optimized image loading
• Error handling and validation

Tech Stack

Frontend

• React 18.2.0
• React Router 6.x
• Material-UI (MUI) 5.x
• Axios for API calls
• Context API for state management

Backend

• Node.js
• Express.js
• MongoDB with Mongoose
• JSON Web Tokens (JWT)
• bcryptjs for password hashing
• dotenv for environment management

Deployment

• Frontend: Vercel
• Backend: Render
• Database: MongoDB Atlas

Project Structure

MovieDB/
├── backend/
│   ├── config/
│   │   └── database.js          # MongoDB connection
│   ├── controllers/
│   │   ├── authController.js    # Authentication logic
│   │   └── movieController.js   # Movie CRUD operations
│   ├── data/
│   │   └── top250movies.js      # Movie dataset
│   ├── middleware/
│   │   └── auth.js              # JWT verification
│   ├── models/
│   │   ├── Movie.js             # Movie schema
│   │   └── User.js              # User schema
│   ├── routes/
│   │   ├── auth.js              # Auth routes
│   │   └── movies.js            # Movie routes
│   ├── scripts/
│   │   └── seedMovies.js        # Database seeding script
│   ├── .env                     # Environment variables
│   ├── server.js                # Express server entry point
│   └── package.json
│
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Auth/
│   │   │   │   ├── Login.js
│   │   │   │   └── Register.js
│   │   │   ├── Common/
│   │   │   │   ├── MovieCard.js
│   │   │   │   └── SpotlightCard.js
│   │   │   ├── Dashboard/
│   │   │   │   ├── AdminDashboard.js
│   │   │   │   ├── AddMovie.js
│   │   │   │   └── EditMovie.js
│   │   │   ├── Layout/
│   │   │   │   └── Navbar.js
│   │   │   ├── Movie/
│   │   │   │   ├── MovieDetail.js
│   │   │   │   └── MovieList.js
│   │   │   └── Search/
│   │   │       └── SearchPage.js
│   │   ├── context/
│   │   │   └── AuthContext.js   # Authentication context
│   │   ├── services/
│   │   │   └── api.js           # Axios configuration
│   │   ├── App.js
│   │   ├── index.js
│   │   └── theme.js             # MUI theme configuration
│   ├── .env.production
│   └── package.json
│
└── README.md

Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB Atlas account or local MongoDB instance
• Git

Clone Repository

git clone https://github.com/raza-khan0108/mern-movie-db.git
cd mern-movie-db

Install Dependencies

Backend

cd backend
npm install

Frontend

cd frontend
npm install

Environment Variables

Backend (.env)

Create a .env file in the backend directory:

MONGODB_URI=your_mongodb_atlas_uri
JWT_SECRET=your_super_secret_jwt_key_minimum_32_characters
NODE_ENV=development
PORT=5000
FRONTEND_URL=http://localhost:3000

Frontend (.env)

Create a .env file in the frontend directory:

REACT_APP_API_URL=http://localhost:5000/api

Running Locally

Start Backend Server

cd backend
npm run dev

The backend server will run on http://localhost:5000

Start Frontend Development Server

cd frontend
npm start

The frontend will run on http://localhost:3000

Database Seeding

Populate the database with 250+ movies:

cd backend
npm run seed

This will:

• Connect to MongoDB
• Clear existing movies
• Insert 250+ movies from the dataset
• Display success confirmation

User Roles

Regular User

• Browse and search movies
• View movie details
• Access personal profile

Admin User

• All user capabilities
• Access admin dashboard
• Add new movies
• Edit existing movies
• Delete movies
• View statistics

Testing Credentials

For testing purposes, the registration form includes a role selector:

• Select "User" for standard access
• Select "Admin" for administrative access

Note: In production, admin access should be granted manually through database modification or a secure admin panel.

API Endpoints

Authentication

POST   /api/auth/register    - Register new user
POST   /api/auth/login       - Login user
GET    /api/auth/me          - Get current user

Movies

GET    /api/movies           - Get all movies (with pagination)
GET    /api/movies/:id       - Get single movie
POST   /api/movies           - Create movie (Admin only)
PUT    /api/movies/:id       - Update movie (Admin only)
DELETE /api/movies/:id       - Delete movie (Admin only)
GET    /api/movies/search    - Search movies

Query Parameters

page     - Page number (default: 1)
limit    - Items per page (default: 10)
search   - Search term
genre    - Filter by genre
minRating - Minimum rating
year     - Release year

Deployment

Frontend (Vercel)

1. Push code to GitHub
2. Connect repository to Vercel
3. Configure build settings:
   • Framework: Create React App
   • Root Directory: frontend
   • Build Command: npm run build
   • Output Directory: build
4. Add environment variables:
   • REACT_APP_API_URL: Your backend URL

Backend (Render)

1. Connect repository to Render
2. Create Web Service
3. Configure settings:
   • Root Directory: backend
   • Build Command: npm install
   • Start Command: npm start
4. Add environment variables:
   • MONGODB_URI
   • JWT_SECRET
   • NODE_ENV=production
   • FRONTEND_URL

Database (MongoDB Atlas)

1. Create cluster on MongoDB Atlas
2. Whitelist IP: 0.0.0.0/0 for Render access
3. Create database user
4. Get connection string
5. Update environment variables

Screenshots

Home Page

Browse through 250+ curated movies with intuitive navigation and pagination.

Search & Filter

Advanced search functionality with multiple filter options including genre, rating, and release year.

Movie Details

Comprehensive movie information with cast, director, runtime, and high-quality poster images.

Admin Dashboard

Powerful admin interface for managing the movie database with full CRUD capabilities.

Future Enhancements

• User watchlist and favorites
• Movie ratings and reviews
• Advanced filtering (multiple genres, cast search)
• Recommendation system
• Movie trailers integration
• User profile management
• Email verification
• Password reset functionality
• Social sharing features
• Dark/Light theme toggle
• Infinite scroll pagination
• Movie comparison feature

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Movie data sourced from IMDb Top 250
• Poster images from various movie databases
• UI inspiration from modern streaming platforms
• Material-UI component library

Contact

Developer: Raza Khan

GitHub: https://github.com/raza-khan0108

Live Demo: https://mern-movie-db.vercel.app/

---

Built with passion for movies and modern web technologies.