Overview
This set of projects represents, all together, a full-stack project with a server-side API and two client-side applications using either the MERN or the MEAN stack. In the end, users should be able to sign up, log in and update their personal data. Once logged in, the user should see a list of movies and additional information related. And the users should be able to create a favourite list.
Here is a list of all links. You can find it again later in the text.
Purpose and Context
These projects were part of my full-stack web development program at CareerFoundry. In the end, the projects should demonstrate the skills required to accomplish the tasks and present portfolio-ready projects for me to use.
Objective
The result of this whole set or projects was to have two fully functioning full-stack applications. In addition, the API can also be used independently for different front-end solutions. When thinking about designing the whole project, I decided to dedicate it to the Infinity Saga of the Marvel Cinematic Universe.
You think it is nerdy? You are probably right. But we are talking about web development here. So let’s have a look at each project in detail.
Server-Side API
When starting to program, you might think that the first thing to do is to build and create the user interface with all its features. Probably, because as a user, this is most likely the only part you are in touch with. But this user interface is it a mobile app or a web app, needs data it can work with and visualise.
For this project, I created a RESTful API with Node.js, Express and MongoDB. To access the API, you can use CRUD operations via HTTP methods like GET, POST, PUT and DELETE. Once the data is retrieved and manipulated, it is stored in a non-relational way.
Endpoint testing has been conducted using Postman and user authentication and authorization in the form of basic HTTP authentication and JWT authentication. To make the API accessible, the project is hosted using Heroku.
Client-Side Applications
Having a solid API in the background, the next step is to focus on the front-end part and make the data accessible for the user in an appealing way. Therefore, I created two front-end applications: one using React, the other one using Angular. Let’s have a look.
React-App
Just as the title suggests, this application was developed with React and React-Redux. It is a user interface to access the endpoints of the API and receiving responses from the database. It is a single-page, responsive application with a number of different views and features including a login view, a registration view, a main view, with a list of all movies, a single movie view, with details about that movie and the option to add the movie to the list of favourites, and a profile view, allowing users to update their user data and list of favourites. For styling and responsiveness, I used Bootstrap as a UI library.
Angular-App
Let’s get MEAN...
...kidding. Wasn’t that bad at all. As the second client-side project for the API and the very last project of the course, I was better prepared of what was coming. I developed this application using Angular. The requirements are pretty much the same as those for the React app. In this app, I created a welcome page with a login and registration feature. In the main view, I have again the list of movies, and the profile view allows the user to manipulate the data again. However, there are some differences in the way details are presented and how a user can add a movie to or remove it from the favourites.
Challenges
The name says it all: Full-stack MERN/MEAN. It is the role project-set for the full-stack web development program. I spent most of the time of the course working on one of the projects. It was fun seeing the projects develop and working together in the end. Of course, these projects came along with challenges. Building an API, working with MongoDB, Heroku and Postman or getting to know React and Angular can be overwhelming, especially when it is the first time dealing with it. But knowing to have the great support of your tutor, your mentor and the CF-community helped me to master the challenges. In the end, the fun part was the bigger one.
Duration
It is difficult to fully assess if it took too much time to complete the projects. As I said, I definitely spend most of the time working on these projects. I would say the client-side programming – especially the first one with React – took longer than planned. In the end, I am happy with the result and the progress achieved.
CONTACT
