Inspiration

A machine learning-based music recommendation system that uses Spotify song data to suggest similar songs based on various features.

Comment

Motivation

After exploring Spotify’s open data on track attributes, we realized there was an opportunity to build a content-based recommender that surfaces tracks based on how similar they are to someone's favorite song.

What it does

  • Search by song or artist: type in a track name or artist and get back the closest matches.
  • Similarity-based recommendations: once you pick a song, the system computes cosine similarity over standardized audio features and returns the top 5 tracks that “sound” most like your selection.
  • Real-time interface: as you type, the frontend debounces your input and queries the backend, updating results on the fly.
  • Responsive design: works seamlessly on desktop and mobile thanks to Tailwind CSS and Next.js.

How we built it

  1. Data processing
    • Loaded “Most Streamed Spotify Songs 2024.csv” in data_processor.py.
    • Extracted numerical features (danceability, energy, loudness, tempo, etc.) and applied a StandardScaler to ensure even weighting.
  2. Model & API
    • In recommender.py, built a cosine-similarity nearest-neighbors pipeline and persisted it with Joblib (music_recommender.joblib).
    • Exposed two FastAPI endpoints in api.py:
      • GET /search?query= to look up songs by name/artist
      • GET /recommendations/{song_id} to fetch the top similar tracks
  3. Frontend
    • Next.js App Router with TypeScript for type safety.
    • Tailwind CSS for rapid, mobile-first styling.
    • Debounced fetch calls in a React component to power real-time search and recommendation displays.

Challenges we ran into

  • Feature parity: making sure the scaler fitted during data prep matched exactly what the API used at runtime.
  • UX polish: designing a clean, responsive layout that gracefully handles loading states and empty-search scenarios.

Accomplishments that we’re proud of

  • Built a modern, responsive UI that feels snappy on desktop.
  • Automated the data-prep → model → API → frontend pipeline so new datasets can be swapped in with minimal code changes.

What we learned

  • How to structure a FastAPI service for low-latency production use.
  • Best practices in Next.js App Router, TypeScript typing, and Tailwind CSS for responsive layouts.
  • Debounce patterns in React to minimize unnecessary network requests.

What’s next for Music Recommender

  • User accounts & feedback: let listeners upvote/downvote recommendations to drive a collaborative-filtering layer.
  • Expanded dataset: pull real-time audio features via Spotify’s API to cover new releases.
  • Playlist generation: auto-create mood- or era-based playlists.
  • Mobile app with React Native for on-the-go discovery.

Built With

Share this project:

Updates