The Daily Pick

A practice app for one guitarist with a plan: twelve weeks in three phases, from power chords and palm muting to the first solos, one session a day. It started as a single JSX file and grew into an installable PWA without picking up a backend along the way.

The program

Phase one, weeks 1 to 4, is power chords, palm muting and steady downpicking between 80 and 120 bpm. Phase two, weeks 5 to 8, adds alternate picking, hammer-ons and pull-offs, and the first minor pentatonic position. Phase three, weeks 9 to 12, is bends, vibrato, slides and connecting positions for the first solos. Each phase carries a technique brief, a goal, a checklist of measurable marks (“palm-muted downpicking at 110 bpm in eighths, 60 seconds straight”) and a short list of songs to learn end to end. A daily session is five timed blocks, each with an exercise, how to play it and the errors to listen for.

The metronome

Web Audio with a lookahead scheduler: a 60 ms interval fills a 120 ms window ahead of the audio clock, so clicks land on time even when the main thread is busy. Subdivisions cover quarters, eighths, sixteenths, gallop and triplets, with a lower and quieter sub-click that marks the subdivision without masking the beat. Tap tempo is built in. On iOS the audio session is set to playback so the click ignores the silent switch, and scheduling waits for the context to resume, which is what keeps it from stalling on beat one.

Measuring

A one-minute drill counts chord changes for a pair and keeps the personal best; the pair with the lowest record is suggested first. Progress shows a BPM chart across sessions and a practice heatmap. Everything lives in localStorage under a versioned schema, a JSON export in settings is the backup, and there is no sync between devices, by design. The interface is in Spanish and English, with the Spanish program text as the source and shared IDs so progress survives a language switch.

Technology

• Next.js 15 App Router exported as static files. Vercel serves the export; there is no server, no API and no database.
• Zustand with the persist middleware as the whole data layer: a versioned schema in localStorage, hydration deferred so the server and client trees match, and a JSON export and import in settings as the backup. Clearing site data is the only way to lose progress, and the README says so.
• Web Audio API for the metronome: a lookahead scheduler that fills a 120 ms window every 60 ms, oscillators with an exponential decay for each click, a distinct accent on beat one, and a quieter sub-click for subdivisions. On iOS the audio session is switched to playback so it plays through the silent switch.
• Recharts for the BPM chart, a hand-built heatmap for practice days, and plain CSS for everything else.
• PWA with manifest, icons generated from SVG with sharp, and a service worker for installability.
• Bilingual UI in Spanish and English with a typed string table and shared exercise IDs, so switching language never orphans saved progress.