$ show plamere/SortYourMusic
SortYourMusic is a client-side web application that lets users sort their Spotify playlists by musical attributes like tempo, energy, danceability, loudness, valence, and more. It uses the Spotify Web API with PKCE OAuth for authentication and runs entirely in the browser with no backend server. The repository contains two versions: an older monolithic implementation (web/) using jQuery, Bootstrap 3, and Underscore.js, and a modern modular rewrite (web2/) using vanilla ES modules, CSS custom properties, and no framework dependencies. The modern version demonstrates clean architecture with separate modules for authentication, API calls, state management, views, and utility functions. Key features include BPM filtering with doubled BPM support, artist separation ordering, and the ability to save sorted playlists as new copies or overwrite existing ones.
The LLM identified 4 files worth highlighting for reuse:
Implements a greedy algorithm to maximize spacing between tracks by the same artist in a playlist. It computes a 'smart' ordering by iteratively selecting the track whose artist's current proportion is closest to the desired proportion, ensuring even distribution. This is a self-contained, reusable module that can be applied to any list of items with categorical attributes, not just Spotify playlists.
A lightweight, functional DOM creation utility that provides an `el(tag, attrs, ...children)` function for building HTML elements with attributes, event listeners, and nested children. It handles common patterns like className, dataset, style objects, and event maps. This is a clean, reusable utility that can be extracted into any vanilla JS project to replace verbose `document.createElement` calls.
Implements the Spotify Authorization Code with PKCE flow, including code verifier generation, SHA-256 challenge, token exchange, token refresh, and token storage in localStorage. It provides a clean API (`redirectToSpotifyAuth`, `exchangeCodeForToken`, `refreshAccessToken`, `getAccessToken`, `hasValidToken`, `clearTokens`) that can be adapted for any OAuth PKCE provider with minimal changes.
A minimal reactive state store with a single global state object, a `setState` function that merges updates and notifies all subscribers, and a `subscribe` function that returns an unsubscribe callback. This is a simple, reusable pattern for managing application state in vanilla JS without a framework.