Music Madness 🎵

Personal Project · 2025

Music Madness is an interactive web app that generates head-to-head tournament brackets from an artist's discography, letting users pick winners round by round until a champion song is crowned. It's built to feel like March Madness for music: fast, opinionated, and fun with friends.

I love music and bracket debates, so this project was a way to combine both. I wanted something where a group could sit on the couch, search any artist on Spotify, and instantly get a bracket that feels "real" enough to argue about—but simple enough that anyone can jump in without a tutorial.

User Flow

A typical session looks like this:

  1. Search for an artist and pull their full discography using the Spotify API.
  2. Music Madness automatically builds a single-elimination bracket, seeding songs and handling duplicates and alternate versions.
  3. Users advance through rounds by picking winners in each matchup until a champion track is crowned.
  4. Along the way, they can preview songs, see popularity rankings, and save or share the final bracket image with friends.

Visually, the app walks users from a simple search/home screen into a dense but readable bracket view, and finally into a celebratory champion modal with artwork and quick links.

Features

  • Artist Search: Enter any artist's name to instantly pull their discography using the Spotify Web API.
  • Automatic Song Import: Fetches track titles, album covers, and metadata directly from Spotify—no manual entry needed.
  • Bracket Generator: Randomizes songs into a single-elimination tournament bracket.
  • Duplicate Handling: Merges duplicates like different capitalizations or "feat." variants so votes stay clean.
  • Song Popularity Ranking: Uses Spotify popularity scores to seed tracks so big hits tend to rise later in the bracket.
  • Spotify Previews: Lets users play short track previews directly from Spotify before picking winners.
  • Save & Share Brackets: Exports or shares finished brackets so friends can compare results.
  • Interactive UI: Clean, responsive bracket interface that makes it easy to advance rounds on desktop or mobile.
  • Quality of Life: Sticky headers, dynamic tab titles, and auto-advancing logic when matchups are empty.

Tech Stack

  • Frontend: React, Next.js, JavaScript (ES6+)
  • Styling: Tailwind CSS
  • Deployment: Vercel
  • Music Data: Spotify Web API
  • Version Control: Git + GitHub

Live Demo

You can try out Music Madness yourself here:

👉 music-madness.vercel.app