Caso de estudio UX

El producto es un panel React+TypeScript orientado a la gestión de hallazgos de seguridad: datos preprocesados en fragmentos (shards), resúmenes ligeros al inicio y carga progresiva. No es solo “una lista”: es severidad legible al instante, modos de análisis (todo el conjunto frente a hallazgos accionables o de alta confianza), exportación de la vista filtrada y detalle con búsqueda entre shards cuando el registro no está en memoria.

Los patrones típicos de tableros genéricos priorizan densidad y velocidad superficial. Con cientos de miles o millones de hallazgos, eso genera ruido: listas que abruman, filtros opacos y sensación de lentitud aunque los datos estén “cargados”. Las personas necesitan jerarquía por severidad, modos de vista que excluyan falsos positivos según el contexto, búsqueda con sugerencias y estados de carga que den estructura inmediata—sin bloquear el hilo principal en listas enormes.

Los públicos incluyen equipos que auditan hallazgos, quienes priorizan remediación y quienes comparan vulnerabilidades lado a lado. El éxito se ve así: KPIs y gráficos desde resumen y línea de tiempo en la primera pantalla; lista virtualizada con scroll fluido; filtros sincronizados con la URL para enlaces compartibles; exportación JSON, NDJSON o CSV de lo filtrado; y detalle con resolución por ID o CVE incluso si el registro está en otro fragmento.

Anclé la interfaz a un sistema de tema claro/oscuro con variables CSS y tipografía responsive, severidad codificada por color para reconocimiento instantáneo, y navegación adaptable con menú móvil. La arquitectura de datos prioriza resumen e índices primero, shards bajo demanda y caché en cliente; en lista, virtualización con react-window y esqueletos que imitan las tarjetas para mejorar la percepción de velocidad frente a un simple spinner.

Pastillas de modo de filtro (todos los hallazgos, análisis, análisis IA) con estados activos claros y texto de ayuda. Búsqueda con autocompletado sobre títulos, IDs y CVE, navegación por teclado y roles ARIA en sugerencias. Visualización del impacto de filtros, cajón de vista rápida y comparación entre hallazgos. Exportación con conteo visible. Opción para resaltar hallazgos críticos. Gráficos diferenciados—distribución de severidad, factores de riesgo frecuentes, tendencia mensual y contraste manual frente a análisis asistido—con carga diferida de fragmentos de gráficos cuando aplica. La URL actúa como fuente de verdad compartible y respeta atrás/adelante del navegador.

Un sistema en el que la densidad de datos no degrada la lectura: en listas grandes solo se renderizan los ítems visibles (del orden de decenas de nodos en lugar de miles), la carga inicial se siente estructurada y los requisitos del tablero quedan cubiertos de extremo a extremo. Quedan abiertas mejoras opcionales de bajo nivel (por ejemplo filtrado en worker o proyección de campos) si en el futuro agrego backend o cargas aún mayores.

Implementación con Vite, React 19, TypeScript, Zustand, TanStack Query, Recharts, SCSS con sintaxis moderna y validación con Zod. El repositorio incluye guías de datos masivos, lista de requisitos, resumen de proyecto, arquitectura detallada y notas de rendimiento para que temas, patrones y decisiones de rendimiento sigan alineados al crecer el dataset o el despliegue.