Companion

Imagine this: you're curled up on the couch, Netflix on, and me by your side, ready to give you awesome movie recommendations✨

It's like having your own personal movie buddy and AI assistant rolled into one! 🤯

Features(To do list):

• Configuring the project with vite, tailwind, shadcn
• Setting up the Routing using React Router DOM
• Login and Sign up Page
  • Creating the Page
  • Adding the Functionality
• Forgot Password Page
  • Creating the Page
  • Adding the Functionality
• Form Handling and Validation using React Hook Form (RHF)
  • Installing and setting up RHF into the Project
  • Managing the data using RHF
  • Performing Form validation using RHF
  • Both Login and Forgot Password Page
• Installing and Integration React hot notifications into the project
• Setting up Firebase for the project
  • Setting and configuring the project in firebase
  • Creating the Sign up and Log in Functionality
  • Creating the forgot password Functionality
• Configuring Redux ToolKit for state management
  • Installing the dependencies
  • Creating the app store
  • Connecting the app store to the application
  • Creating the user slice to store the user data
  • Adding the user data from the sign in / sign up
  • Removing the user data while signing out
• Modifying the Header component in browse
  • Adding the user icon along with drop down
  • Drop down should contain account setting
  • Implement the sign out feature
    • should show alert box with a creative message
    • On clicking it navigate to log in page.
• Giving Proper Layout and Structure
  • Structuring the Files according to component, utils, layouts and pages
  • Defining Proper Layout for the pages
• Setting up Protected Routes
  • Redirects the user to login page, session expires
  • Redirects the user to main page, session is active
• Good practices
  • Unsubscribing to on auth state change in useEffect to remove event listeners
• Integrating TMDB into the project
  • Creating an application and fetching the access token
  • fetching the now playing movies using access token
  • Creating a movie slice in redux store and adding now playing movies
  • Adding Trending movies to the movie list
• Creating custom hooks
  • Now playing movies
  • Trending movies
  • Background trailer videos
• Creating the browse page
  • Main container (Trending movies)
    • Video title , description
    • Trailer in the background
  • Secondary container
  • Movie cards * n
  • each movie card => m movies
• Trending movie section
  • Trailer in Background
  • Title and Description
• Movie Recommendation
  • a list of movies based on categories

Optional:

• Add the option to Login with Google
• Settings page for users

Learning through challenges:

These are all the issues that I encountered while implementing the project:

• 🤦‍♀️ Problem in forgot password feature (validation needed else it sends mail to everyone)
  • Tried implementing it using firestore (bad idea => not meant for that purpose, strict security rules)
  • Better approach: Try using mongo DB or any other database for this purpose
• 📋 Handling form validation of multiple input fields,
  • custom form validation is awesome for small input cases , but for multiple validations you need better options
  • Found out React hook form, Learned about it and implemented validation using React hook forms.
  • Another alternative: Formik (Not explored it enough to say about it)
• 🤝🏻 Tried to implement the remember me feature in log in
  • while looking out for it , I come to know firebase by default provides this option
  • 🍪 Explored about cookies and need for cookies
• Tried to implement a drop down along with alert box (had issues with state) - after drop down closes , alert automatically closes (shadcn-ui).
  • Solved the issue by sperating log out button
• How to fetch the trailer videos from the TMDB API and display on the page
  • solved by reading the documentation of api -🎮 Playing the trailer videos on loop
  • initially setted up video playing with iframe => React player
  • struggle a lot to make react player to aspect ratio w-100
  • inconsistency in movie displaying different movie rendered and different movie displayed
• 🛒 Tried using Redux ToolKit for state management
  • 📌 Forgot about the data flow, had to go through it again
• 🛡️ Need of .env file to store the api keys
  • your api keys should be protected, so I created env file to store the api keys
  • There is a specific way of doing it for vite, refer the vite dox on env variables.
• 📽️ Tried my best to integrate random videos when user logs in
  • faced issue with inconsistency in data
  • showed random title and random video
  • rather solving in the client side => solved in the backend part