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.
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.
Sensores y Hardware del Dispositivo
Información de Conectividad, Nivel de Batería y API de Vibración: tres Web APIs que leen el estado real del dispositivo — conexión, batería y feedback háptico — para adaptar la experiencia en tiempo real.
Real-time & Comunicación
Chat en tiempo real, feed de eventos en vivo y notificaciones in-app mediante WebSocket y Server-Sent Events.