Case Study: myFlix movie app

Introduction

Overview

myFlix is a movie app built with the MERN stack that allows users to sign up and log in, update personal information, and access information about movies from a database as well as create a list of their favorite movies.

Objective

The goal was to implement a complete project. The problem I wanted to solve was to develop the complete server and client side of the application from scratch. Also, I especially wanted to gain hands-on experience with Node.js and React.

Purpose

The app was a personal project I did as part of my web development course.

Built with

Serve-side: Node.js, Express, MongoDB, Mongoose, bcrypt, JsonWebToken, morgan, Passport

Client-side: React, React-Bootstrap, Redux, JavaScript, Parcel, Axios, proptypes

Project Scale

1 month project

Approach

Server side

For the server side I created a REST API using Node.js and Express. The endpoints of the API can be accessed with HTTP methods (POST, GET, PUT, and DELETE) to Create, Read, Update, and Delete (CRUD) data from the database. (Take a look at the endpoints.) I set up a database containing all the information about movies and users with MongoDB. The business logic for the database is modeled with Mongoose. The data is provided in JSON format by the API. I also included HTTP authentication and JWT authentication.

Code server-side

app.get(
'/movies/:MovieTitle',
passport.authenticate('jwt', { session: false }),
(req, res) => {
  Movies.findOne({ Title: req.params.MovieTitle })
      .then((movie) => {
        res.status(201).json(movie);
        })
      .catch((err) => {
        console.error(err);
        res.status(500).send(`Error: ${err}`);
      });
  }
);

Client side

After I completed the server side I wrote the interface for the movie app so that users can sign up and login, update their personal information, and create a list of their favorite movies. The interface is a responsive single-page application (SPA) built with React and Redux. I designed the app with React-Bootstrap and SCCS. The user interface includes several views, in particular a login and registration view, a main view that displays a list of all movies, a single movie view that displays details about a movie, and a profile view where users can update their user data and view their favorite movies.

Code client-side

Challenges

Developing a full application from scratch was quite a challenge. Building the server side and setting up the database have been very enjoyable. The biggest problems I had with this project were on the client side. This project was my first time using React and Redux, so it took me a while to get used to this approach. By the end of the project I gained a lot of understanding of React and Redux in general and specifically how to manage the state.

(Preview images made with mockuper.net and techsini.com)