REFLECTION

As a life-long Star Wars fan, this project was a fun challenge. The site experience lets users choose their side — the Light or the Dark — and browse through characters who have chosen the same path. I also created a way for users to let fate decide their destiny and reveal who they might be in a galaxy far, far away.

For this final project, I wanted to combine several lessons we learned throughout the semester and “combo-meal” them into one cohesive experience. While I found a lot of the API and data array projects intimidating originally, there was so much foundation to those assignments that I felt confident [enough] to use them as a base for my idea.

Vue drives the experience by working hand-in-hand with the API. While many of the basics came from previous lessons, filtering the data was a big challenge. The Akabab Star Wars API includes affiliation data, but no built-in “light/good” or “dark/bad” categories. After working through a few tutorials on keyword filtering, I created my own classification system and was able to sort characters cleanly into each side. Character cards are then updated dynamically with text and images as you scroll through the selections.

One of the biggest — and most unexpected — hurdles was the broken image links in the API. After several hours of experimenting with different fallback-image methods, I went to Jake for guidance. Thankfully, he was able to find a solution for validating each image and replacing bad ones on the fly. Once I implemented his solve, everything worked perfectly. (Thanks again, Jake!)

The “Choose Your Destiny…” page uses similar logic, but instead of relying on keyword filtering, it brings in the Math.random techniques from an earlier exercise. Once the full API dataset loads and each image is validated, the system randomly selects a character and reveals them in a static display window.

When it came time to style the site, I leaned heavily into the look and feel of StarWars.com. I incorporated similar visual thematics in the navigation bar, buttons, backgrounds, and overall layout. I even used their star-field background and slideshow navigation buttons to make the experience feel as authentic as possible.

CSS ended up being my favorite part of this project. It let me incorporate lessons from my individual CSS concentration and pushed me visually to match the look I was aiming for. While four of the five pages share a very similar structure, the homepage challenged my alignment and z-space skills the most. I also wanted to use carousels instead of the simpler button-triggered slideshows from earlier assignments. And I was able to reuse some animation techniques from my “The Bear” site, which added a nice finishing touch.

Looking back, it’s rewarding to have built a site that pulls data from a large API of hundreds of characters and automatically sorts them into Light Side and Dark Side categories. I think the destiny generator adds a fun, storyline-appropriate element as well. I’m really happy with the design and art direction of the site. It feels connected and authentic to the Star Wars universe.