Go back to main-page

Case Study for myFlix full-stack web development project

Overview


myFlix is a web app, developed using the MERN stack, that provides users with access to information about movies, directors, and genres. Users are able to create an account, update their personal data, and create a list of favourite movies.


Purpose & Context


myFlix was a personal project I built as part of my web development course at CareerFoundry, Berlin, Germany to demonstrate my mastery of full-stack web development using frame works like React and AngularJS.


Objective


The aim of the project was to have an ambitious full-stack project I can add to my professional portfolio. Also to build the complete server-side and client-side for the application from scratch. This aim technically represents the problem to be solved

screenshot of movie list

Approach



Server-Side


This is a a RESTful API created using Node.js and Express, that interacts with a non-relational database (MongoDB). The API can be accessed via commonly used HTTP methods like GET or POST. To retrieve data from and store data in the database, CRUD methods are used. The API provides movie information in JSON format.


arrow_rightView my app documentation


To test the API, I used Postman. I also included user authentication and authorization code in the form of basic HTTP authentication and JWT authentication.

screenshot of unautohrized postman test screenshot of authorized postman test

Client-Side


It is a single-page, responsive application, developed with React and React-Redux. After completing the API, I started to build the interface users would need when making requests to, and receiving responses from, the server-side. It provides several interface views, including, but not limited to, a main view (shows a list of all movies), single movie view (shows data about a single movie and allows users to add the movie to their list of favorites), a login view, a registration view and a profile view (where users can update their user data and list of favorites).

screenshot of login view
screenshot of movie view
screenshot of profile view

Challenges


I particularly found AngularJS framework interesting. Despite that the development process seems also quite interesting, This project was still not my favorite because of the complications I later noticed about the TypeScriipt language of Angular framework seems to have been simplified better.
The most memorable side of the project is that, I quickly became familiar with using the terminal because of the frequent troubleshooting and installations.
Eventually, the help provided by the Tutor made the difference and I must say that the frequent troubleshooting was an advantage in terms of learning

Duration


The development of the client-side was particularly challenging. It took me a month to accomplish the objectives. Eventually, after some break and a restudy of the React documentation, a better understanding was achived as to the functionalities of React and React-redux.

Credit