Case Study for BananaFlix full-stack project
Overview
BananaFlix is the client side of a movie browsing app that allows users to register, log in and browse through movies. They can add movies to their list of favourites and they can view them and their profile details in the ProfileView, where they can also edit user details.
Purpose & Context
BananaFlix was a project I built as part of my web development course at CareerFoundry. It was intended as a place to practice newly acquired knowledge of JavaScript and TypeScript as well frameworks such as React and Angular. In addition, it served as an introduction to backend development.
Objective
It is part of a larger full-stack project and one of two clients (one built with React and one with Angular) using the same backend.
Tech stack:
-
Backend:
NodeJS (Express, Morgan, BodyParser, mongoose, CORS, Passport), MongoDB, Postman, Render, JSDoc. -
React client:
JavaScript, React, React-Bootstrap, Context API, Parcel, PropTypes, Axios, Netlify, JSDoc. -
Angular client:
TypeScript, Angular, Angular-Material, GitHub-Pages, TypeDoc.
--- Server-Side ---
I created a REST API using Node.js and Express, that interacts with a non-relational database (MongoDB). The API can be accessed via HTTP methods like GET or POST. CRUD methods are used in order to retrieve data from, and store data in the database. Further information about the endpoints can be found in the documentation of the API. The API provides information about movies in JSON format. It also stores registered users.
Postman was used to test the API. User authentication and an authorization code in the form of basic HTTP authentication and JWT authentication, is also included.
--- Client-Side ---
I built two client-side versions that interact with, and receive responses from, the server-side. One is a single-page, responsive application, developed with React, that provides several interface views:
- A registration view where new users can sign up
- A LoginView where they can input a username and password to log in
- A MainView that shows a list of all movies
- A MovieView that shows information about a single movie and allows users to add the movie to their list of favorites
- A ProfileView where users can update their user information and list of favorites
The other is made with Angular and has a set of different features, most notably the use of modals instead of separate views. In addition it does not offer a MovieView for a single movie, and the additional information is accessed though buttons that prompt modals.
--- Additional differences between clients ---
While both clients provide the user with the option to edit their information and login credentials, there is one difference between the two clients. The React client is accompanied by advanced form authentication while the Angular is not. This is simply because the creation of both clients was done with different goals in mind. The React project was where advanced JavaScript functions and state management, as well as prop passing between views, were prioritized. The purpose of the Angular project was to familiarize myself with the framework, learn the basics of TypeScript and employ more advanced forms of documentation. Therefore, the Angular client has both a simpler look and a somewhat reduced functionality.
--- Challenges ---
This as my first full-stack project and it provided me with ample experiences when dealing with problems during development. And there were many problems. For starters, managing the states without using Redux or Context API in the React client was very difficult. While I do intend to implement those solutions at a later stage, the fact I was forced to find a solution with the available tools, put me in a situation to have to learn more advanced ways of dealing with my code and increase my knowledge of JavaScript. In addition, managing the backend as well, gave me an opportunity to better understand the functionality of my websites. Out of the two frameworks, React was easier to understand, while it became clear that Angular is a powerful tool, when one has the time to comprehend it well. This project also increased my knowledge of the use of the terminal, as well as version control, which was very necessary, due to many setbacks and experimentations.
Credits
- My Role: Lead Developer
- Tutor: Ayeah Godlove Akoni
- Mentor: Ramadhan Aheebwa