Movie App

Overview

Movie App is a web app built using the MERN stack. It provides users with information about movies, directors, and genres. Users are able to create an account, update their personal data, browse movies and create a list of favorites.

Context and Objective

The app was a personal project developed during my CareerFoundry Full-stack program. The aim was to build the entire app from scratch, working both on its back end and front end. The front end was developed in two versions, one using React and the other using Angular (both can be seen in my portfolio).

Approach

Server-side

I created a RESTful API using Node.js and Express, that interacts with MongoDB (a non-relational database). The API can be accessed via Ajax requests (HTTP methods such as 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. Postman was used for testing the API. For authentication and authorization, I used basic HTTP authorization and JWT authentication.

Client-side

When the server side was done, the next step was to build a responsive interface through which users can communicate with the server side (by making requests and receiving responeses). The client side was built using React and React Bootstrap. It provides users with the following views:

• Login / Signup view
• Main view – shows a list of all movies and the search bar
• Single Movie view – shows data about the chosen movie and allows users to add the movie to their favorites
• Profile View – shows user’s data, their list of favorite movies (where they can also remove a movie from favorites) and form for updating their data

Postman was used for testing the API. For authentication and authorization, I used basic HTTP authorization and JWT authentication.