Giter VIP home page Giter VIP logo

hayunobar's Introduction

BlueBird-Movies

BlueBird-Movies is a React-based movie website that allows users to search for movies by title, sort them by genre, view trending and upcoming movies, and bookmark their favorite movies. The website is designed to be user-friendly and visually appealing.

background


๐Ÿฟ Features

  • Search and watch movies: users can search for movies by title and can watch them easily
  • Genre-wise display: movies can be sorted by genre
  • Trending Movies: displays a section for trending movies
  • Upcoming movies: displays a section for upcoming movies
  • Movie Details: users can view detailed information about each movie
  • Bookmark Movies: users can bookmark their favorite movies for later viewing
  • Google Authentication: users can sign in using their Google account

๐Ÿฟ Technology

BlueBird-Movies is built using the following technologies:

  • ReactJS
  • TMDB API
  • Firebase Google Authentication
  • Framer Motion

๐Ÿฟ How to Run the Website on Your System

Step 1: Download and Extract the Code

Firstly, download the entire website code and extract the ZIP file to a folder on your local system.

Step 2: Obtain the TMDB Movies API Key and Firebase Configuration

Before starting the website, you will need to obtain the TMDB Movies API key and Firebase configuration. Follow these steps to obtain them and add them to your .env file.

โ–ถ๏ธ Get TMDB API Key

  • Go to https://www.themoviedb.org/ and log in.
  • Click on your user profile picture in the navigation bar, and select "Settings".
  • In the settings, select "API" and generate an API key.

โ–ถ๏ธ Firebase Setup

Note that Firebase is only required for Google authentication. If you are not using Google authentication in your application, you can skip this step.

  • Go to the Firebase Console and create a new app.
  • After creating the app, build a web app by clicking "Add App" and following the instructions.

Firebase Add App Screenshot

Firebase Build App Screenshot

  • Copy the configuration information provided in the green line, and paste it into the .env file:

image

  • Next, to activate Google authentication in Firebase, go to Build > Authentication and enable Google authentication.
  • To use Google authentication in localhost, add your localhost/127.0.0.1 as an Authorized Domain at Build > Authentication > Settings > Authorized Domains and add localhost or 127.0.0.1 to this section.

image

Step 3: Run the Website

Open your code editor (such as VS Code) and navigate to the project directory. Then, open a terminal and run the following command:

npm run dev

This will start the application. Open a web browser and navigate to http://localhost:3000 to access the website.

Note: Ensure that you have carefully added the TMDB API key and Firebase authentication configuration to your .env file. If the .env file is not working, add all the API keys and configuration manually.


๐Ÿฟ Demo

videoplayback.mp4

๐Ÿ˜ Contribution

Contributions are always welcome, open a Pull Request and help us improve our project.

hayunobar's People

Contributors

haisyam avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.