Hero Section - Project Case Study
Star Wars Movie Guide
The project focused on creating an interactive list of Star Wars characters, using the functionality provided by the Star Wars API. The list includes 10 iconic characters from the saga, and clicking on each one triggers a call to the API to retrieve detailed information about the movie in which that character appeared. This includes the movie title, the opening crawl, and a representative image of the movie.
Project Date
-
Date
01/02/2024
-
Type
Website
-
Role
Front-End Developer
-
Team Members
Brayan Hortua
TECHNOLOGIES USED
Research and Project Overview
Challenge
The main challenge was to successfully integrate the Star Wars API to retrieve specific data, such as the movie title, the opening crawl, and the representative image. This had to be achieved using JavaScript and fetch calls to interact with the API, along with implementing the then-and-catch error methods to handle API responses efficiently and manage any errors during the calls.
Brainstorming and Research
The creation of the character guide with their respective movies started with a detailed analysis of the Star Wars API documentation. This step was crucial to identify the necessary data, such as the characters' names and the movies, as well as to understand how to obtain related images for each.
Process
Once this information was gathered, we proceeded to the design and implementation phase. Initially, the creation of a character list on the main screen was considered to provide users with an overview of the available options. Clicking on each character triggered a function to display specific results of the movies in which that character appeared.
Solution
The solution to this task involved creating a responsive character list that could be viewed seamlessly across desktops, mobile devices, and tablets. Additionally, a main navigation was developed to enhance the user experience, along with a link that directed users to the official Star Wars page for further exploration of their favorite series and characters. Simultaneously, an introductory animation for the website was created using the Greensock library, and spinners were implemented to improve the user experience during data loading on the webpage.
