https://github.com/sidgureja7803/netflix-app

Created a REACT APP similar to Netflix using TMDB API & Open AI API Key. Before cloning the project, please note that you should have your own API keys in the .env folder.
https://github.com/sidgureja7803/netflix-app

api firebase-auth javascript react react-router redux tailwindcss

Last synced: 6 days ago
JSON representation

Created a REACT APP similar to Netflix using TMDB API & Open AI API Key. Before cloning the project, please note that you should have your own API keys in the .env folder.

• Host: GitHub
• URL: https://github.com/sidgureja7803/netflix-app
• Owner: sidgureja7803
• License: mit
• Created: 2024-09-16T22:13:43.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-16T22:23:49.000Z (about 2 months ago)
• Last Synced: 2024-10-09T17:40:56.672Z (28 days ago)
• Topics: api, firebase-auth, javascript, react, react-router, redux, tailwindcss
• Language: JavaScript
• Homepage: https://netflicz-reactjs-rho.vercel.app/
• Size: 396 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Netflix GPT

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

- Build Secondary Component

- Build Movie List

- build Movie Card

- TMDB Image CDN URL

- Made the Browsre page amazing with Tailwind CSS

- usePopularMovies Custom hook

- GPT Search Page

- GPT Search Bar

- (BONUS) Multi-language Feature in our App)

- Get Open AI Api Key 

- Gpt Search API Call

- fetched gptMoviesSuggestions from TMDB

- created gptSlice added data

- Resused Movie List component to make movie suggestion container

- Memoization

- Added .env file

- Adding .env file to gitignore

- Made our Site Responsive

# Features

- Login/Sign Up

    - Sign In /Sign up Form

    - redirect to Browse Page

- Browse (after authentication)

    - Header

    - Main Movie

        - Tailer in Background

        - Title & Description

        - MovieSuggestions

            - MovieLists * N 

- NetflixGPT

    - Search Bar

    - Movie Suggestions

# Project Setup

- Before starting the project please add .env file and add TMDB and OPENAI KEY into it.