Case Study for myFlix Project

Overview

myFlix provides users access to information about different movies, directors, and genres. Users can sign up, update their personal information and create a list of their favorite movies.

Purpose

myFlix is a personal project I built as a part of my web development course at Career Foundry to demostrate my skills to create a full-stack application from scratch.

Objective

The aim of the project is to learn fundamentals of server-side development and create the user-interface (client-side) based on it as well as building a showcase to be added in my professional portfolio.

Approach

Click the images to see in zoom

screenshot of postman sending a request to get movies data

screenshot of postman sending a request to update user details

Server-Side

I first defined the RESTful API endpoints using Node.js with its popular framework, Express. The API can be accessed and perform CRUD operations (Create, Read, Update, Destroy) via commonly used HTTP requests like GET and POST. To test the API, I used Postman. I then created a non-relational database, MongoDB using Mongoose to model the buisiness logic for interacting with the database. In addition, CORS(Cross-Origin Resource Sharing) policy is used for data security and validation to keep the application safe by restricting access to only the allowed domains. For user authentication and authorization, I implemented basic HTTP authentication for the initial login request and JSON Web Token (JWT) authentication for the subsequent ones. Using passport, an authentication middleware for Node.js and Express, I simplified the process significantly. Lastly I hosted the server-side application on Heroku.

Client-Side

After completing the server-side development, I started building a client-side of the full-stack application. I used React, popular JavaScript library for creating a single-page application (SPA) together with React Bootstrap which helps to maintain consistent styling of the user interface and apply responsive design. I incorporated client-side routing using React Router so that the application's state (what's displayed on the browser) can be stored and that allows users to share the link to the correct content with others.

screenshotof myFlix single movie details

Challenges

The most challenging part was to get grasp of React usage. It took me a while to understand how the application lifecyle (React component cycle) looks like from opening the app, performing operations to closing the app and how the user interface components can interact with it upon user actions. After taking my time reading the resources and practicing repetitively, I started to enjoy working with React and managed to successfully implement the functionality for the browser to display the content dynamically according to what operations users perform.

Future Steps

I am happy with how myFlix application works now but to continue improving the user experience, I would like to expand the application by adding some features like allowing users to sort their favourite movies based on different criteria, create 'to watch' list in addition to 'favourites' list and more.