Harmony

Harmony is a web app that allows users to share playlists with friends, no matter which streaming service they use. Users sign in with the account they already have, add friends, and send them playlists. Once accepted, the playlist is matched track by track and recreated in the receiver’s library. The app is primarily divided into three screens: “Playlists”, “Friends”, and “Account”. Below is an interactive demo running on sample data, so feel free to tap around and try out each screen.

The global music streaming population is split into platforms that do not communicate with one another. This digital division can split friends, family, and even romantic partners.

Interviews with specific individuals uncovered the following:

• Multiple couples were made up of one Apple Music user and one Spotify user. Some partners were barely willing to download the competing software to manually transfer songs and playlist recommendations to the other, while others simply gave up.
• Many users refused to even try sharing music with others using competing services, even when the individuals were best friends or romantic partners.

Services already exist that allow users to transfer playlists from one streaming service to another, like TuneMyMusic,² Soundiiz,³ and SongShift,⁴ though they mainly act as account migration tools. Those that allow playlist sharing can turn a playlist into a link that opens on whatever service the recipient uses — proof that the technology backing Harmony is realistic and commercially viable.

What none of them build is a relationship. Their sharing is a link you generate and paste somewhere — anonymous, one-directional, and finished the moment it's opened. There is no friends list, no inbox of playlists from specific people, no record of who you actually trade music with. Sharing is a byproduct of a transfer tool rather than the point of the product.

Hence Harmony's thesis: be the social layer between services, not another migration tool. Keep everyone on the platform they already love; make the playlist the thing that travels.

I chose the name for what it suggests. When two singers harmonize, they come together in sync. That matched what I wanted the app to do, bringing several platforms together and syncing playlists across them.

For the logo, I wanted a music symbol people would recognize instantly. A tuning fork came to mind first, since I remembered my music teachers using one to find a pitch and harmonize with it. Then I noticed that in many fonts, the Y at the end of the name already looks like a tuning fork, and that settled the pairing of the name and the symbol.

From there, I only explored display typefaces whose Y was drawn like a tuning fork, and picked Righteous from that set.

I chose purple because it stands apart from the colors of the popular streaming services while still feeling friendly and eye-catching. I made the logo a circle so it would pair with the circular logos of other streaming services, and because it shares its shape with a vinyl record, another music symbol. Finally, I drew the tuning fork inside the circle from the Y in Righteous itself.

The goal of Harmony’s design system is for every component to show what it does through how it looks. I leaned on conventions people already know from the apps they use every day. A paper plane sends, a badge means something is waiting, three dots hold more options, and a pencil edits.

The system keeps those signals consistent from screen to screen. Its components start from shadcn/ui primitives built on Base UI and take every color, font, and corner radius from tokens based on the brand, so purple always marks the main action on a screen. Decisions about hierarchy, emphasis, and interaction are made once in the system, not re-litigated component by component.

I built the system around the three streaming services from the start. Every playlist carries its service’s logo and a link back to it, and each service gets its own section, so it’s always clear where a playlist lives. Cover art is never cropped, filtered, or covered, and Spotify’s covers use the exact corner radii Spotify asks for.

Harmony is a Next.js app written in TypeScript and hosted on Vercel, with Supabase handling accounts, friendships, and shares. Its animations and finishing touches are built with Motion.

A shared playlist stores the track list itself, with each track’s title, artists, album, and ISRC, instead of a live link to the playlist. The recipient can add it to their library whenever they choose, as the share survives the sender editing or deleting the original. Anyone can open a public playlist link without an account.

An ISRC, short for International Standard Recording Code, identifies one specific recording, and the same recording carries the same ISRC on Spotify and Apple Music. Harmony looks each track up by its ISRC first, which makes for a near-exact match across streaming platforms. YouTube doesn’t expose ISRCs, so tracks sent there are found by a scored search. Matching runs in the browser, as required by Apple Music, and shows live progress.

Harmony works end to end today. Users can sign in with any of the three services, link the others, and share playlists with friends — or with anyone, via public snapshot links — while every profile carries its owner’s pinned favorites for friends to save from directly. The primary constraint on growth is external. Spotify and Google keep new applications in development mode with capped user allowlists, so onboarding remains invite-based while the app pursues production API access.

More than anything, Harmony reinforced that form follows function. Every decision became an exercise in communicating the maximum amount of information with the minimum amount of visual noise. I also learned that technical constraints aren’t always limitations; API capabilities, branding requirements, and platform conventions often become the framework that gives a product its character. Designing within those boundaries consistently led to cleaner, more intuitive solutions than trying to fight them.

Moving forward, I plan to keep improving Harmony in a few key ways: