Tinnymix

Overview

Tinnymix turns the two ways people actually assemble playlists into one product. The first is bulk import: paste the `00:00 Artist — Title` tracklist from under a YouTube mix, and every line is parsed, searched on Spotify, shown with swappable candidates, and shipped as a new playlist with a cover. The second is generation: pick a mood — Rainy Sunday, Late-night drive, Heartbreak, Pre-club — or describe a vibe in free text, and Gemini drafts the tracklist along with a playlist name, description and cover keywords. On top of those sit playlist management (rename, edit by describing the change, add and remove tracks, swap covers), a set of tools for duplicates, comparisons and cleanup, a Wrapped-style stats surface with top artists and tracks, a genre fingerprint, a listening timeline, a concerts view and a year-in-review, a Followed Artists Atlas that plots the artists a listener follows on a world map, and the original local-first cassette composer the project started as.

The architecturally interesting choice is that there is no backend for user data. Spotify authentication runs entirely in the browser over PKCE — no client secret, no session server, no auth library — and the resulting access and refresh tokens are written into IndexedDB through Dexie alongside tapes, playlist snapshots, saved cards, custom palettes and play history. Because the OAuth callback lands on a server route that has no access to the app's Dexie context, the exchange finishes in a small handoff page that validates the state parameter, swaps the code for tokens and passes them to the client to persist. Every Spotify call flows through one wrapper that retries once on a 401 by refreshing, marks the session disconnected when the refresh fails, and chunks writes to the limits the API enforces — 100 track URIs per add or remove, 50 ids per batch lookup. Cover uploads are re-encoded in the browser to a square JPEG with quality stepped down until the payload fits under Spotify's 256KB cap.

The keyed services sit behind thin Next.js route handlers so no API key reaches the client bundle: six Gemini endpoints (tracklist, liner notes, cover keywords, track facts, artist origins, natural-language playlist edits), plus Unsplash cover search, Brave Search artist news and Bandsintown tour dates. The Gemini routes validate the request with Zod, pin a response schema so the model returns structured JSON, and answer 502 rather than passing malformed output downstream. Every external service also has a `client.ts` / `mock.ts` / `index.ts` trio behind one environment flag, which means the whole app — import, generation, playlists, stats — runs against canned fixtures with zero credentials, and that is the documented way to develop it.