30% offEnding soon
FSD-031Frontend system design Premium

Design a BI Dashboard Builder

Design a production BI dashboard builder with responsive layouts, semantic queries, coordinated refreshes, permissions, drafts, publishing, and safe exports.

Advanced 58 min read

A production BI dashboard builder is a revisioned document editor connected to a permission-aware query coordinator. The browser owns layout and interaction; trusted services own semantic validation, authorization, query execution, shared caching, exports, and publication. Results may appear only when their dashboard revision, filters, viewer scope, and policy revision match the surface that requested them.

The first prototype often looks like a grid of charts. Drag a card, choose a metric, call an endpoint, and save JSON. That model breaks as soon as two editors work at once, a global filter refreshes twelve widgets, a late response reaches a newer draft, or one viewer is not allowed to see a dimension that another viewer can export.

A useful design separates four systems that happen to share one screen: a layout editor, a semantic query client, a coordinated result viewer, and a versioned publishing workflow. Each has its own lifecycle. The central design job is to connect them without letting one lifecycle silently overwrite another.

Clarify the product before choosing libraries

Assume a collaborative analytics product. Editors assemble dashboards from charts, tables, scorecards, text, and filter controls. They drag and resize widgets, configure semantic metrics and dimensions, preview data, save drafts, publish releases, and roll back. Viewers open published dashboards, change permitted filters, inspect details, and request exports. Embedded viewers may have a narrower permission scope.

Desktop is the primary editing surface. Tablet and mobile are first-class reading surfaces, with simple filter changes and accessible drill-downs. The browser never receives warehouse credentials or unrestricted SQL. A trusted service resolves approved semantic queries into source-specific work.

Before drawing components, ask whether the product needs live collaborative editing, pixel-perfect freeform placement, scheduled delivery, offline draft editing, cross-source joins, public embedding, or regulated exports. Each answer changes the boundary. The design below supports collaborative drafts and protected embeds, while deliberately using a constrained responsive grid instead of an arbitrary canvas.

The public interview prompt

Design a browser-based BI dashboard builder for large, permissioned datasets. Explain:

  • widget contracts, chart adapters, semantic metrics, dimensions, filters, and parameters;
  • drag, resize, keyboard editing, responsive placement, undo, and draft autosave;
  • query planning, deduplication, caching, concurrency, cancellation, and partial failure;
  • consistent multi-widget refreshes, late results, filter changes, and stale revisions;
  • row and field permissions, embeds, exports, audit history, and cache partitioning;
  • publishing, rollback, migrations, accessibility, mobile, observability, testing, and rollout.

What the premium solution covers

The complete solution begins with an immutable dashboard revision receipt and follows it through layout edits, semantic query planning, a bounded refresh wave, permission checks, draft conflicts, publication, embeds, and exports. It distinguishes independent widget refresh from consistency groups and shows why a result owner includes viewer context rather than query text alone.

Original media includes a revision receipt, a frame-verified coordinated refresh animation, responsive layout anatomy, and a permission partition. A deterministic query-budget lab lets the reader vary widget count, query overlap, cache hit rate, concurrency, response latency, transfer size, and render cost.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

What is the most important invariant in a BI dashboard builder?
Every preview, query, widget result, cache entry, export, and published view must belong to an immutable dashboard revision, filter snapshot, viewer scope, and policy revision. A result from another owner must never replace the current widget.
Should dashboard widgets send SQL from the browser?
Usually no. Widgets should send a versioned semantic query specification. A trusted service validates metrics, dimensions, filters, permissions, and cost before compiling the query for an approved data source.
How should several widgets refresh together?
Build one refresh plan, deduplicate equivalent queries, enforce a concurrency budget, and divide widgets into explicit consistency groups. Independent widgets can settle separately, while a consistency group publishes only when its required results share one refresh receipt.
How do dashboard drafts avoid overwriting another editor's work?
Autosave small operations against a known draft revision. The server applies them only when that revision still matches, then returns a new revision. A conflict is merged deliberately or shown to the editor rather than silently overwriting newer work.
Can the same dashboard layout be used on mobile?
The content can be shared, but a desktop grid should not simply shrink. Store semantic placement and explicit breakpoint overrides, then produce a linear, touch-friendly reading order for narrow screens.
Where should row-level and field-level permissions be enforced?
In the trusted query and export services. The browser may hide controls for usability, but it must never be the authorization boundary or receive restricted rows, dimensions, drill targets, or cached results.