Music Convergence

A curated tile map of musical lineage — click an artist to start listening, follow the connections to the next.

React 19 TypeScript Vite Zustand Hono Cloudflare Workers Supabase Spotify Web API

The problem

Spotify’s “fans also like” is a black box. Last.fm’s similar-artists list is flat. Neither tells you why two artists are connected — was it a producer, a sample, a label, a scene, a shared session player? I wanted to see a curated map of the connections I actually care about, and I wanted the map to be a listening device at the same time.

The approach

Music Convergence lays out every artist in the library as a colored tile in a searchable grid — 500+ hand-curated entries, tile colors hashed per artist so the same name always gets the same swatch. Underneath the grid is a typed-connection graph: influence, collaboration, genre-birth, genre-bridge, personal, and temporal edges link artists to each other, each type with its own color and its own editorial “why” when you click into a node.

Music Convergence explore view — a grid of 513 colored artist tiles with a search bar and Explore/Listen/Follow tabs

The top nav switches between three modes. Explore is the grid above — scan, search, click. Listen opens a focused listening room for the currently selected artist. Follow pairs with Spotify now-playing so that whatever you’re actually listening to through Spotify auto-navigates the map — a passive mode for when you want the app to trail behind your listening instead of the other way around.

How it works

React 19 + Vite for the frontend. Zustand holds two stores — one for graph/selection state, one for the Spotify companion. A Hono-powered Cloudflare Worker acts as a thin proxy between the client and a Supabase catalog of artists and connections, which I curate by hand when I find a link worth including. Spotify now-playing comes in via the Web API with a short-lived access token; the follow-mode effect listens for track changes and fuzzy-matches the artist name against the catalog before re-selecting the node.

Results

  • 500+ artists hand-curated with typed connections — not an algorithmic embedding
  • Editorial “why” on every connection — influence, collaboration, genre-birth, and more
  • Spotify Follow mode turns the map into an ambient companion that trails your listening
  • Keyboard-first — / focuses search, Escape clears it