Case Study for myFlix
Overview
myFlix is a web application developed using the MERN stack (MongoDB, Express, React and Node.js) that is designed to act as a movie database. Users will be able to look at details for any movies in the database (such as director or genre information) and manage a list of their personal favourite movies.
Purpose and Context
myFlix is a project I developed as part of the CareerFoundry Full Stack Web Development curriculum. Its purpose was to get exposure to a variety of different JavaScript based technologies and to practice developing a complete web application (both frontend and backend).
Objective
This project had two primary objectives. First, to learn how to develop a Full Stack Web Application from start to finish while also getting familiarity with the MERN stack. Second, to develop a Web Application that I could use in my portfolio to showcase my Full Stack Development skills.
Technologies Used
- MongoDB
- Express
- React
- Node.js
- Redux
- React Bootstrap
Components
Backend
The backend of the myFlix app was built primarily using Node.js and Express. It is a RESTful API that interacts with a NoSQL database (MongoDB).
I first set up the server routes and all the API endpoints using Node.js and Express. Then I set up the MongoDB database to store information on both movies and users, including database models defined using Mongoose. The backend was finished with some security features, including JWT authentication using Passport.
Further documentation for the backend of myFlix, including API documentation, can be found on Github here.
Frontend
The fronted of the myFlix app was built using React (and later refactored with Redux). I took special care to make sure that myFlix met the requirements of a single-page application.
First the applications structure and components were planned out. Following that initial planning stage, the individual components were implemented using a combination of class components and functional components. Any API calls that needed to be made in a component (for example, registering a user, logging in a user or retrieving a list of movies) was made using Axios. React Bootstrap was used for styling purposes. React Router was used to navigate between different views. Finally, the frontend for myFlix was refactored to use Redux to better manage the applications state.
Further documentation for the frontend of myFlix can be found on Github here.
A live demo of myFlix can be found here.
Challenges
The primary challenge of the myFlix app that I encountered was the Add/Remove Favourite Movie button. I wanted this button to dynamically update its text and style depending on whether the movie in question was currently part of the users favourites or not. When I initially implemented this button in React I could not understand why it wasn't updating when it was clicked, even though the database was successfully updated. For a time, the only way I could get this feature to work was via a forced page reload, which went against the design philosophy of a Single Page Application (SPA) that I was trying to implement. It turns out that I had a fundamentally flawed understanding of how React States worked. Even though I was updating the database, I was not updating the React State correctly and it meant React didn't update the DOM. By going back to the fundamentals of React for a time, I was able to get a better understanding of React Component lifecycles and implement this functionality correctly via setState.
Conclusions
Working on the myFlix project was a great experience, both from enjoyment and learning perspectives. I was able to create a Full Stack Web Application from start to finish and implement most of the functionality I wanted to. This project has given me the experience and skills needed to start working on my own passion projects, which I have thoroughly enjoyed working on since.
In the future when I return to this project, I would like to redesign the frontend to make it look a little bit cleaner and more professional as practice for my frontend design skills. I'd also like to add different user levels (e.g. regular user vs admin), and have admins add/remove movies from the database.