Dashboards
This demo represents a monitoring hub for a production application, where the user tracks infrastructure, performance, and availability metrics in real time. Instead of just displaying static charts, the dashboard tells a story: CPU, memory, request rate, latency, errors, and service availability evolve dynamically as different scenarios are simulated. The user can trigger simulations like a traffic spike, CPU overload, or high memory usage, and watch how every metric relates to the others. The goal is to demonstrate the ability to build interactive, experience-driven interfaces using synchronized data and subtle animation.
Technologies
- Shadcn
- Recharts
- React Query
Architecture
- Simulation engine implemented as a pure function of elapsed time since the scenario started (no mutable state kept on the server)
- the client holding only the active scenario and its start timestamp
- an API route recalculating every instant's metrics deterministically on each React Query fetch
- charts synchronized with Recharts
Concepts
- Observability
- Application monitoring
- Real-time metrics visualization
- Polling
- Data caching
- Component synchronization
- Operational dashboards
- Event-driven architecture
- UX for monitoring
- Functional animation
- Large-scale data visualization
- Stateless simulation as a pure function of elapsed time
- Shareable state via URL
Demo area
The demo is 100% functional — try it now.
Device & Hardware Sensors
Network Information, Battery Status, and the Vibration API: three Web APIs that read the device's real state — connection, battery, and haptic feedback — to adapt the experience in real time.
Real-time & Communication
Real-time chat, a live event feed, and in-app notifications over WebSocket and Server-Sent Events.