A Netflix clone made in React with Tailwind CSS and Google's Firebase Authentication. As an added bonus, OpenAI's GPT-3 has been integrated into the app for super-powers.
I have hosted the app. Check the link in the description of the repo. However, if you want to clone it, simply fire up a terminal and run npm i.
- Configured a new React app using
create-react-app. - Configured Tailwind CSS into the app.
- Routing
- Created a Header Component with Netflix logo
- Add the banner image for login page
- Created Sign in/Sign up form
- Form Validation
- Hosting
- Firebase Authentication
- Redux Store
- Added user profile image
- Implemented Sign Out
- Added hardcoded values to the constants file
- Registered to the TMDB API and got the token details
- Got data from TMDB's Now Playing Movies List API
- Created a custom hook for fetching now playing movies and storing in the redux store using createMovieSlice
- Implemented the trailer functionality on the main screen
- 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