NOTE: This is the frontend of the MovieRate! Please visit the backend here!

MovieRate | Movie Review Platform

MovieRate

MovieRate is a movie review platform to give the chance to people to rate movies/series and also make them aware if something is worth the time, effort, and money to watch.
Explore the docs »

View Web Application · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Key Features
   • Built With
   • Database ER-Diagram
   • Architecture
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. License
6. Contact

About The Project

MovieRate tries to solve the following problem statement in the film industry

• People need to be aware of what they are going to watch so that they know if that movie or series is worth watching!

Key Features

1. Directors must be able to create an account:
   • Insert pictures and videos to promote their movies or series.
   • Include the cast.
   • Insert the release date.
   • Include the genres.
   • Insert language.
   • Insert film rating.
   • Update a movie or series.
   • Delete a movie or series.
   • Create actors.
   • Update actors.
   • Delete actors.
2. Allow movies and series to be featured on the carousel of the home page of the full-stack application.
3. Allow users to create an account and also give them the option to sign in using a One Time Password (OTP).
4. Display streaming sercives using the public APIs WatchMode API and Streaming Availability API.
5. A fully functional review system for each movie and series. Enable users to write reviews and comments for each movie and series.
6. Reset password functionality for both the director account and the user account.
7. Infinite scroll to fetch more movies, series, and actors as users keep scrolling down the list.
8. Dark mode functionality where a button will allow users to toggle between light and dark mode.
9. Live search functionality where users can search for movies, series, and actors.
10. Create movies/series/documentaries.
11. Create actors.
12. Give the ability to users to become Admins and contribute to the open soruce moview review platform MovieRate.
13. Third-party Authentication using Passport.js for Google and GitHub.
14. Fully functional and responsive web application with the main focus on desktops, mobile devices, and tablets.

Back to top

Built With

Back to top

Database ER-Diagram

Back to top

Architecture

Back to top

Getting Started

To get a local copy of MovieRate up and running locally follow these simple example steps:

Prerequisites

NOTE: How to check if Node and NPM are installed and what is their versions

  node -v
  npm -v

NOTE: How to check if Git is installed and what is its version

  git -v

1. Please make sure you have Node installed and use Node version: v16.15.0

   • You can use nvm to switch between different node versions:
     • Windows: https://github.com/coreybutler/nvm-windows
     • Mac: https://www.youtube.com/watch?v=BhLFxy6Jz8c
     • Linux: https://www.youtube.com/watch?v=tm1XllMkbAU

2. Please make sure you have NPM installed (it usually comes with Node installation)

     npm install npm@latest -g

3. Please make sure you have git installed

   • Windows: https://git-scm.com/download/win
   • Mac: https://git-scm.com/download/mac
   • Linux: https://git-scm.com/download/linux

4. Please make sure you have MongoDB Compass installed

   • MongoDB Compass: https://www.mongodb.com/try/download/compass/

Installation

APIs

1. Get a free WatchMode API Key at https://rapidapi.com/meteoric-llc-meteoric-llc-default/api/watchmode or at https://api.watchmode.com. (for getting Streaming Services)

2. Get a free Streaming Availability API Key at https://rapidapi.com/movie-of-the-night-movie-of-the-night-default/api/streaming-availability. (for getting Streaming Services)

3. Get a free Mailtap API Username and Password at https://mailtrap.io/signin. (for sending emails during production. Switch to Brevo for deployment.)

4. Get a free Cloudinary Username, API Key, and API Secret at https://cloudinary.com. (for uploading and storing images and videos)

5. Get a free Google API Key at https://console.developers.google.com. (for Google third-party authentication)

   • When you sign-in to https://console.developers.google.com create a new project.
   • Create OAuth 2.0 Client IDs.
   • Set Authorized JavaScript origins to: http://localhost:3000
   • Set Authorized redirect URIs to: http://localhost:8000/auth/google/callback

6. Get a free GitHub API Key at https://github.com/settings/developers. (for GitHub third-party authentication)

   • When you sign-in to https://github.com/settings/developers create a new project.
   • Create OAuth 2.0 Client ID and Client Secret.
   • Set Homepage URL to: http://localhost:3000
   • Set Authorization callback URL to: http://localhost:8000/auth/github/callback

SetUp

1. Navigate to the directory where you want to clone/run/save the application.

   cd your_selected_directory

2. Clone this repository (backend)

   git clone https://github.com/GeorgiosIoannouCoder/movierate-backend.git

3. Clone this repository (frontend)

   git clone https://github.com/GeorgiosIoannouCoder/movierate-frontend.git

4. Navigate to the movierate-backend git repository

   cd movierate-backend

5. Git chekout to the first version/commit of this repository (backend) because now it is setup for deployment.

   git checkout ecc661073823ba01d74a483a6c7fda0405473853

6. Install NPM packages

   npm i

7. Create a .env file inside the movierate-backend directory.

   MONGO_URI=mongodb://127.0.0.1:27017/movierate_db
   JWT_SECRET=here_have_a_random_secret_code
   MAIL_TRAP_USER=user_get_it_from_mailtrap
   MAIL_TRAP_PASS=password_get_it_from_mailtrap
   CLOUD_NAME=name_get_it_from_cloudinary
   CLOUD_API_KEY=api_key_get_it_from_cloudinary
   CLOUD_API_SECRET=api_secret__get_it_from_cloudinary
   GOOGLE_CLIENT_ID=client_id_get_it_from_google
   GOOGLE_CLIENT_SECRET=client_secret_get_it_from_google
   GITHUB_CLIENT_ID=client_id_get_it_from_github
   GITHUB_CLIENT_SECRET=client_secret_get_it_from_github

8. Run the backend server application (running at port 8000)

   npm start

9. Open MongoDB Compass and connect to the URI mongodb://127.0.0.1:27017/movierate_db. Here you will see your database movierate_db being created and storing the data of the web application.

10. Open a second terminal

11. Navigate to the directory selected at Step 1

    cd directory_selected_at_step_1

12. Navigate to the movierate-frontend git repository

    cd movierate-frontend

13. Git chekout to the first version/commit of this repository (fronted) because now it is setup for deployment.

    git checkout 649e6c09590d49a63d25226f0df844e6cb2c7297

14. Install NPM packages

    npm i

15. Run the frontend application (running at port 3000)

    npm start

Back to top

Usage

To try the MovieRate application click on this link!

You can use the following two accounts to test the application in case that you do not want to register or use the third-party authentication:

1. Admin

   • Email: admin@email.com
   • Password: 12345678aA!

2. User

   • Email: user@email.com
   • Password: 12345678aA!

Back to top

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your 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

Back to top

License

Distributed under the MIT License. See LICENSE for more information.

MIT License

Copyright (c) 2023 Georgios Ioannou

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Back to top

Contact

Georgios Ioannou - @LinkedIn

Georgios Ioannou - @georgiosioannoucoder - Please contact me via the form in my portfolio.

Project Link: https://github.com/GeorgiosIoannouCoder/movierate-frontend

Back to top