Caso de estudio
Dynamic Language
Aplicación web para aprender japonés con IA, repetición espaciada y entrada de texto en kana sin teclado japonés.
Rol
Desarrollo completo
Año
2026
Stack
Next.js · Supabase · Claude
Resumen
Dynamic Language es una aplicación web para aprender japonés pensada específicamente para hispanohablantes. Ofrece frases y diálogos generados por IA adaptados al nivel del usuario, un módulo de flashcards con el algoritmo de repetición espaciada SM-2 sincronizado con Supabase, visualización animada del orden de trazos de los kanji y conversión en tiempo real de entrada en romaji a hiragana o katakana sin necesidad de configurar un teclado japonés.
Decidí construirlo porque quería integrar una API de IA en un producto real y ver hasta dónde llegaba la experiencia de aprendizaje que podía ofrecer el navegador sin depender de apps nativas. El resultado es una herramienta que uso como campo de pruebas para técnicas de adquisición de lenguas y para seguir explorando la integración de modelos de lenguaje en flujos de usuario concretos.
El reto
El japonés plantea tres obstáculos simultáneos que las apps genéricas no resuelven bien para hispanohablantes: tres sistemas de escritura distintos (hiragana, katakana y kanji), una pronunciación sin cognados con el español y la necesidad de un método de entrada especial (IME) para escribir en japonés desde un teclado occidental.
Quería que un usuario pudiera abrir la app, leer una frase en japonés con su pronunciación, escucharla, practicar escribiéndola en romaji y repasar las más difíciles días después, todo sin instalar nada ni cambiar la configuración de su sistema. Además, el contenido tenía que adaptarse al nivel del usuario en lugar de ser estático, lo que descartaba un catálogo manual.
Arquitectura y decisiones
La aplicación combina cuatro piezas independientes que se integran en el cliente:
- Generación de contenido con Claude: rutas de API en Next.js App Router llaman a la API de Anthropic con prompts estructurados para obtener frases o diálogos en JSON. El prompt incluye el nivel del usuario y el contexto situacional (supermercado, restaurante, transporte…) para garantizar relevancia y variedad.
- Repetición espaciada con SM-2: cada flashcard almacena en Supabase su factor de facilidad, intervalo y próxima fecha de repaso. El algoritmo recalcula estos valores en el cliente tras cada respuesta y persiste el nuevo estado de forma asíncrona, sin bloquear la interacción.
- Conversión de romaji a kana con wanakana: el campo de práctica intercepta la entrada del usuario y la convierte en tiempo real a hiragana o katakana según la secuencia tecleada, sin modificar el cursor ni requerir ningún IME del sistema operativo.
- Audio y trazos en el navegador: la pronunciación se reproduce con la Web Speech API y los trazos de kanji se animan en canvas a partir de los datos de KanjiVG, sin peticiones adicionales al servidor una vez cargados.
Dificultades y aprendizajes
Estos fueron los puntos donde más tuve que pensar:
Salida estructurada fiable desde Claude
Conseguir que la API devolviera siempre JSON válido con el esquema exacto que esperaba fue el primer escollo. Resolverlo implicó diseñar prompts con ejemplos explícitos del formato, validar la respuesta en la ruta API y reintentar con un mensaje de corrección cuando el modelo se desviaba, en lugar de propagar el error al cliente.
SM-2 sin lecturas inconsistentes
El algoritmo actualiza múltiples campos a la vez (factor de facilidad, intervalo, fecha) y la UI tiene que reflejar el nuevo estado inmediatamente. Gestionar el optimistic update en el cliente mientras la escritura en Supabase es asíncrona, sin que el usuario vea datos obsoletos si recarga, fue más delicado de lo esperado.
Conversión de romaji con wanakana
La librería convierte secuencias de caracteres mientras el usuario escribe, lo que genera comportamientos inesperados en combinaciones como 'tsu', 'chi' o 'n' antes de vocal. Entender el modelo de estado interno de wanakana y testearlo con edge cases fue necesario para que la experiencia de escritura se sintiera natural.
Iré ampliando esta sección según el proyecto evolucione.
Resultado
Dynamic Language está desplegado y en uso activo. Lo que más me llevé del proyecto fue la claridad de que integrar un LLM no es solo llamar a una API: el trabajo real está en el diseño del prompt, la validación del contrato de datos y decidir dónde vive la lógica de negocio cuando el modelo es una pieza más de la cadena. También me quedé con que la Web Speech API y las APIs de canvas del navegador dan para mucho más de lo que parece a primera vista.