- Create React App
- configured tailwind css into our app
- Header
- routing of app
- Login form
- Sign Up form
- form validation
- useRef Hook
- firebase setup
- deploy app to production
- create signup user account in firebase
- Implement signin user API
- created redux Store with userSlice
- IMPLEMENTED SIGN OUT
- UPDATE PROFILE
- bugfix - signup user display name and profile picture update
- bugfix - if user not logged in redirect /browse to login page and vice-versa
- unsubscribed to the onAuthStateChanged callback
- add hard-coded values to the constant files(important)
- register for tmdb api & create an app and get access token
- get data from tmdb now playing movies list api
- custom hook for now playing movies
- create a movie Slice
- update store with movies data
- plan for main and secondary container
- fetch data for trailer video
- update store with trailer video data
- embedded youtube video
- make it autoplay, mute and on loop
- added tailwind css to make it look awesome(main container)
- build secondary container
- build the movies list and movie card
- found out tmdb image cdn url
- made UI look better with tailwind
- usePopularMovies custom hook
- useTopRatedMovies custom hook
- useUpcomingMovies custom hook
- GPT search page
- GPT search bar
- multi-language feature in our App (BONUS)
- integrate gpi apis(get openai key)
- gpt search api call
- fetched gpt movie suggestions from tmdb
- gpt slice , added data
- reused movie list component to make movie suggestions container
- memoization
- added .env file
- added .env to .gitignore
- made our site responsive
-
Home page (before Authentication)
- Header
- Sign in Page / sign up form
- redirect to browse Page
-
Browse Page (after Authentication)
-
Header
-
Main Movie
- Trailer in Background
- Title & Description
- Play Button
-
Movies List (Suggestions)
- horizontal scroll in movies
-
-
Neflix Gpt
- Search Bar
- Movie Suggestions