https://github.com/akashdeep023/netflix_gpt
Netflix_Gpt: Your Ultimate Movie Companion!
https://github.com/akashdeep023/netflix_gpt
ai api component create-react-app css custome-hooks firebase firebase-authentication forgot-password-email frontend html javascript react redux redux-toolkit responsive tailwindcss tmdb-movie
Last synced: 9 months ago
JSON representation
Netflix_Gpt: Your Ultimate Movie Companion!
- Host: GitHub
- URL: https://github.com/akashdeep023/netflix_gpt
- Owner: akashdeep023
- Created: 2024-02-29T16:32:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-06T20:07:01.000Z (over 1 year ago)
- Last Synced: 2025-04-02T06:23:48.587Z (about 1 year ago)
- Topics: ai, api, component, create-react-app, css, custome-hooks, firebase, firebase-authentication, forgot-password-email, frontend, html, javascript, react, redux, redux-toolkit, responsive, tailwindcss, tmdb-movie
- Language: JavaScript
- Homepage: https://netflix-gpt-jack.vercel.app/
- Size: 342 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Netflix-GPT: Your Ultimate Movie Companion! 🚀
Visitor count
---
---
## Table of Contents
- [Project Overview](#project-overview)
- [Technologies & Packages Used](#technologies--packages-used)
- [Key Features](#key-features)
- [Behind the Scenes](#behind-the-scenes)
- [Getting Started](#getting-started)
- [Acknowledgments](#acknowledgments)
- [Author](#author)
- [Project Link](#project-link)
- [Thank You](#thank-you)
- [Creating a Netflix-gpt project involves several steps](#creating-a-netflix-gpt-project-involves-several-steps)
- [Ex- Image](#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:**
```bash
git clone https://github.com/akashdeep023/Netflix_Gpt.git
cd Netflix_Gpt
```
2. **Install Dependencies:**
```bash
npm install
```
3. **Set Up Environment Variables:**
Configure the following environment variables by creating a .env file in the root of your project:
```bash
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:**
```bash
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: contact.akashdeep023@gmail.com \
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... 😊😊😊