honkoan / project-movies

Project Movies

The project idea for this week was to create a multi-page React app with movies fetched from the API of Themoviedb.org. This was a pair programming project where we used React router for the first time.

The problem

The first action point of the week was to create an account with Themoviedb.org, in order to get an API key. We had to do two fecthes for this project. One to fetch all the movie cards presented on the main movie list, and one to fetch all the relevant details about a movie selected.

In our first pair programming session we created the structure for the React app by creating all the components, which is a movie list, where we display all the movie covers, and the movie card, where the info on each card is displayed, making the fetches, and creating the page for the movie details. After the structure was set, we started with the styling of the application. We hesitated a bit whether to go with displaying one movie card on mobile, two on tablet and four on desktop, or to stick with 4 for all, but finally decided for the layout we've selected now. When it comes to styling, we have used mainly flexbox and we have also used hover effects in order to get the correct presentation of each card.

Technologies used: React, React Router, CSS, API's

View it live

The deployed site can be seen here: https://therese-anna-kaisa-movies.netlify.app/