L10 XP00

How to vibe code a dashboard

Every business runs on numbers scattered across five tabs. A vibe-coded dashboard puts your numbers on one screen you actually look at — and it's one of the highest-value-per-hour builds there is, because the hard part (charting libraries, data fetching, layout) is exactly what agents are best at.

The design decision that matters isn't visual: it's picking the five numbers that drive decisions. A dashboard with twenty charts is a screensaver; five numbers with trend and target is a tool.

Tool: Claude Code or Codex both excel; if the 'dashboard' is really a weekly report, consider skipping the app entirely — Claude Cowork's scheduled reports (Course 06) may be the better shape. Time: one sitting. The free deep-dive: Vibe Coding using Claude Code.

The steps
  1. 1

    Choose five numbers and their sources

    Write down: metric, where it lives (Stripe, PostHog, a spreadsheet, a database), and what 'good' looks like. If a metric doesn't change a decision, cut it. Sources with APIs (Stripe, PostHog, GSC) wire directly; spreadsheet data can be a CSV upload or Google Sheets API.

  2. 2

    Scaffold the layout

    A stat-tile row on top (current value, delta vs last period, tiny sparkline), one main trend chart, one breakdown table. Ask for server-side data fetching with the API keys in env vars — never in client code.

  3. 3

    Wire real data one source at a time

    Start with the easiest API, verify the number matches the source dashboard exactly (off-by-timezone is the classic), then add the next. Numbers you don't trust make the whole screen decorative.

  4. 4

    Add freshness and thresholds

    Auto-refresh on an interval, a 'last updated' stamp, and color thresholds (green/amber/red vs target). Optional but transformative: a daily summary pushed to Slack/email — ask the agent for a scheduled function.

  5. 5

    Put it where you'll see it

    Deploy behind a simple password, set it as a browser homepage or wall tablet, and let a week of glances tell you which numbers earn their pixels.

Starter prompt — paste into your agent
Build a personal metrics dashboard in Next.js. Metrics: [list your five: name, source API, what good looks like]. Layout: a top row of stat tiles (current value, % change vs previous period, sparkline), a main line chart for [primary metric] with range toggles (7d/30d/90d), and a breakdown table for [dimension]. Fetch server-side with keys from env vars; cache responses 5 minutes; show a last-updated stamp and color the tiles green/amber/red against the targets I listed. Password-protect the page simply. Deployable to Vercel.
Frequently asked questions

Should I vibe code a dashboard or just use the source tools' dashboards?

The custom dashboard earns its build when the numbers live in 3+ tools or when you want opinionated targets and thresholds the vendor dashboards don't share. If everything's already in one tool, bookmark that instead — honest answer.

Can it update itself and message me?

Yes — a scheduled function can recompute daily and post a summary to Slack or email, which often matters more than the page itself. If the push report is the whole point, Claude Cowork's scheduled tasks do it with no app at all.

Keep going

Related verdicts: Mixpanel, Umami Cloud, PostHog. All guides: a browser game · a mobile app · a Chrome extension · a SaaS · a Discord bot · a portfolio site