Crate
React, Vite, the Spotify Web API
The problem
Building a playlist in Spotify means a lot of clicking and dragging. I wanted to search, drop tracks in and reorder them quickly, with the keyboard if I felt like it.
What I chose
Spotify OAuth, cached search
Login and playlist changes go through the Spotify Web API. Search results are cached so repeat searches feel instant.
Drag and drop that works without a mouse
Reordering works by dragging or from the keyboard. I treat accessibility as part of the feature, not something to add afterwards.
A self-hosted, preloaded font
Inter is served from the site itself and preloaded, which removes a render-blocking request to a third party and makes the first paint faster.
Tests from the start
Vitest and Testing Library cover over 80% of the code, with a coverage badge in the repo.
The result
A responsive playlist editor that searches, adds, removes and reorders tracks, and works on a phone as well as a desktop.