Project Overview / Specs

Proj3Spotify is a full-stack music recommendation engine that finds the 7 most similar songs to a user-provided track, searching a dataset of over 114,000 Spotify songs. It features fast search and ranking using custom data structures and algorithms for both performance and accuracy.

Frontend

  • HTML, CSS, JavaScript
  • Responsive UI with song cards and details

Backend

  • C++ (rapidcsv for CSV parsing, httplib for HTTP server)
  • API for song search and recommendation
  • Returns JSON with top 7 similar songs and their attributes

Algorithms & Data Structures

  • Trie tree for fast prefix search on song names
  • Max-heap and merge sort for efficient sorting and ranking

Dataset & Features

  • 114,000+ Spotify tracks (CSV)
  • API returns detailed song info for recommendations

Preview

Trie tree search screenshot

Trie tree search: Input an incomplete song name and the closest match will be used by the app.

E.g., typing "Bohemian R" will match "Bohemian Rhapsody".

Song card details screenshot

Song details: Click a song card to view a popup with full details—title, artist, album, score, tempo, genre, danceability, energy, duration.

How to Run / Live Demo

There are two main ways to search for recommendations in the app: by entering a song name or by selecting a random song. If you leave the input blank and click Update Song, the app defaults to "The Real Slim Shady". When you use Update Song, the app leverages a trie tree for fast prefix search to find the closest matching song title, then ranks the songs using a min-heap. If you use Random Song, the app picks a random track from the dataset and ranks the results using an ordered map. Both methods use the same similarity algorithm, comparing audio features like tempo, danceability, energy, and genre to find the best matches.

After forking the repository and creating your project folder:

CLion Users

  1. Open the project in CLion.
  2. Build the project.
  3. Edit the run configuration: In the "before launch" section, remove the build phase and add "Launch Web Browser" with the link set to http://localhost:63342/Proj3Spotify/frontEnd/index.html.
  4. After building, press the run button. This will launch both the website and the backend server at the same time.
  5. MacOS users: Remove the last line in CMakeLists.txt where it says "Add windows socket libraries".

VS Code Users (Windows)

  1. Install MinGW-w64 (for g++), and add its bin folder to your system PATH.
  2. Install VS Code and the "Live Server" extension.
  3. Open a Command Prompt in your project folder.
  4. Compile the backend server:
    g++ -o musicEngine main.cpp
    Run the backend server:
    musicEngine.exe
  5. Open index.html in VS Code.
  6. Right-click index.html and select "Open with Live Server".
  7. Your browser will open to http://127.0.0.1:5500/frontEnd/index.html.
GitHub RepoVideo Demo

Note: You do not need to use CLion specifically—any IDE or terminal will work. Replace the live demo link with your actual deployment if available.