The Daily Pick

Una app de práctica para un guitarrista con un plan: doce semanas en tres fases, de los power chords y el palm muting a los primeros solos, una sesión por día. Empezó como un único archivo JSX y creció hasta ser una PWA instalable sin sumar un backend en el camino.

El programa

La fase uno, semanas 1 a 4, es power chords, palm muting y downpicking constante entre 80 y 120 bpm. La fase dos, semanas 5 a 8, suma púa alternada, hammer-ons y pull-offs, y la primera posición de la pentatónica menor. La fase tres, semanas 9 a 12, es bending, vibrato, slides y conectar posiciones para los primeros solos. Cada fase trae una descripción de técnica, un objetivo, una checklist de marcas medibles (“downpicking con palm muting a 110 bpm en corcheas, 60 segundos seguidos”) y una lista corta de canciones para aprender de punta a punta. Una sesión diaria son cinco bloques cronometrados, cada uno con un ejercicio, cómo tocarlo y los errores que hay que escuchar.

El metrónomo

Web Audio con un scheduler de anticipación: un intervalo de 60 ms llena una ventana de 120 ms por delante del reloj de audio, así que los clicks caen a tiempo aunque el hilo principal esté ocupado. Las subdivisiones cubren negras, corcheas, semicorcheas, gallop y tresillos, con un sub-click más grave y más bajo que marca la subdivisión sin tapar el pulso. Tiene tap tempo. En iOS la sesión de audio se configura como reproducción para que el click ignore el interruptor de silencio, y el scheduling espera a que el contexto se reanude, que es lo que evita que se trabe en el primer pulso.

Medir

Un drill de un minuto cuenta cambios de acorde para un par y guarda el récord personal; el par con el récord más bajo se sugiere primero. El progreso muestra un gráfico de BPM a lo largo de las sesiones y un heatmap de práctica. Todo vive en localStorage bajo un esquema versionado, un export JSON en configuración es el respaldo, y no hay sincronización entre dispositivos, por diseño. La interfaz está en español e inglés, con el texto del programa en español como fuente e IDs compartidos para que el progreso sobreviva al cambio de idioma.

Tecnología

• Next.js 15 App Router exportado como archivos estáticos. Vercel sirve el export; no hay servidor, ni API, ni base de datos.
• Zustand con el middleware persist como toda la capa de datos: un esquema versionado en localStorage, hidratación diferida para que los árboles de servidor y cliente coincidan, y export e import JSON en configuración como respaldo. Borrar los datos del sitio es la única forma de perder el progreso, y el README lo dice.
• Web Audio API para el metrónomo: un scheduler de anticipación que llena una ventana de 120 ms cada 60 ms, osciladores con decaimiento exponencial por click, un acento distinto en el primer pulso y un sub-click más bajo para las subdivisiones. En iOS la sesión de audio se cambia a reproducción para que suene con el interruptor de silencio activado.
• Recharts para el gráfico de BPM, un heatmap hecho a mano para los días de práctica y CSS plano para el resto.
• PWA con manifest, íconos generados desde SVG con sharp y un service worker para la instalación.
• Interfaz bilingüe en español e inglés con una tabla de strings tipada e IDs de ejercicio compartidos, así que cambiar de idioma nunca deja huérfano el progreso guardado.