myMovies App (React)
Case Study
Introduction
myMovies is a web app for movie fans, that offers information about movies, directors, and
genres.
Users can create a profile, update their data, and collect their favorite movies.
The project involved creating a RESTful API, building the databse with Mongo DB and the client-side
using React/Redux and Bootstrap.
myMovies App in use
Objective
The aim of the project was build a web application using full-stack JavaScript technologies to
showcase for my portfolio.
The problem to be solved was building the complete server-side and client-side for the
application from scratch.
To achieve this, JavaScript development, web server frameworks, databases, business logic and
authentication had to be mastered using the MERN tech stack.
Screenshot of finished app (main view with movie list)
Context
The myMovies application was part of the web development course at CareerFoundry to build skills
in React and Redux, connecting to a self created API, build a database and implement Bootstrap
for the UI.
The project brief described the features and the requirements accurately and the exercises were
structured to follow this guideline.
Project brief Careerfoundry (source: Careerfoundry)
Approach
To build an app that serves movie fans with information, there had to be the server-side, that stores all the data, and the client-side, that has the user interface to enable movie fans to interact with all the information.
Creating the endpoints in the API
1. Step: Create the Server Side
The first step was to create a RESTful API using Node.js and Express. For this, code with the
HTTP methods for the endpoints had to be written, while looking at the user stories from the
project brief.
After that the database was set up with Mongo DB.
2. Step: Create the Client Side
In the second part of building the app, I created the components with React.
The main view component contained the app routing, and there had to be a registration and a
login components, handling the authentication.
The main view displays list of movies, based on a function that maps through all movies and
creates movie card components.
Movie view, director and genre views get detailed information from the database and display
them.
Functions to add and delete a movie from a list of favorites were added, as well as updating and
deleting user data.
At this point the first part of the project, the server side, came together with the client
side - all connected and accessible through the UI.
Main view with movie list and search function
Movie view with dteails about movie
Profile view with favorite movies of user and form
Profile view with favorite movies of user and form
Filtering the favorite movies of a user in the profile view
Reflection
It was challenging to understand the general structure of React and the use of props and state, how
things are connected, how data is passed between components and how it can be accessed in the
database to be used in the functions.
I found it difficult to find the right way to filter the favorite movies of a user and to implement
the authetication.
To keep an orientation I got help from my mentor and a React developer I know.
Duration + Next Steps
Both parts of the application together, the server side and the client side, took me about 2 months.
The next step will be to refactor the code using Redux Thunk, structure code differently, isolate the function. Also some work on the buttons in the profile view could be made.