Netflix-GPT: Your Ultimate Movie Companion! 🚀

Visitor count

Project Overview
Technologies & Packages Used
Key Features
Behind the Scenes
Getting Started
Acknowledgments
Author
Project Link
Thank You
Creating a Netflix-gpt project involves several steps
Ex- Image

Project Overview

Greetings, movie lovers! 👋 Welcome to Netflix-GPT, a state-of-the-art movie recommendation website powered by the GPT (Generative Pre-trained Transformer) model and Firebase.

Technologies & Packages Used

React: Powering the interactive and user-friendly interface.
Firebase: Handling user authentication, data storage, and more.
OpenAI: Leveraging the GPT model for sophisticated movie recommendations.
React Router DOM: Enabling smooth navigation and user-friendly routing.
React-Redux: Managing application state efficiently.
React-Toastify: Adding beautiful notifications for enhanced user interaction.
Tailwind CSS: Crafting a visually appealing and responsive design.

Key Features

Dynamic Recommendations: Leverage advanced machine learning for personalized movie suggestions based on your viewing history.
Account Management: Seamlessly update your profile, delete your account, and reset your password.
Smart Search: Effortlessly find movies by title, actor, or genre with real-time updates as you type.
Responsive Design: Enjoy a seamless experience across all devices, from desktops to smartphones.
Login with Email or Password: Securely access personalized movie recommendations by logging in with your email and password.

Behind the Scenes

React: Powering the interactive and user-friendly interface.
Firebase: Managing user authentication, data storage, and more.
OpenAI: Leveraging the GPT model for sophisticated movie recommendations.
React Parcel: Streamlining bundling, fast refresh, JSX support, and code splitting.
React Router DOM: Facilitating smooth navigation and user-friendly routing.
React-Toastify: Incorporating beautiful notifications for enhanced user interaction.

Getting Started

Follow these steps to get started with Netflix-GPT:

Clone the Repository:

git clone https://github.com/akashdeep023/Netflix_Gpt.git
cd Netflix_Gpt

Install Dependencies:
```
npm install
```
Set Up Environment Variables:

Configure the following environment variables by creating a .env file in the root of your project:
```
REACT_APP_MOVIES_OPTIONS=
REACT_APP_OPENAI_KEY=
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_FIREBASE_MEASUREMENT_ID=
```
Replace the values with your specific configurations.
Run the Application:
```
npm start
```
Open in Your Browser:

Open http://localhost:3000 in your web browser.

Acknowledgments

Special thanks to Akshay Saini 🚀 for his invaluable guidance. His teaching approach, fostering curiosity and a deep understanding of each line of code, has played a pivotal role in my learning experience. Kudos! 🙌🌈

Author

Akash Deep
Email: [email protected]
LinkedIn : https://www.linkedin.com/in/akashdeep023/

Project Link

Thank You

Thank you for exploring Netflix-GPT! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. 😊

Creating a Netflix-gpt project involves several steps

Create React App
Configured TailwindCSS
Header
Routing of App
Login Form
Sign up Form
Form Validation
useRef Hook
Firebase Setup
Deploying our app to production
Create SignUp/SignIn User Account
Implement Sign In user Api
Created Redux Store with userslice
Implemented Sign out
Update Profile
BugFix: Sign up user displayName and profile picture update
BugFix: if the user is not logged in Redirect /browse to Login Page and vice-versa
Unsubscibed to the onAuthStateChanged callback
Add hardcoded values to the constants file
Regiter TMDB API & create an app & get access token
Get Data from TMDB now playing movies List API
Custom Hook for Now Playing Movies
Create movieSlice
Update Store with movies Data
Planning for MainContauiner & secondary container
Fetch Data for Trailer Video
Update Store with Trailer Video Data
Embedded the Yotube video and make it autoplay and mute
Tailwind Classes to make Main Container Look awesome
Create Some Custom Hook for Movies
Update moviesSlice
Update Store with new movies Data
Create Secondary container
Add some styles