DashboardsEn vivo

Dashboards

Esta demo representa un centro de monitoreo de una aplicación en producción, donde el usuario hace seguimiento de métricas de infraestructura, rendimiento y disponibilidad en tiempo real. En vez de mostrar solo gráficos estáticos, el dashboard cuenta una historia: CPU, memoria, tasa de solicitudes, latencia, errores y disponibilidad de los servicios evolucionan dinámicamente a medida que se simulan distintos escenarios. El usuario puede iniciar simulaciones como un pico de tráfico, sobrecarga de CPU o un alto uso de memoria, y observar cómo se relacionan todas las métricas entre sí. El objetivo es demostrar la capacidad de construir interfaces interactivas y orientadas a la experiencia del usuario, usando datos sincronizados y animaciones sutiles.

Observabilidad Monitoring Dashboard Grafana/Signoz DevOps SRE Performance Shadcn Recharts React Query

Tecnologías

  • Shadcn
  • Recharts
  • React Query

Arquitectura

  • Motor de simulación implementado como función pura del tiempo transcurrido desde el inicio del escenario (sin estado mutable guardado en el servidor)
  • cliente que mantiene solo el escenario activo y su timestamp de inicio
  • ruta de API que recalcula las métricas de cada instante de forma determinista en cada consulta de React Query
  • gráficos sincronizados con Recharts

Conceptos

  • Observabilidad
  • Monitoreo de aplicaciones
  • Visualización de métricas en tiempo real
  • Polling
  • Caché de datos
  • Sincronización entre componentes
  • Dashboards operacionales
  • Arquitectura orientada a eventos
  • UX para monitoreo
  • Animaciones funcionales
  • Visualización de grandes volúmenes de datos
  • Simulación stateless como función pura de tiempo transcurrido
  • Estado compartible vía URL

Área de demostración

La demostración es 100% funcional — pruébala ahora.