Case Study Page

project thumbnail

Star Wars Character Guide

A visual guide to characters from the Star Wars universe using SWAPI




School Project


Solo Developer

Project goal

The goal was to create a character/movie guide using the Star Wars API. The specifications were to populate a list with the names of 10 characters then upon clicking on a name, make another call to the API and return a movie that the character has appeared in and list the movie title, opening crawl, and movie poster.

As a challenge, I decided to do more than what was required and created a full guide which involved returning all the characters from the API. I also incorporated the functionality to search for a specific character and navigate back and forth through all the characters.

Technologies Used

I used HTML and SASS for the website structure and styling, JavaScript for the functionality, and GreenSock for animations.

How it was created

I started off by reading the Star Wars API (SWAPI) documentation to familiarize myself with its usage and endpoints. I then made a simple example to test it out. Once I was able to make a successful call to the API, I started planning out the logic that I would follow when coding out the actual functions in JavaScript.

With the pseudocode finalized, I sourced the images that I needed of the characters and movie posters on Wookieepedia and then I began coding the basic structure of the website with HTML and minimal SASS. After that, I coded the functionality using JavaScript.

Once I added the functionality and made it work as intended, I began doing some research (mostly on the official Star Wars website) to get inspiration for the styling of the website. After I finished styling all of the components, I then added some subtle animations with GreenSock.

project imageproject imageproject imageproject imageproject image

Thanks for checking out my case study.

Here are some of my other projects & work.

If you like what you see and think I'd be a good fit for your next project, I'd love to chat!