Case study

MyFlix is a Movie web application consisting of a database with various movies and a client-side providing users with several features the access to information about different movies, directors and genres. Users are able to sign in and create a list of their favorite movies.

This project was part of the Career Foundry Web Development course. It is a perfect example to demonstrate my mastery of full-stack JavaScript development.

The aim of the project was to master a complete web application with a frontend and backend, using full-stack JavaScript technologies which I can showcase in my portfolio. Also, I had a personal objective to learn more about the tech architecture and be better equipped to make decisions regarding which framework or library to use for my future projects.

• • The first step of my development process was to built the database and write the back-end logic of how to access the application.
  
• • The next step was to develop the interactive front-end that enables users to experience the app's features.
  
• • Use version control along the way to track changes and host the code on GitHub.
  

The server side of the web application consists of a REST API and a database built with JavaScript, Node.js, Express, and MongoDB. The API can be accessed via commonly used HTTP methods like GET, PUT, POST and DELETE. For retrieving data from the database and store in a non-relational way, I used the CRUD operations “create”, “read”, “update” and “delete”. The API provides movie and user information in JSON.files

I used Postman for endpoint testing and Mongoose for the business layer logic. The database was built with MongoDB; the final project is hosted on Heroku.

For more information about each endpoint of the REST API, see documentation.hmtl

The client side was built with React. The goal was to develop a single-page, responsive application that uses routing, different interactions and has several interface views.

React is a JavaScript-based library that does not have the ability to make HTTP requests. This is a technical requirement, in that we want to allow the users to make GET, POST, PUT, and DELETE REST API calls in React App.

For this reason I imported a third party library Axios in my React Application. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. So the solution was very simple by implementing this as a dependency.

See GitHub for more on Features and Dependencies.

Developing the MyFlix Movie app has been an enriching learning experience in my web development education. Some of the features I implemented required me to gain a deeper understanding of React and Redux.

Overcoming Obstacles

A small problem encountered in development was the update profile feature. I was keep getting a 401 unauthorized response from the API request, and this is because I was not setting the Authorization header correctly. It’s a nice example of how Axios makes a PUT call to React App.