Proyecto personal · 2026
TypeMachine
Entrenador de tipeo para programadores
Entrenador de tipeo offline para programadores: se tipean snippets de código con reglas de código reales y muestra qué teclas y bigramas te frenan.
Resumen
TypeMachine es un entrenador de tipeo para programadores. Es una single page app que funciona offline como PWA, y su vista principal parece un editor de código: se tipean snippets de un catálogo de 40 en varios lenguajes, y la app guarda el historial local para mostrar dónde se pierde tiempo de verdad.
El problema
Los entrenadores de tipeo miden prosa. El código no es prosa: es indentación, corchetes, puntuación y cierres, y los caracteres que frenan a un programador son justamente los que un test de prosa casi nunca pide.
Encima, comparar carácter por carácter castiga cosas que no son errores. Apretar Tab, usar dos espacios donde el snippet tenía cuatro o dejar un cierre colgando en su propia línea son formas legítimas de escribir el mismo código, y un entrenador estricto las marca mal y te arruina la corrida.
Decisiones
- El motor de tipeo es un módulo puro, escrito y testeado antes que cualquier UI: la comparación es por tokens y no por caracteres crudos, a través de un registro de reglas, así lo que cuenta como correcto es data y no un if enterrado en un componente.
- Reglas de código reales en ese registro: Tab indenta, el espaciado y la puntuación son flexibles, los cierres pueden colgar en su propia línea. El entrenador se adapta a cómo se escribe código en vez de exigir una transcripción.
- Ghost text realineado mientras tipeás, más un panel espejo estilo IDE con su propio resaltado: ves lo que escribís como lo verías en tu editor, no como un párrafo plano.
- Historial local en Dexie sobre IndexedDB, con exportar e importar: los datos son de quien tipeó, la app sigue andando sin red y nada requiere una cuenta. El replay de sesiones es comprimido y opcional.
- Ranking por tecla y por bigrama: un número global de palabras por minuto no te dice qué practicar, un ranking de tus teclas y pares flojos sí.
- Configuración en un modal cuyos switches corren el motor real sobre sus ejemplos: en vez de explicar qué hace una regla, el ajuste la muestra funcionando.
- CSS en variables partido en archivos, sin Tailwind: la app tiene un marco de ventana estilo Windows 7, una barra de tareas con programas como shell, un menú en el logo, cuatro modos de vista y un divisor redimensionable, y ese tipo de chrome sale más limpio en CSS plano con tokens.
- Construida en fases 0 a 7 en unas dos semanas, con subagentes de IA en paralelo trabajando sobre conjuntos de archivos disjuntos: dividir el laburo por archivos que no se tocan es lo que hace seguro correr varios agentes a la vez.
- Un modo continuo de palabras sueltas al lado de los snippets, para practicar velocidad pura sin la estructura de un bloque de código.
Resultado
TypeMachine está online en typemachine.me, se puede instalar y se usa entera sin conexión. Tiene 1161 tests unitarios y 58 tests end to end, incluido uno que verifica que la app siga funcionando offline como PWA.
Lo que demostró es el valor de escribir el motor primero: con la lógica de comparación pura y cubierta, cada feature posterior (modos, ranking, replay, ajustes) fue un consumidor de ese módulo, y el shell de ventana de arriba pudo cambiar libremente sin tocar una sola regla de tipeo.