trace.tfernandez.dev

Visualizador interactivo de algoritmos y estructuras de datos.

trace es una aplicación web para aprender cómo funcionan los algoritmos más importantes de la informática. Selecciona uno, pulsa play y observa cada operación paso a paso: el array se reorganiza en tiempo real, el código fuente resalta la línea activa, el inspector de variables muestra el estado interno y el registro de ejecución registra cada decisión del algoritmo.

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.

Características

• 29 algoritmos en 8 categorías, con visualizaciones animadas
• Reproducción controlada — avanza y retrocede paso a paso, ajusta la velocidad (0.3×–3.0×), busca cualquier algoritmo
• Panel de código con Monaco Editor y resaltado de la línea activa en cada paso
• Inspector de variables — estado interno del algoritmo en cada frame: arrays, sets, objetos, pilas y colas
• Registro de ejecución con marcas de tiempo y código de colores
• Atajos de teclado — Space para play/pause, ←→ para navegar, 1–5 para velocidad, / para buscar
• Bilingüe — español e inglés con rutas separadas (/es/, /en/)
• Modo oscuro y claro con respeto a prefers-color-scheme
• Responsive — layout adaptado a mobile con drawers, bottom bar de controles y panel de código desplegable
• Accesibilidad AA — focus visible, ARIA completo, soporte para prefers-reduced-motion
• Deep-linking — ?step=N&speed=2 para enlazar a un paso concreto

Algoritmos

Categoría	Algoritmos
Ordenación	Bubble Sort, Selection Sort, Insertion Sort, Quick Sort, Merge Sort, Heap Sort, Counting Sort, Radix Sort, Shell Sort
Búsqueda	Binary Search, Linear Search, Jump Search, Interpolation Search
Grafos	BFS, DFS, Dijkstra
Estructuras de datos	Stack, Queue, Linked List, Hash Table, Binary Search Tree
Programación dinámica	Fibonacci DP
Backtracking	N-Queens, Sudoku Solver, Maze Pathfinding
Divide y vencerás	Tower of Hanoi
Conceptos	Big O Notation, Recursion, Two Pointers, Sliding Window

Stack

Capa	Tecnología
Framework	React 19 + TypeScript 5 (strict)
Build	Vite 6
Estilos	Tailwind CSS v4 — tokens en @theme, sin config file
Animaciones	GSAP 3 (UI y transiciones globales)
Editor	Monaco Editor
Estado	Zustand 5
Routing	React Router 7
i18n	react-i18next + i18next-browser-languagedetector
Testing	Vitest + Testing Library
Deploy	Vercel
Tipografía	Geist / Geist Mono

Estructura

src/
├── components/
│   ├── atoms/          # Primitivos: Button, Badge, Icon, Slider…
│   ├── molecules/      # Compuestos: PlaybackControls, AlgorithmCard, ComplexityChart…
│   ├── organisms/      # Secciones: Sidebar, Header, CodePanel, VisualizationPanel…
│   ├── visualizers/    # ArrayVisualizer, GraphVisualizer, MatrixVisualizer, ConceptVisualizer
│   └── templates/      # AlgorithmLayout, LandingLayout
├── pages/              # HomePage, AlgorithmPage, NotFoundPage
├── stores/             # playback.store.ts, settings.store.ts
├── hooks/              # use-keyboard-shortcuts, use-reduced-motion, use-locale-sync…
├── lib/
│   ├── algorithms/     # Un fichero por algoritmo (bubble-sort.ts, dijkstra.ts…)
│   ├── types.ts        # Tipos globales compartidos
│   ├── constants/      # animation.ts, highlight-colors.ts, speed-map.ts
│   └── utils/          # Helpers puros y testeables
├── i18n/
│   └── locales/        # en.json, es.json
└── styles/
    └── global.css      # Tokens @theme, fuentes, reset, utilidades globales

Comandos

pnpm install    # Instalar dependencias
pnpm dev        # Servidor de desarrollo
pnpm build      # Build de producción
pnpm test       # Tests con Vitest
pnpm lint       # ESLint
pnpm format     # Prettier

Requiere Node 24.15.0 (fijado en .nvmrc). Usa nvm use al entrar al repo.

Cómo añadir un nuevo algoritmo

El sistema está diseñado para que añadir un nuevo algoritmo sea una operación de un solo fichero en la mayoría de los casos.

1. Generador de pasos — src/lib/algorithms/mi-algoritmo.ts

Crea el fichero con el nombre en kebab-case e implementa el objeto Algorithm:

import type { Algorithm } from '@/lib/types'

export const miAlgoritmo: Algorithm = {
  id: 'mi-algoritmo',
  slug: 'mi-algoritmo',
  category: 'sorting',
  difficulty: 'easy',
  timeComplexity: 'O(n²)',
  spaceComplexity: 'O(1)',
  name: { es: 'Mi Algoritmo', en: 'My Algorithm' },
  description: { es: '...', en: '...' },
  code: { es: `// código`, en: `// code` },
  codeLanguage: 'javascript',
  generateSteps: (locale) => {
    /* devuelve ArrayStep[] */
  },
}

La función generateSteps() debe tener cobertura del 100% en tests.

2. Registro — src/components/visualizers/registry.tsx

Si el algoritmo necesita un visualizador nuevo, añádelo al objeto VISUALIZER_REGISTRY. Si usa un tipo de visualizador ya existente (array, graph, matrix, concept), no hay que tocar el registry.

3. Índice — src/lib/algorithms/index.ts

Importa y añade el algoritmo al array ALGORITHMS.

4. Traducciones — src/i18n/locales/en.json y es.json

Si el algoritmo introduce nuevas claves de UI, añádelas en ambos ficheros.

5. Tests — junto al fichero de algoritmo

describe('miAlgoritmo generateSteps', () => {
  it('empty array → single step', ...)
  it('single element → sorted', ...)
  it('n elements → correct step count and final state', ...)
  it('last step has all indices sorted', ...)
})

Estado del proyecto

El proyecto está funcional al ~95% — todos los algoritmos, la UI completa y el sistema de diseño están implementados y en producción.

Pendiente:

• Tests unitarios de los generadores de pasos (cobertura objetivo: 100% en generateSteps, 80% global)
• Tests de componentes con Testing Library