Orbit Dashboard
An analytics dashboard that explains its own numbers.
- Year
- 2025
- Kind
- Web
- Status
- Live
- Role
- Design and full stack development
Context
Dashboards tend to answer what happened but rarely why, and almost never how much to trust a number. This fictional product explores the opposite starting point.
Approach
Metrics are versioned documents stored next to the data. A small TypeScript service compiles them into SQL, caches results by definition version and feeds a server-rendered interface.
Highlights
- Freshness shown on every panel, with a warning state past its budget
- Cache keys derived from definition versions, so formulas never serve stale results
- Shareable drill-down links that reproduce the exact query
- Median panel render under 300 ms in the concept’s benchmark
Outcome
In fictional test sessions, questions about broken numbers dropped by about two thirds.
The full story
Why this concept exists
Orbit Dashboard is a fictional analytics product I use to explore one question: how much can a dashboard explain on its own before someone has to ask an analyst? Most dashboards answer what happened. Very few help you understand why, and almost none tell you how much to trust the number on the screen.
The problem with the usual approach
Teams usually start from charts. Someone picks a library, wires a few queries, and ships a wall of widgets. Six months later nobody remembers which chart counts refunds, which one is in UTC and which one silently drops late events. The interface looks finished, but the meaning is gone.
I wanted the opposite: start from definitions. Every metric in Orbit is a small, versioned document with a name, a formula, an owner and a freshness budget. Charts are just one way to render that document.
How it is built
- Metric registry. Definitions live in PostgreSQL next to the data they describe, so a migration that changes a column also has to update the metric that depends on it.
- Query layer. A thin TypeScript service compiles definitions into SQL with explicit time zones and explicit handling of late data. Results are cached in Redis with keys derived from the definition version, so a change to a formula can never serve a stale answer.
- Interface. The frontend is a Next.js app rendered on the server. Each panel shows the value, the comparison period, the freshness of the data and a one-line plain-language definition.
Design decisions worth sharing
Freshness is part of the value
A number without a timestamp is a rumor. Every panel shows when its data was last complete, and panels fade to a warning state when they exceed their freshness budget. This one change removed most of the "is this broken?" messages in the concept's test sessions.
Comparisons are opinionated
Instead of letting every viewer pick any date range, each metric declares its natural comparison: week over week for traffic, month over month for revenue, cohort against cohort for retention. Fewer knobs, fewer wrong conclusions.
Drill-downs never leave the context
Clicking a value opens a side panel with the breakdown and the exact query parameters, instead of navigating away. People can share a link to that precise state, which turns screenshots in chat into reproducible questions.
What I would do next
The next experiment is annotations written by the system itself: when a metric moves beyond its usual band, the dashboard would list the deploys, incidents and campaigns that happened in the same window. The goal is not to replace analysts, but to give them better first questions.
Notes
This is a design and engineering concept with invented data. The numbers, users and test sessions described here are fictional and exist only to show how I approach a problem like this.
Technologies
- TypeScript
- React
- Next.js
- PostgreSQL
- Redis
Gallery
Related projects
MobileIn progressPocket Ledger
Mobile finance concept that records expenses in two taps, syncs when a connection returns and never loses an entry.
- TypeScript
- React
- Node.js
- PostgreSQL
IntegrationLivePay Bridge
Integration concept between a storefront and a payment provider, with idempotent requests, a durable queue and readable reconciliation reports.
- Node.js
- TypeScript
- Stripe
- RabbitMQ
- 1 more technology
Open sourceLiveLint Kit
Open source concept: a lint configuration where each rule links to a short rationale, so teams adopt it by agreement instead of by decree.
- TypeScript
- Node.js
- Git
- GitHub
