The case study
Overview
My Movie Box is a web application built on the MERN stack, offering users a database with information about movies, movie genres and directors. It allows users to personalize their experience by creating accounts, managing personal information, and having a personalized list of favorite movies.
Purpose & Context
My Movie Box was a project that I built during my web development course at CareerFoundry to showcase my expertise in full-stack JavaScript development.
Objective
The project's goal was to develop a complete full-stack application that would enhance my professional portfolio. My challenge here was to build both the server-side and client-side components of the application from scratch.
// About the server-side
I developed a RESTful API using Node.js and Express, which enables interaction with a MongoDB (non-relational) database. The API utilizes standard HTTP methods like GET and POST to handle data fetching and storage through CRUD operations. Movie information is delivered in JSON format, ensuring compatibility and integration.
See API EndpointsTo ensure the API's functionality, I conducted tests using Postman. Additionally, I implemented secure user authentication and authorization mechanisms, including basic HTTP authentication and JWT authentication, to protect data and control access appropriately.
// About the client-side
Once the API was finalized, my focus shifted to constructing the user interface required for the interaction between the user and the server-side.
I developed a responsive, single-page application utilizing React and Redux.
The application provides a diverse range of views to enhance the user experience. In the main view, users can explore a full list of movies and utilize a search engine to filter movies by title, genre, or director. The single movie view offers detailed information about a specific movie, accompanied by related movie suggestions. Users can easily add or remove movies from their favorites list in both views.
Moreover, the application includes user-friendly login and registration views for account management, and a profile view where users can update their personal information and handle their favorite movie list.
Retrospective
This was one of the most challenging projects I had during my web development course at CareerFoundry.
Building the client side of the MyMovieBox app proved to be the most time-consuming aspect, mainly due to the numerous troubleshooting issues I encountered. In particular, implementing the feature to toggle a movie as a favorite and ensuring that this data remained up-to-date across all views, even after page reload, was particularly challenging and caused me some headaches!
However, after extensive research and discussions with more experienced developers, I was able to overcome this challenge.