El contexto
GrafomotorIA nace de una colaboración entre Duoc UC y la Fundación Teletón para apoyar la rehabilitación de la motricidad fina de niños y niñas: los ejercicios de trazado y coordinación visomotora que hoy se hacen con lápiz y papel, llevados a una experiencia digital que motive y mida el progreso. Trabajé en un equipo con metodología SCRUM.
El desafío
No era "otra app": tenía requisitos poco negociables por su público y su entorno.
- Accesibilidad real: la usan niños en terapia, con distintas capacidades motoras. La interfaz debía ser clara, tolerante al error y cómoda de operar.
- Motivación: sin gamificación, un ejercicio repetitivo se abandona. Había que premiar el intento, no solo el acierto.
- Conectividad limitada: debía funcionar bien aunque la red fallara — de ahí el enfoque PWA.
Mi rol
Como desarrollador frontend, me hice cargo de la interfaz y su lógica: de traducir los ejercicios terapéuticos a componentes usables, y de conectar todo con el backend.
- Diseñé e implementé interfaces accesibles con React y TypeScript.
- Construí componentes reutilizables para los ejercicios de trazado y coordinación visomotora.
- Implementé la lógica de gamificación terapéutica y el seguimiento del progreso del niño.
- Aporté también en servicios backend con Node.js.
Siéntelo: un ejercicio de trazado
Antes de seguir leyendo, ponte un segundo en los zapatos del niño. La guía es suave. El trazo es tuyo. En GrafomotorIA el sistema premia el intento, no la perfección.
Mini experiencia inspirada en la pizarra real del proyecto (React + canvas).
Sigue la guía punteada. Al soltar, se evalúa qué tan preciso fue tu trazo — la misma idea con la que GrafomotorIA valora un gesto.
Cómo se mide la precisión
Sin caja negra: dos señales geométricas, las mismas que hay detrás de evaluar un trazo.
- Fidelidad — la distancia promedio de cada punto de tu trazo a la guía ideal, relativa al tamaño de la figura. Más cerca = más alto.
- Cobertura — cuánto de la figura completa llegaste a recorrer (no solo un arco bueno).
Es geometría y estadística — la base honesta que un modelo de ML completo aprendería a refinar con miles de trazos reales.
Demo del caso (no es la app clínica). El producto completo está en la landing de GrafomotorIA.
Decisiones técnicas
- PWA para instalación y tolerancia a red intermitente: la sesión de terapia no se corta porque se cayó el WiFi.
- Componentes de trazado reutilizables: cada ejercicio comparte la misma base de captura del gesto, cambiando solo la guía y las reglas de acierto.
- TypeScript para que la lógica terapéutica (reglas, puntajes, progreso) sea explícita y difícil de romper sin darse cuenta.
- Gamificación que premia el intento: refuerzo positivo alineado con el objetivo clínico, no con el "ganar".
Pantallas reales del producto
Algunas pantallas de la app: el inicio de ejercicios, una tarea de trazado, un logro y la vista de progreso.
Resultado y aprendizajes
El proyecto me enseñó que en software con impacto en personas la accesibilidad y la claridad no son "extras": son el requisito principal. Coordinar con un equipo SCRUM y con las necesidades reales de la Teletón me obligó a priorizar lo que de verdad ayuda al niño por sobre lo vistoso.
¿Quieres el detalle técnico o una demo? Escríbeme y con gusto lo muestro.