A Metro-style Spotify player for the web.
Browse your library, search Spotify, control playback, and install it like a mobile app.
| Home | Player | Search |
|---|---|---|
| Library | Album / Playlist | Settings |
|---|---|---|
zunify is a Spotify-powered progressive web app with a mobile-first, Windows Phone 8 Metro-inspired interface. It exists because the official Spotify app has become too bloated, crowded, and over-designed for people who just want their music library, search, and playback controls to be fast and calm.
It is also still hacky as hell. Expect rough edges, sharp corners, and the occasional "why did it do that?" moment.
It uses Spotify OAuth with PKCE, stores the Spotify Client ID locally in your browser, and talks directly to Spotify's Web API and Web Playback SDK.
A Spotify Premium account is required for playback control through Spotify's Web Playback SDK.
Main stuff:
- Library, playlists, albums, artists, and tracks.
- Spotify search.
- Playback controls and now-playing state.
- PWA install for phone use.
No clone, build, or deploy needed.
- Open the live app:
https://spotify-metro.je09.workers.dev/
- Create a Spotify app at https://developer.spotify.com/dashboard.
- In that Spotify app, add this redirect URI exactly:
https://spotify-metro.je09.workers.dev/
- Copy the Client ID.
- Open zunify settings.
- Paste the Client ID.
- Click
agree.
The Client ID and Spotify tokens stay in your browser storage.
zunify can be added to your home screen and used like a standalone app.
- Open https://spotify-metro.je09.workers.dev/ in Safari.
- Tap the share button.
- Tap
Add to Home Screen. - Confirm with
Add. - Open zunify from the new home-screen icon.
Use Safari for installation.
- Open https://spotify-metro.je09.workers.dev/ in Chrome.
- Tap the three-dot menu.
- Tap
Add to Home screenorInstall app. - Confirm the install.
- Open zunify from your launcher.
npm install- Create a Spotify app at https://developer.spotify.com/dashboard.
- Copy the Client ID.
- Add this redirect URI:
http://localhost:5173/
npm run devOpen:
http://localhost:5173/
Then paste the Client ID in zunify settings and authorize Spotify.
| Command | Purpose |
|---|---|
npm run dev |
Start local Vite dev server. |
npm run build |
Type-check and build production assets. |
npm run lint |
Run ESLint. |
npm run test |
Run Vitest tests. |
npm run quality |
Run lint, build, and tests. |
npm run deploy |
Build and deploy with Wrangler. |
This repo is configured for Cloudflare Workers assets through wrangler.jsonc.
npm run deployAfter deploy, add the deployed origin with a trailing slash to your Spotify app redirect URIs.
zunify does not need a backend for Spotify auth. Tokens and the Client ID live in the browser. Disconnect from inside the app or revoke access from your Spotify account settings at any time.
Yes.