hero image

Project: Movies Web app

Assignment

Building a single-page web application (SPA) without frameworks. The purpose of this project was to take a step back and write a web app with vanilla JavaScript and HTML & CSS. In this project, the focus lay on fetching data from an API and manipulating it so it becomes usable to render in the UI of an app. As a subject, I could choose any API to work with. To understand the process of API's and the interaction of users, I had to draw an actor diagram and an interaction diagram. Code reviews by other students helped me with refactoring my code to higher standards.

Description

Do you also spend too much time looking for a decent movie to watch? With this application, you can instantly see the top movies off this moment! Find a movie to your liking and make some popcorn instead of spending ages to find a good title.

In this project, I choose to work with the MovieDB API and in particular the most popular movies at the moment and search-based movie results and details.

Highlights

Search for a movie

In this web application, you can search for a movie and receive more information. When you have found the movie you are looking for, you can visit the detail page to see a description of the movie and its rate.

search for a movie in the web app

Recently viewed movies section

Every time you view de detail page of a movie, it is added to the recently viewed movies. This section will show you your 10 most recent viewed movies in chronological order with the latest in the front of the row.

Adding of visited movies in the recently viewed movies section