cinemApp – Case Study

Overview

cinemApp is a web application built using full-stack JavaScript technologies. The application consists of two main parts, the server-side and the client-side developed with the MERN stack, and provides data about movies, directors, genres, and actors. Users are also able to create accounts, edit their data and create a list of favorite movies.

Duration: 2 months

Role: Full-stack Developer

Technologies & Tools:

Back-end:
Node.js, Express Rest API, MongoDB, Mongoose, JavaScript, Postman, Passport

Front-end:
Parcel, React, Redux, React Bootstrap, SASS

Context

cinemApp was a personal project built during my full-stack web development course at CreerFoundry. The main purpose of it was to take my knowledge about full-stack application development to a higher level and to get more experience in this process.

Objective

As a full-stack developer, get to work with other developers on every single piece of the project, therefore is important to know which steps are included when building something from scratch. During the development, I worked with my tutor and mentor to create this app, which is a perfect one to showcase in my professional portfolio.

Image1: main view

Approach

Server-side

The skeleton of the project is the server-side, here is every single piece of data stored. I created a RESTful API using Node.js and Express.js that interacts with MongoDB, a non-relational database. The HTTP methods like GET, POST, or PUT give us access to the API and are secured with JWT (token-based) authentication. To receive, store, and edit data in the database we use CRUD methods which are: create, read, update, and delete, the four basic operations of persistent storage. These methods are connected with different endpoints receiving and sending data in JSON format. During development, these endpoints were regularly tested with Postman.

Image2: GET movie by title response example

After completing all the tests and the server-side development successfully, I started to build the user interface.

Client-side

cinemApp is a responsive SPA (single-page application) based on the existing server-side code developed with one of the most popular JavaScript frameworks, React and Redux that helps in state management. During the development process, I created several components or views to give the application a user-friendly and easy-to-use interface.

flow chart showing how to add movies to favorites

Image3: User-flow showing how to add movies to favorites

When users click on a movie then the movie-view is accessed, contains details about the particular movie, links pointing to the genre, author, and actors, and two buttons, ‘back’ and ‘add to Favorites’. The navigation is also present on every single view (excluded register and login view) and contains links to lists like the list of all movies and actors or the profile view. Accessing profile view users can edit their data and see their favorite movies. The last element of the navigation is the logout button which removes the credentials from local storage and redirects users to the login page.

Challenges

The whole project was a challenge for me, but this is why I enjoyed the development process so much. It took me time to understand how to build the relationship between the back-end and front-end of the project to accomplish error-free cooperation.

Retrospect

Working on this application helped me to understand the importance of efficient communication and time management. I also learned how to identify, understand and solve problems myself, using the unlimited resources on the internet.

What went well?

The favorite part of the project for me was developing the user interface with React. Taking into consideration that I had no prior experience with it, I am satisfied with the final design and with my React skills. I realized to solve any issues I faced with medium effort thanks to my patience and ability to search, find and personalize solutions in order to achieve the desired result.

What didn’t go well?

cross-origin resource sharing error example

Image4: CORS error

The most challenging part of the project was to solve CORS (Cross-origin resource sharing) issues during development. CORS is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. I spent a lot of time reading documentation and articles about it because there were situations when CORS blocked my requests sent from localhost. The solution I found was to disable authorization during development. After completing the project I hosted it on Netlify and enabled the authorization, which worked as expected.
(It may take a few seconds to load the page because Heroku (where the backend part is hosted) puts the app to sleep after 30 minutes of inactivity. This is what makes your app is slow to load. When the app's dyno is asleep, waking it up may take some time. But after the first load, it starts loading pretty fast because the dyno is active.)

What could be better?

I would like to increase the database size by adding more movies to it. I plan to add animations to every view so that when users click on elements the transition between views will be much smoother and the website comes to life.

The final product

After all the difficulties and a lot of fun during the development, the result is a minimalist movie database.

If you are interested please visit the following resources to learn more about this project.