CS 2340: Spotty Wrapped

This is a linkpost for https://sites.google.com/view/spottywrapped/home

I took Georgia Tech's CS 2340, Objects and Design, in Fall 2024 with Pedro Feijoo-Garcia. It was a course teaching OOP principles and web development. This year's version was easier than what I heard from previous years, and we only built two web apps instead of an iPhone app and a web app, but it was still fun and I learned a lot.

The second project was supposed to be a clone of Spotify Wrapped. Our group decided to innovate on the idea by introducing a cute mascot named Spotty.

He features in most of the web pages as a lit-html custom component containing a-frame 3D models. When the mouse hovers over him, he cutely stares at it. We eventually even 3D printed a figurine of Spotty!

...Anyway. For the backend, we used Django as taught in the first weeks of the course and built a web app that could take a user's Spotify data and display it in a similar way to Spotify Wrapped. I added Google authentication and Spotify login to the project and wrote the logic for scraping the data from Spotify's API. It was pretty straightforward to implement, but Spotify introduced additional limits on the API in the end of November, right before we were supposed to present the project. Because of this, I had to replace some of the data with dummy values.

The frontend is a hodgepodge of HTMX, pure Javascript, lit-html, and, most importantly, a-frame: we came up with a way to use the VR declarative UI library to act as a flat canvas for 3D models and a game engine. Other than that, the code liberally mixes Django templates with Javascript DOM manipulation, which is not the best practice but was the easiest way to get the project done in time.

The website has an 80s-like synthwave aesthetic and uses purple and pink as the main colors. The title page has a procedurally generated animation of a city with purple floating sine waves waves and a white-speckled purple-to-magenta Perlin sky (partly generated by Claude (we were allowed to use AI tools for the class)). The name of the app slides down from above with a trail.

Yes, the trail is made out of copies of the <img> element. Yes, it is slow and becomes choppy when the computer is under load, like mine was during recording. However, the eye candy it is in perfect conditions is worth it.

We hosted the website on Heroku using Heroku's Git integration. However, Heroku stopped being free in recent years, so we shut the website down immediately after the project was graded. The code is also not public because we were required to use a private repo for the project. However, you can see a more detailed description of the project on the Google Sites page. You can also look at the video demo again: