My Movies is a web application that uses server-side rendering to display movie information, such as the title, release year, rating, genres, overview, and vote average. Users can play the movie trailer, add the movie to their collection, and see trending, top-rated, similar, and recommended movies. Users are also able to search for a movie or remove movies from their collection.

For user authentication, I use a combination of Firebase email and password based authentication and React's context API. I wrap the application in an authentication context provider that listens for any change in token IDs from Firebase. It then sets the user as a state variable. This ensures that the user is verified on every page load. I then use a custom React hook to provide access to the user-related state variables.

To obtain all the movie information, I use TMDB API, which is a REST API that can be consumed to interface with a large movie database. For the index page, I use Axios to request trending and top rated movies on the server side. I then filter the resultant data to provide the appropriate images and information to the client. The search page also utilizes the REST API to fetch results, and clicking on each result renders a similar page to the index on the client side.

For the "my collection" feature, I use the Firebase Web SDK version 9 to communicate with a Firebase Realtime Database instant. I use custom rules to make sure users can only access and edit their own data. To update the view on each addition or deletion to the user's collection, I use a listener for children added or removed from the node pertaining to that user on the database.

To style the application, I use CSS3 modules to build reusable layout components from scratch. To remain loyal to design mockups, I use CSS elements such as linear and radial gradients that achieve the desired effects. I also use media queries to ensure the website is responsive. Overall, I rely mostly on the power of CSS3 to meet the required goals while using Material-UI sparingly for niche features, such as the modal video used for the movie trailers and its icon library.