Lia Duguran

Movie Database


- back -

About


React | HTML | CSS | Movie Database

A movie website, showcasing a list of recently released films, sorted by its genre. The React framework and The Movie DB API were used to create this.

scroll

scroll down arrow

Design


Movie Database project on multiple devices. Desktop, phone, tablet and laptop

Process


Whitespace was used to enhance each movie poster and prevented the layout from becoming too cluttered. No color was used on this website, keeping the movie posters as the main focus.

A hover feature was implemented to view more details about the movie, minimizing the amount of text on the page.

hover feature on the movie website, desktop.
hover feature on the movie website

The genre box dynamically changes to the section the user selected. Helps the user know what they chose.

genre selection box, animation.
when the user selects the genre animation, the selection keeps the title animation.

If the database does not provide an image, a custom image appears.

No photo provided in the movie databse api
Movie Database, not providing an image for the movie.
custom missing photo shown
Instead of a missing image, a custom image appears.
code used to replace error image
code used to add missing image

Instead of the default of 10 pages for each genre, the number of pages changes according to the category.

number of pages on the action category
the action genre has 15 pages...
number of pages on the documentary section
while the documentary section has 37 pages

Note: This project depends on the state of The Movie DB API. If the database is down, the content of the website may not exist.

Created for educational purposes

- back -

- more projects -

Merry Me

Milk Studios

Weather Forecast

Movie Database

Japan

Portfolio