Trace — Visualizador de Algoritmos
Aplicación web interactiva para visualizar algoritmos y estructuras de datos paso a paso. Reproductor con velocidad ajustable, inspector de variables, resaltado de código en tiempo real y soporte bilingüe ES/EN. 29 algoritmos en 8 categorías.
- ROLE
- Autor
- TIPO
- Open Source
- AÑO
- 2026
- ESTADO
- Activo
Contexto
El proyecto parte de una idea propia que tenía aparcada: un visualizador de algoritmos con el que estudiar y repasar. Al descubrir alg0.dev de midudev, decidí retomar ese planteamiento y rehacerlo desde cero aplicando diseño atómico, TypeScript estricto, arquitectura orientada a componentes y un sistema de diseño brutalist-minimal propio.
Aprender algoritmos leyendo pseudocódigo o viendo pseudopasos estáticos tiene un límite: cuesta visualizar qué ocurre realmente en memoria a cada iteración. Trace nace de querer una herramienta donde poder ejecutar un algoritmo paso a paso, retroceder, cambiar la velocidad y ver simultáneamente el código activo, las variables y la estructura de datos.
Problema
Las herramientas existentes de visualización de algoritmos suelen ser animaciones pregrabadas sin control de reproducción real, o bien entornos de ejecución de código que no muestran la estructura de datos de forma visual. Ninguna combina editor de código con resaltado activo, inspector de variables y animación interactiva en el mismo panel.
Solución
Aplicación SPA con un reproductor central que consume frames generados por cada algoritmo. El usuario puede avanzar, retroceder, ajustar la velocidad (0.3× a 3×) o saltar a cualquier paso. El panel de código resalta la línea activa en Monaco Editor. El inspector de variables muestra el estado interno en cada frame. Toda la interfaz está disponible en español e inglés con rutas separadas.
Tech stack
React 19 con TypeScript estricto. Vite 6 como bundler. Tailwind CSS v4 para estilos. GSAP 3 para las animaciones de transición entre frames. Monaco Editor para el panel de código con resaltado de línea activa. Zustand 5 para el estado global del reproductor. React Router 7 para las rutas por idioma. Vitest y Testing Library para tests. Desplegado en Vercel.
Cada algoritmo produce un array inmutable de snapshots con el estado completo de la estructura de datos en ese paso. Esto desacopla totalmente la lógica del algoritmo de la capa de renderizado: el algoritmo no sabe nada de animaciones ni componentes, y el visualizador no sabe nada de cómo funciona el algoritmo. El resultado es que cada generador de pasos se puede testear con un simple array de objetos, sin montar ningún componente.
El panel de código usa Monaco Editor (el mismo que VS Code) con decoraciones de línea activa sincronizadas con el frame actual. El código fuente del algoritmo vive como string anotado con marcadores de línea; el visualizador mapea cada frame a su línea correspondiente sin acoplar la lógica al componente de UI.
El estado del reproductor (frame actual, velocidad, modo play/pause, algoritmo seleccionado) vive en un store de Zustand accesible desde cualquier componente sin prop drilling. Los slices están separados por dominio (player, algorithm, settings) para mantener la superficie de cada store acotada.