Netflix-GPT

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.

How to run?

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.

Steps to reach the end product:

1. Configured a new React app using create-react-app.
2. Configured Tailwind CSS into the app.
3. Routing
4. Created a Header Component with Netflix logo
5. Add the banner image for login page
6. Created Sign in/Sign up form
7. Form Validation
8. Hosting
9. Firebase Authentication
10. Redux Store
11. Added user profile image
12. Implemented Sign Out
13. Added hardcoded values to the constants file
14. Registered to the TMDB API and got the token details
15. Got data from TMDB's Now Playing Movies List API
16. Created a custom hook for fetching now playing movies and storing in the redux store using createMovieSlice
17. Implemented the trailer functionality on the main screen
18. Update Store with Trailer Video Data
19. Embedded the Yotube video and make it autoplay and mute
20. Tailwind Classes to make Main Container look awesome
21. Build Secondary Component
22. Build Movie List
23. build Movie Card
24. TMDB Image CDN URL
25. Made the Browsre page amazing with Tailwind CSS
26. usePopularMovies Custom hook
27. GPT Search Page
28. GPT Search Bar
29. (BONUS) Multi-language Feature in our App)
30. Get Open AI Api Key
31. Gpt Search API Call
32. fetched gptMoviesSuggestions from TMDB
33. created gptSlice added data
34. Resused Movie List component to make movie suggestion container
35. Memoization
36. Added .env file
37. Adding .env file to gitignore
38. Made our Site Responsive