top of page

Web app development with API.

Ghibli logo.png

This is my 2020 Web Development project that I had accomplished during my study. The project allowed me to expand my knowledge and understanding of the use of API, appraising the digital input and output mechanism and feedback systems, methods of extracting data and finally was creating a friendly user interface.

AIm

My mission is to create a Ghibli search engine web app, which users especially Ghibli fan will be able to search for Ghibli's film and character details.

Users can type in one or two words, a suggestion panel will popup underneath for quicker access to films or characters that they are looking for.

Web app design

I want to design a simple and minimal web app, which is easy to navigate and find information. 

Unfortunately, the API that I use doesn't contain any images of characters nor films, so I have to manually look for all the images, rename them according to their ID from the API and put them into the film and character library that I've created.  

By javascript function, the data from the API can be extracted and used on the web app smoothly.

Character image library
Film image library

data from api

Taken API data for films

  • ID

  • Description

  • Director

  • Release date

  • Rotten Tomatoes score

Taken API data for characters

  • ID

  • Gender

  • Age

  • Eye colour

  • Hair colour

Link to the API: https://ghibliapi.herokuapp.com

Initial mockup

suggestion-mku.png
main-mku.png
hamburger_menu-mku.png
movie_search-mku.png
character_search-mku.png

Finalised design walkthrough

bottom of page