Heardle++

Project information

Technologies used

React: front-end
Express: back-end OAuth
Spotify Web API: asynchronous requests for playlist and track data
Git: version control
Adobe XD: user interface prototyping

Here is a short demo of how Heardle++ works:

Heardle++ is my systems design senior project for my computer science program at Wartburg College. It is an improved version of the web game Heardle, and is based on two core ideas:

The user should be able to quiz themselves on songs they might actually know - and not arbitrarily chosen "popular" Western songs.
The user should be able to play as many times as they want, and not just once per day.

Fig. 1: Playlist selection phase in Heardle++

From these two ideas was born Heardle++, a music quiz web app in which people with Spotify accounts can log in, select any of their public, private, shared and liked playlists, listen to a short preview of a random song from the chosen playlist, and quiz themselves on their own library's songs, as many times as they want.

Fig. 2: Guessing phase in Heardle++

This project is completed, although I have no plans of deploying it. All the core functionalities have been implemented and the game works as intended. That includes: OAuth with the Spotify Accounts service via an Express server, the game fetching all the user's playlist and track data, then displaying all of the playlists for the user to select, picking one song at random from the chosen playlist, playing a short preview of the audio, giving the user suggestions of songs from that playlist that match their input as they type, and the user being able to replay right away.

Fig. 3: Results phase in Heardle++

I still need to fix some minor bugs and quality-of-life issues, but feel free to check out my project on GitHub!