Song Battle
Vote on head-to-head music battles. Every vote shapes the global rankings.
Music rankings have always bothered me. Billboard uses streams, Apple uses sales, Spotify uses play counts. None of them ask the simplest question: if you had to choose between two songs, which one would you pick?
Song Battle started from that question. I wanted rankings determined purely by preference. No algorithms deciding what counts as a “listen,” no play-count inflation, no label politics. Just two songs, side by side, and your honest opinion.
What if the best song in the world was decided the same way we decide the best chess player?
How It Works
Two songs appear side by side with album art and 30-second Spotify previews. No context, no bias. Just the music.
Pick your favorite. One tap. Both songs’ ELO ratings update instantly based on the expected vs actual outcome.
Over thousands of votes, the leaderboard converges on a crowd-sourced ranking that reflects genuine preference.
Two songs. One choice.
The battle interface is intentionally simple. Two cards, two songs, two buttons. Each card shows album art, song title, artist, release year, and a 30-second audio preview pulled from the Spotify API. You listen, you pick, you get a new matchup. The whole loop takes about ten seconds.
Head-to-head battle with album art and vote buttonsRankings powered by math
Every song starts at 1500 ELO. Wins against higher-ranked songs earn more points. Losses to lower-ranked songs cost more. The K-factor of 32 keeps the board responsive. Over time, consensus emerges. The leaderboard shows ELO ratings, battle counts, and win percentages for every song in the pool.
Global rankings with ELO scores and battle statsSpotify Integration
Song data, album art, and 30-second previews pulled directly from the Spotify API. The catalog is real and the previews are instant.
ELO Algorithm
The same mathematical model used in chess. Songs gain or lose points based on the strength of their opponent, not just whether they win.
Framer Motion
Page transitions and card animations keep the voting loop feeling fast and responsive. Every interaction has weight.
Retro Aesthetic
Pixel fonts, neon gradients, and arcade-style buttons. The interface has personality because music deserves more than a clinical UI.
The app is built with Next.js and TypeScript. The Spotify Web API handles all the music data: track metadata, album artwork, and preview URLs. When a user loads the battle page, the server selects two songs weighted to favor matchups between similarly ranked tracks, which produces more informative ELO updates.
The ELO calculation runs server-side on each vote. Both ratings are recalculated based on expected outcome probability and the actual result, then written back to the database. The visual direction leans into a retro-gaming, neon-cyberpunk aesthetic. Press Start 2P and Orbitron for typography, magenta and cyan gradients, dark backgrounds with subtle glow effects.
What I Learned
Simple mechanics, deep engagement
The entire interaction is “listen, pick one.” But the simplicity is what makes it addictive. People keep voting because each matchup is a new debate with themselves.
ELO is elegant for subjective ranking
Taking a system designed for chess and applying it to music works beautifully. With enough votes, consensus emerges naturally from individual opinions.
API constraints shape the product
Spotify’s 30-second preview is a limitation, but it forces gut reactions that often produce more honest rankings than full listens would.
Visual identity carries weight
The neon glow, pixel fonts, and arcade buttons make voting feel like a game. People engage differently when the interface has personality.