Meyer's Movies Case Study
Overview and Purpose
Meyer's Movies is a frontend Single Page Application that utilizes React to display information about movies and users from a RESTful API that I also developed. This project was completed as part of my coursework in CareerFoundry's Full Stack Immersion Course to teach me more about coding the frontend.
Objective and Duration
The objective of this project was to develop a project for my portfolio and add React and multiple React libraries to my knowledge base, including React Bootstrap, React Router, and React Redux. This CareerFoundry Achievement took me just under 3 months to complete. I wanted to take my time with this achievement so that each new React Library learned would really stick with me, and I would be able to use these tools confidently after completing this application.
Tools, Skills, and Methodologies
This project was completed using the MERN Stack when looking at the backend and the frontend. Specifically for the frontend of this project I used React, including many React Libraries such as React Bootstrap, Router, and Redux. I used User Stories and developed an Architectural Diagram, shown below, to help with my implementation of React Redux. At every step I always started off by delivering a Minimum Viable Project (MVP) before going back in to polish things up.
My Approach
Learning React Components
Since I had the REST API already built, I simply needed to build the frontend. I determined React would be a good choice because I would need to implement multiple interface views, and using the React Framework would make it easier to scale this project up in the future. I started out by using Parcel to build a very basic version of the application while I was learning how React Components worked together.
React Hooks / Connecting to Database
After creating a few components using mock data, I connected them to my database using a REST API and React Hooks. I then created forms for my application for user login and signup. I added authentication to these forms using Passport.js middleware for Node.js. A test of the API can be seen below for posting a favorite movie to the User's favorite movie list. Note the authorization token being used.
React Bootstrap & React Router
After I had created a working application, or a Minimum Viable Product, I moved on to styling the app with React Bootstrap. I revamped the application using React Bootstrap’s Form, Card, and Button Elements. After this I also added routing to my application using React Router. This was a challenge because I had to change a few things in many places, and if I missed one the application did not work as intended. I solved this by going through each React component one-by-one until I found the issue and resolved it. This problem solving helped me learn React Router more thoroughly.
Search Feature with React Redux
After this was complete I added one more feature to my application: the ability to search for specific movies using React Redux. This added another React library to my repertoire and added a useful feature to my application. Finally, I deployed my application to Netlify using Parcel as the build tool.
Challenges and Looking Forward
Some of the biggest obstacles from this project came when I had to take my working application and refactor it to utilize a different React library. For example, when implementing React Bootstrap and React Router it took me a while to understand how to add these to my existing application.
After my final submission for this project I went back though and updated the look of the individual movie view to build even further on the minimum requirements for this project. In future iterations I would like to add a “Similar Movies” section to each individual movie view. I would also like to add the ability to add a movie to the database from the application itself. These movies would be visible to every user, not just the user who uploaded them.