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.

---

---

🍿 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.

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

- Next, to activate Google authentication in Firebase, go to

Build > Authentication

and enable Google authentication.

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:5173 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

Check out our live demo at https://moviesbluebird.netlify.app/