Movie Board

Deployment

Available at: movie-board.onrender.com

Overview

A responsive MERN stack-based movie website that allows users to view trending movies and TV shows, search for movies, discover similar movies, and see streaming options. It showcases details like ratings, genres, overviews, videos, cast, reviews, links, collections, and more. Furthermore, it aggregates telemetry data and displays the number of visitors in the last month.

Front-end

Stack

• React
• Bootstrap
• Material UI
• Framer Motion

Setup

1. Obtain API tokens:
   • WatchMode for streaming providers.
   • TMDB for all other movie details.
   • ipdata for telemetry data.
2. Download the repository and go to frontend/movie-board/.
3. Create a .env file with the API tokens (example in .env_example).
4. Run it with the commands below.
5. Go to http://localhost:4173.

Commands

npm install
npm run build
npm run preview

Back-end

Stack

• Node.js
• Express

Setup

1. Download the repository and go to backend/.
2. Create a .env file with the MongoDB connection string (example in .env_example).
3. Run it with the commands below.
4. It will start at http://localhost:5000/telemetry.

Commands

npm install
npm run devStart

Database

Stack

• MongoDB

Setup

1. Create an account on MongoDB.
2. Create a new database.
3. Create a new user and password.
4. Allow access from your specific IP or any IP (0.0.0.0/0).
5. Adjust the back-end .env with the database parameters (example in .env_example).

References

• All movies, TV, details, etc. API: TMDB
• Streaming providers API: WatchMode
• Telemetry API: ipdata
• Missing movie thumbnail: Pinterest
• Missing cast icon: Vecteezy

Screenshots

---

---

---

---