Kognia: Herramienta de anotación de vídeo y arquitectura frontend SDK
Kognia Sports Intelligence es una startup de Barcelona especializada en análisis táctico automatizado y en tiempo real de partidos de fútbol. Su plataforma va más allá de las estadísticas tradicionales y detecta patrones tácticos de alto nivel, proporcionando información avanzada a entrenadores, analistas, ojeadores, medios de comunicación y otros profesionales del deporte. Con una visión global y una base tecnológica innovadora, Kognia buscaba ampliar su plataforma con una herramienta de anotación manual de vídeo que complementara su análisis automatizado.
Kognia planteaba un desafío complejo: desarrollar una arquitectura frontend tipo SDK dentro de un entorno que no había sido diseñado para ello. Aunque la intención inicial era construir la nueva herramienta como un módulo independiente, las dependencias existentes —como autenticación, gestión de usuarios y flujos internos del dashboard— hicieron inviable aislarla completamente. El reto consistía en crear componentes reutilizables, tipados y fácilmente integrables en un monorepo con múltiples equipos trabajando en paralelo, asegurando compatibilidad, estabilidad y capacidad de integración en distintas áreas de la plataforma sin interrumpir su funcionamiento.
Herramienta de anotación de vídeo e infraestructura SDK para Kognia
Kognia necesitaba una nueva funcionalidad para permitir que analistas deportivos etiquetaran eventos durante un partido, ya fuera en directo o desde un vídeo almacenado. Propusimos desarrollar un conjunto de componentes de React totalmente reutilizables, integrables en su Dashboard y preparados para ser usados en otros módulos de la plataforma.
Los componentes incluían listas, formularios, reproductores de vídeo, gestores de subida de archivos y un sistema avanzado que escuchaba eventos del teclado para registrar atajos (hotkeys) durante la anotación en tiempo real.
El desarrollo se realizó en un entorno aislado dentro del monorepo de Kognia, evitando interferir con el trabajo diario de otros equipos. Todos los componentes fueron integrados en un SDK tipado con Typescript y documentado mediante Typedoc.
Además, se usaron herramientas modernas como Vercel para que el cliente pudiera visualizar el progreso en tiempo real, validando iteraciones y cambios con rapidez.
Tecnologías utilizadas
Tecnologías utilizadas: React, Typescript, TailwindCSS, Rollup, ESBuild, Typedoc, Vercel.
Resultados
- El proyecto se entregó antes de la fecha acordada.
- Las semanas adicionales se aprovecharon para desarrollar funcionalidades extra.
- La nueva herramienta ya está desplegada y funcionando en producción.
- Todos los componentes fueron empaquetados en un SDK tipado y documentado.
- El cliente pudo revisar avances en tiempo real gracias a Vercel.
Estamos preparados para nuevos retos
