Description : Web Application to Search Movies, Trailers and Add Reviews
Tech Stack : Spring Boot, MongoDB, ReactJS, Material UI
Overview :
- Spring Boot : creates REST endpoints for fetching and manipulating data from a MongoDB cluster
- MongoDB : Stores extensive, large scale movies and reviews data as collections in JSON format
- ReactJS : Utilizes React components to build dynamic user interfaces for frontend rendering
- Material UI : Employs carousel feature to display data with interactive animation and indicators
How to Configure MongoDB :
- Watch this video to setup MongoDB cluster -> https://www.youtube.com/watch?v=jXgJyuBeb_o&list=PL4RCxklHWZ9vmzBP7lybE08CxbIU17PIf&index=8&ab_channel=MongoDB
- Under Network Access, add IP Address as 0.0.0.0/0 to allow global access
- Open MongoDB Compass and connect to your Cluster using the Connection String
- Create a new Database, then create a Collection called movies (mandatory name) inside the Database
- Goto Dataset/ and upload movie-dataset-small.json (provides faster response) to the movies Collection
- A sample MongoDB Connection String looks like -> mongodb+srv://username:password@cluster
- Goto Backend/src/main/resources/.env and edit the .env file to add your own credentials from Steps 4 & 6
How to Configure Ngrok (optional) :
- Watch this video to setup Ngrok -> https://www.youtube.com/watch?v=aFwrNSfthxU&ab_channel=ProgrammingKnowledge
- Setup Ngrok multiple ports tunelling -> https://dev.to/ethand91/using-ngrok-to-set-up-multiple-ports-2911
- Edit the script ngrok.yml present in the base directory to add your own Auth Token at line no. 5
- Run the script ngrok.yaml in CMD, by using the command [ngrok start --config ngrok.yml --all]
- Copy Ngrok forwarding URL for http://localhost:8080, a sample URL would look like -> https://9ca8-103-102-117-52.ngrok-free.app
- Goto Frontend/cinemint/src/api/axiosConfig.js and paste the copied URL on line no. 4 under baseURL
- Uncomment line nos. 2 to 6 and comment line nos. 8 to 10 instead, as we won't be needing the localhost URL
- Access the application by visiting Ngrok forwarding URL (public) for http://localhost:3000 on your Browser
How to Run (Windows) :
- Goto path "Backend/" in Terminal
- Run Backend by running the command [mvn spring-boot:run]
- Goto path "Frontend/cinemint/" in Terminal
- Run command [npm install] to install all necessary Node Modules
- Run Frontend by running the command [npm start]
- Goto http://localhost:3000 on your Browser to access the Application
- If using Ngrok, goto Ngrok forwarding URL for http://localhost:3000 on your Browser
Sample Screenshots :
API Documentation :
- Retrieve Movie by ID -> GET /movie/id/{tmdbId}
- Retrieve All Movies -> GET /movie/all
- Retrieve Movies by Keyword -> GET /movie/all/{keyword}
- Create a New Review -> POST /review
- Retrieve Reviews by Movie ID -> GET /review/id/{tmdbId}