Zhuan: 15-112 Term Project

Role //  Class Project
Duration // Apr 2023
Tools // Python, Spotify API (Spotipy), Procreate
For 15-112: Fundamentals of Programming and Computer Science, I designed and coded a 500+ line Python program that takes a Spotify user’s data and tells the user what their zodiac animal is, along with a graphical+visual representation of their recent listening activity. 

Ideation

I knew that I wanted to code a program involving Spotify API since online programs like Receiptify and Obscurify always interested me as a music lover.

I believe the music we love is a representation of who we are and how we feel at this point in time. Music is an ever-evolving spellbinding story - similar to the Chinese Zodiac and its folklore origins.

Much like how music can be represented by a spinning CD or by the cycles of life we go through, the Zodiac is represented by an infinitely spinning wheel of 12 animals with unique personalities. Zhuan, which means “spin” in Chinese, presented itself as the most appropriate name for my program. 




Initial Sketches


Making Zhuan

From my initial sketches, I updated Zhuan to have a sign-in + multiple saved user capabilities and graphs to accompany the displayed user Zodiac animal. 

These were the core features I had to implement and how I implemented them:

1. Getting the user’s Spotify data utilizing Spotify API for Python (Spotipy) and CSV import.

2. Interactive buttons, graphs, and text input boxes using OOP (Object-Oriented Programming). 

3. Picking and displaying the user’s Zodiac animal using a “best loop” algorithm based on the difference of the user’s average audio features (“acousticness”, energy, valence) from their currently most-listened-to songs compared to the given average audio features of each Zodiac animal. 

4. Displaying the user’s “Zodiac Songs” (top 20 currently most-listened-to songs), text input login system, and general page formatting using CMU Graphics

5. Original images for the title card and Zodiac animals drawn in Procreate. I opted for a hand-drawn, child-like style to highlight curiosity and music’s influence on us since youth. 
Snake: zodiac animal drawing
Dragon: zodiac animal drawing
Horse: zodiac animal drawing
Rat: zodiac animal drawing
Spotify/CSV data
OOP interactive button
CMU Graphics for various pages
Selecting Zodiac Animal using “best loop”


Below are the three main user flows of Zhuan.

No User Found
User 1: “kaitlynng”
User 2: “kendrawong”


Final Product





View my code here!


What I Learned
1. Although coding a large project seemed daunting at first, once I broke Zhuan down into parts and started chipping away at it - it was highly doable!

2. UI/UX is necessary for any project involving technology. Since this project was 95% coding-based, I wasn’t expecting to think about UI/UX, but they were highlighted in the project’s rubric! 
Next Steps
1. Make Zhuan available for public use! There are a few changes I need to make in order to meet Spotify’s guideline for public use of their data/API.  

2. Improve the visual design and UI using CSS/HTML/Javascript. The project guidelines required staying within 15-112’s graphics program which is creatively limited. 

3. More coding projects! (especially involving music and other forms of media).