myFlix Project Case Study

Overview

The purpose of this project was to develop the back-end and front-end for an application called myFlix using the MERN stack (Mongodb, Express, React, and Node). The myFlix app would provide users with information on movies, directors, and genres. Users would also create a profile where they could add or remove movies from their list of favorites.

Approach

Server-Side

I created a RESTful API using Node.js and Express, which interacts with a non-relational database (MongoDB). The API can be accessed with HTTP methods such as GET, POST, PUT, or DELETE. CRUD methods are used to retrieve and store data in the database. The back-end contains two collections in JSON format: one for users and another for movies.

To test the API, I used Postman. Authentication and authorization for the user are also provided in the form of basic HTTP authentication and JWT authentication. Every time a user logs in, a token is generated and stored for future use.

API Documentation

I created endpoints for retrieving movie details, and updating user information. There were challenges with getting cors to work correctly allowing the user to login. It came down to having cors in the correct place in the code to get it to work. I overcame the issues and understood the project better at the end of it. It was a good feeling when all of my endpoints worked as intended.

Client-Side

Once the API was working correctly I built the front-end of the application using React and Redux. It is a single page responsive website styled with React Bootstrap. It has several views including login and registration, all movies, single movie, director, and genre views. From the single movie view a user can add a movie to a list of favorites which they can view in the profile view. In the profile view a user can edit their information and remove movies from favorites.

This was my introduction to React and it was a challenge to learn. Implementing all of the required functionality of the application took some time but taught me a great deal as a developer. I had issues with getting the favorites view and profile in the same view. I decided that having them as separate components would work best to avoid the issues I was having.

Challenges

This application was a lot to take in as a new developer with my first introduction to Node.js and React. I learned a lot about databases and structures and how to work with them. I was able to work out bugs in my code with the help of my tutor and mentor at CareerFoundry. I was stuck at points in learning React and Redux but I used console.log to see where the application was running into issues. It was a great feeling when everything was finally working as it was supposed to and the bugs were squashed.

Duration

The application development took around two months to complete. The back-end went relatively quickly and took about two weeks to complete. The front-end took about six weeks to complete because of some challenges and doing more research to overcome them. Due to scheduling issues I switched mentors in the program midway through building the client-side portion of this application.

Application Link
App Documentation

Credits

Role: Lead Developer
Tutor: Shan Gardezi
Mentor: Joel David Cross / Jonatan Caraballo