uplift.page
← library
prompt📊 Dashboards & analyticsv2 · updated 2026-06-12

Analytics dashboard

Next.js + Recharts over Postgres RPCs - fast, smooth, no jitter.

Run it as a prompt

Paste this into any AI agent, or fetch it: curl -s https://uplift.page/api/v1/prompts/analytics-dashboard/raw

prompt.md
# Analytics dashboard

An internal dashboard that answers the team's top five questions at a glance, loads fast, and animates without layout shift.

## Recommended stack

- **Next.js (server components)** - app. Aggregate on the server, ship rendered numbers, hydrate only the charts.
- **Recharts** - charts. Composable React charts that handle responsive containers well.
- **Postgres RPCs (security definer)** - aggregation. One round-trip returning a jsonb rollup beats N client queries every time.
- **framer-motion** - micro-motion. Opacity/transform entrances only - animation must never reflow layout.

## Build steps

1. Interview for the five questions the dashboard must answer; design one panel per question, nothing else.
2. Write one RPC returning the whole rollup as jsonb (totals, series, tops) - aggregate in SQL, not JS.
3. Fix every chart container's height up front; render skeletons in the same boxes while loading.
4. Animate entrances with opacity/translate only; respect prefers-reduced-motion.
5. Add a date-range switcher that re-fetches the single RPC; keep state in the URL.

## Watch out for

- Charts in auto-height containers - every load jitters the page.
- Fetching raw rows to the client and aggregating in JS.
- Twelve panels nobody reads burying the five that matter.

## Definition of done

- Zero cumulative layout shift while data loads
- Date-range change updates every panel in one request
- The team's five questions answered without clicking

The full prompt

An internal dashboard that answers the team's top five questions at a glance, loads fast, and animates without layout shift.

Recommended stack

  • Next.js (server components) - app. Aggregate on the server, ship rendered numbers, hydrate only the charts.
  • Recharts - charts. Composable React charts that handle responsive containers well.
  • Postgres RPCs (security definer) - aggregation. One round-trip returning a jsonb rollup beats N client queries every time.
  • framer-motion - micro-motion. Opacity/transform entrances only - animation must never reflow layout.

Build steps

  1. Interview for the five questions the dashboard must answer; design one panel per question, nothing else.
  2. Write one RPC returning the whole rollup as jsonb (totals, series, tops) - aggregate in SQL, not JS.
  3. Fix every chart container's height up front; render skeletons in the same boxes while loading.
  4. Animate entrances with opacity/translate only; respect prefers-reduced-motion.
  5. Add a date-range switcher that re-fetches the single RPC; keep state in the URL.

Watch out for

  • Charts in auto-height containers - every load jitters the page.
  • Fetching raw rows to the client and aggregating in JS.
  • Twelve panels nobody reads burying the five that matter.

Definition of done

  • Zero cumulative layout shift while data loads
  • Date-range change updates every panel in one request
  • The team's five questions answered without clicking

Served from the uplift.page library and refreshed within 5 minutes of every update.