Live Metrics Dashboard

Problem Description

A DevOps team needs a real-time dashboard that displays live server metrics (CPU usage, memory usage, request rate, error rate). The backend collects metrics every 2 seconds and pushes them to all connected dashboard clients. The dashboard shows current values and a rolling 5-minute chart for each metric.

Build a Node.js/Express backend and React/TypeScript frontend:

• Backend simulates metric collection every 2 seconds (random values within realistic ranges)
• Metrics are pushed to all connected dashboard clients in real time
• Dashboard displays 4 metric cards: CPU %, Memory %, Requests/sec, Errors/sec
• Each card shows the current value and a sparkline or simple rolling chart of the last 5 minutes of data
• Multiple dashboards can be open simultaneously

Output Specification

Produce the following in a src/ directory:

Server:

• src/server.ts -- Express server with real-time metric streaming
• src/metrics.ts -- Metric simulation and storage

Client:

• src/components/Dashboard.tsx -- Main dashboard layout
• src/components/MetricCard.tsx -- Single metric display with current value and chart
• src/hooks/useMetrics.ts -- Hook that manages the real-time metrics connection

Use in-memory storage. Do not include test files or build configuration.