Wu Tang Clan: Interactive Discography

Project Overview

I conceived this project as a means to practice and heighten my React JS skills. I wanted to incorporate my love & knowledge of music into a project that would highlight my front-end abilities as well as my understanding of RESTful APIs. As a long-time fan of New York hip-hop supergroup Wu Tang Clan, I felt their structure as a group composed of solo artists with their own divergent careers would be well suited to my idea for an interactive timeline of music releases.

Ideation

My idea for a WTC fan app was inspired by a Reddit discussion about which members had appeared on the most songs together. I had initially intended to create an app that would filter individual songs by which WTC members were featured, but on further consideration I felt that a simpler starting point would be preferable to familiarize myself with the Spotify API, which I had chosen to source my data. I settled on the idea of a visual timeline that would show the month & year of each release by the group and each of its members.

Development

I chose Vite to initialize my React project and establish my development environment. I also installed the 'React Bootstrap' library to provide React-friendly Bootstrap components. After setting up my app & familiarizing myself with Spoitfy's API by studying the documentation and testing some calls in Postman, I set about writing a useEffect hook that would request an access token for user authentication. Another useEffect hook was then used to fetch all albums from an artist, specified by the artist's unique Spotify ID.

Data

In order to fetch albums from each of the group members, I created an array of 'artist data' that includes each artist's name and their Spotify ID. As some members have additional side projects or aliases, it was necessary to include the 'artist ID' as an array of IDs to be called. At the point that I had successfully fetched the required album data, I noticed a couple of unexpected issues. Many of the releases appeared more than once, presumably due to having been re-issued at some point. I was able to eliminate several of these with a conditional JavaScript statement that would exclude titles that already appeared once in the result. However, this only worked for releases where the title field contained an identical string. To exclude non-exact duplicates and a handful of other unwanted titles that were included (presumably due to erroneous artist credits on Spotify's end), I created an array of Album IDs that would be excluded from the results via another conditional statement.

Interface

Having fetched and cleaned up the API results to my satisfaction, I was now able to display a series of cards on screen, each including an album's cover art plus title and artist name. In order to build out my timeline and place each album in its correct location, I would need to employ CSS Grid to create a graph with release year as the x-axis and release month as the y-axis. By extracting the year and month from the release date field for each release, I was able to use this data to assign the appropriate grid row & column to each mapped item in my albums array. At this stage, I was able to see all of the albums placed on the graph as intended. However, as many of the entries had incorrect or incomplete release date info, it was necessary to use conditional logic to update the individual albums for which the correct release date was not provided by the API.

Now that I had all of the albums mapped correctly to the graph, my next task was to allow the user to filter the albums by artist. I used my existing 'artist data' array to map a 'toggle' button for each artist, that would trigger a handler function that would display only albums from artists who's buttons were in the active position. The handler function utilizes a useState hook to update an array of filtered albums. As Spotify's 'Album' endpoint, via the 'include_groups' prop, also allows for calling of singles, compilations and guest appearances, I decided to allow users to choose which of these formats to include on the graph. I created an array of the 'include groups' and mapped another row of buttons to filter out the different formats.

Interface, cont.

With the API data now displaying and filtering as intended, I moved on to enhancing the user experience with background graphics and animations. I used CSS animations to create a hover state for each card. As the album graphics had to be quite small to fit into a reasonably sized graph, I wanted them to enlarge on hover, and also have a text area appear below the graphic to show the artist and title info. To delineate the years on the graph's x-axis, I mapped an array of transparent boxes to only the odd years. An array of months was mapped along the y-axis. I also used the day-of-month from the release date to create a small offset in the position of the card, so that albums released in the same month would not stack directly on top of one another.

At present, this app is still a work in progress. Planned improvements include responsive design, 'fly in/out' animations for the album graphics, and an embedded Spotify player with a 'play' button on expanded cards, so users can listen to music without leaving the timeline. I also plan to add the song filtering feature mentioned above.