Netflix-GPT: Your Ultimate Movie Companion! 🚀

Visitor count

---

---

Table of Contents

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

1. Clone the Repository:

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

2. Install Dependencies:

   npm install

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

4. Run the Application:

   npm start

5. 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/

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

---

Ex- Image

SignUp Page

LogIn Page

Footer Page

Multilanguage Feature

Home Page

Search Page

Movie InfoBox

Movie Trailer

Confirmation Box

Forgot Password Box

Alert Msg

Shimmer

Thanks for visit... 😊😊😊