https://github.com/sumansourabh14/movie-database

Find the latest, top-rated and genre based movies plus their ratings, cast and reviews - all in a single website.
https://github.com/sumansourabh14/movie-database

api firebase firebaseauthentication react tailwindcss tmdb-api tmdb-movie

Last synced: about 2 months ago
JSON representation

Find the latest, top-rated and genre based movies plus their ratings, cast and reviews - all in a single website.

• Host: GitHub
• URL: https://github.com/sumansourabh14/movie-database
• Owner: Sumansourabh14
• Created: 2022-09-21T11:16:11.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-28T15:01:25.000Z (over 3 years ago)
• Last Synced: 2025-07-06T01:44:02.915Z (12 months ago)
• Topics: api, firebase, firebaseauthentication, react, tailwindcss, tmdb-api, tmdb-movie
• Language: JavaScript
• Homepage: https://movies-tv-db-react.web.app/
• Size: 3.83 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![MovieDB home page](src/assets/MovieDB-large-screen.png)



MovieDB - Database for Movies


Find the latest, top-rated and genre based movies plus their ratings, cast and reviews - all in a single website.

- Made with [React](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/) 

- Uses [Firebase](https://firebase.google.com/) authentication and hosted on Firebase platform

## Features (at a glance)

- Authentication

  - User can sign in and sign out

- Info of plethora of movies based on different categories.

- Upon clicking a movie, details are shown: -

  1. Name of movie

  2. Release year

  3. Rating

  4. Runtime

  5. Languages

  6. Genre

  7. Synopsis

  8. Cast

  9. Director

- Similar movies are also displayed on the screen in a form of a carousel (slider).

- User can read reviewes of the respective movies.

## Tech Used

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase)

![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)

## Dependencies

- Axios - to fetch API

- Tailwind CSS

- Tailwind Scrollbar Hide

- React Router

- React Router DOM

- Firebase - for authentication, deployment

- React icons

- Fontawesome icons

## Movie Details Page

This page displays the details of a movie such as

- A background poster

- Rating and runtime

- Languages and genre

- Synopsis or overview

- Cast and director

- Similar movies

- Reviews

### On larger screens:

![Schindler's List](src/assets/Schindler's-List-large-screen.jpeg)

### On mobile screens:

![Bullet Train](src/assets/Bullet-Train-mobile-screen.png)

## Screenshots

MovieDB on mobile screens:

![MovieDB on mobile screens](src/assets/MovieDB-small-screen.png)

## Helpful Links

- [Hosted website](https://movies-tv-db-react.web.app/) (on Firebase)

- [How to deploy Firebase project?](https://dev.to/guillerbr/deploy-reactjs-on-firebase-hosting-4mpj)

- [TMDB Movies API](https://www.themoviedb.org/documentation/api)