DB key metric dashboard design

Ingredients

• Upstash KV namespace with hourly-write keys
• Vercel Cron Job (every 60s) hitting a /api/metrics/snapshot route
• React component tree: MetricCard → MetricGrid → DashboardPage
• Tailwind utility classes for sparkline bars

Schema

metrics:active_users    → 1423
metrics:licenses_today  → 87
metrics:churn_7d        → 2.1
metrics:revenue_mrr     → 18450

Steps

1. Create /api/metrics/snapshot/route.ts — read all metric keys from KV, return JSON.
2. Add a Vercel Cron trigger in vercel.json pointing to the snapshot route.
3. Build MetricCard — accepts label, value, delta, and renders a 6-bar inline sparkline with Tailwind height classes.
4. Compose cards inside MetricGrid using CSS Grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-4).
5. Wire the dashboard page to fetch snapshot JSON on mount (no SWR — keep it zero-dependency).

Result

A lightweight, zero-library dashboard that renders 4–8 key business metrics with 60-second freshness. All data lives in Upstash KV; no database query cost on page load.