RateIt!

A Real-world online movie rating app where you can nominate your favourite movies and get them to the top of the leaderboard!

🔗 Live Demo

The website is Hosted Here

Front-end Repository

Back-end Repository (Do check out this repository as well!)

---

Special Mention: TMDB API for providing the amazing database of movies.

Main Features

Landing Page

The landing page gives us a brief introduction about this app. Anyone can Signup if its a new user or login if its an old one. The syling of all the pages inside the app is done using "styled-components". AOS library (animate on scroll) is used to animate the content while scrolling!

Authentication

Firebase authentication service is used for signin and signup features using email, username and password .

Top Navbar

Once you are logged in, the top navbar will contain your username and three different buttons for navigation namely "Nomination", "Leaderboard" and "Logout".

Movie-List

All the logged in users are directed to the movie list page where you can browse different movies from different categories . The movie name, a short description and the release date is also visible in that card. All these results are fetched from "TMDB API". You can obviously nominate any movie using the nominate button and if its already nominated, you can remove it from your nominations. Once you nominate a movie the "movieID" and the "user" is registered into our mongoDb database. The same movie cannot be nominated twice, if anyone does that then a toast will get displayed showing "Already nominated"!

Movie Tralier

Every movie card has a "Watch Traler" button using that you can view the trailer of that movie which is available on youtube . This feature is implemented using "movie-trailer" package.

Movie Search

You can search your favourite movie in the search box and nominate that as well!

My Nominations

Every user is allowed to nominate atmost five movies and the nominated movies can be viewed in the "Nomination" Tab. If you try to nominate more than five movies then a toast is displayed showing "Already nominated". You can obviously remove those movies which you do not wish to have in that list. A toast appears every time you add or remove a movie .

Leaderboard

The leaderboard contains the top voted movies by our community which is sorted in descending order of votes.

Footer

The footer of every page contains developer contact, so that for any bug anyone can reach us immediately!

---

Tech Stack and Concepts used:

• Frontend: Reactjs, Javascript, MaterialUI, Slick-Slider, HTML, CSS, Styled-components
• Backend: Firebase, Nodejs, Expressjs
• Databse: MongoDB
• Deployment: Heroku, Netlify
• Tools: Git

---

Setting Up the Project 🔧

• Frontend

1. Clone the repo

   git clone https://github.com/tend2infinity/Rate-It-Project

2. Install NPM packages

   npm install

3. Create a .env file using the template .env.template and add values accordingly.

• Backend

1. Clone the repo

   git clone https://github.com/savi-1311/Rate-It-Backend

2. Install NPM packages

   npm install

3. Create a .env file using the template .env.template and add values accordingly.

Usage

1. Switch to the Backend folder and run the backend server

   npm start 

2. Switch to the Frontend folder and run the frontend server

   npm start 

   Make sure you start the Backend server before the Frontend server to avoid unnecessary errors.

---

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Shambhavi 💻 🎨 📖 🔣

Somya S. Singh 💻 🎨 📖 🖋

Abhishek Garain 🧑‍🏫 👀

This project follows the all-contributors specification. Contributions of any kind welcome!