Metadata-Driven Admin Dashboard
A complex metadata-driven dashboard built for scalability, performance, and ease of use - schemas declare the UI so teams can ship new screens without engineering effort.
The challenge
Enterprise teams needed to spin up new operational screens - lists, detail views, forms, dashboards - without an engineering ticket every time. Every new entity meant a new React route, new components, new validation, new permissions. The brief: collapse all of that into a metadata layer where adding a screen is a configuration change, not a code change, while keeping the experience fast and the architecture honest at scale.
What we built
A metadata-driven admin dashboard where schemas declare the UI. A React + TypeScript frontend reads JSON schemas at runtime to render tables, detail views, forms, filters, and bulk actions for any entity. A Node.js + PostgreSQL backend exposes schema-aware CRUD with field-level validation, type-safe filters, RBAC, and audit logging derived from the same metadata. New screens ship by writing a schema record - column types, lookups, validation, permissions, layout - and the UI rebuilds itself. The architecture is built for many entities, many tenants, and many concurrent editors without hand-rolling per-feature code paths.
Key features
Schema-driven UI
- JSON schemas declare entities, fields, layouts, and actions; React renders the UI from them at runtime
- Tables, detail views, forms, and filter panels generated from the same schema source
- Bulk actions, inline editing, and column visibility all controlled by metadata, not code
- Custom field types (lookup, multi-select, JSON, computed) registered as plugins
API & validation
- Schema-aware CRUD endpoints with field-level validation derived from the metadata
- Type-safe filters and search across any declared field, with index hints surfaced from the schema
- RBAC down to field-read and field-write granularity, declared in the schema
- Audit log entries automatically captured for every create / update / delete
Performance & scale
- Virtualised tables for thousands of rows without paginated round-trips
- Server-side pagination, sort, and filter pushed into PostgreSQL via parameterised queries
- PostgreSQL indexes derived from schema declarations to avoid full scans on common filters
- Component-level code splitting so the UI loads only the field renderers used by the active screen
Operations & extensibility
- Self-serve schema editor for teams to add or modify screens without a deploy
- Versioned schemas with safe rollouts and rollbacks
- Per-tenant overrides on top of a shared base schema
- Webhooks and event hooks for downstream integrations on record changes
Challenges solved
UI as data, not code
Every screen - list, detail, form, dashboard - is rendered from a JSON schema, so adding a new operational view is a content change instead of an engineering ticket.
One source of truth for shape and rules
The same schema feeds field-level validation on the API, RBAC checks, audit logging, and the UI - eliminating drift between backend rules and frontend assumptions.
Pluggable field types
Custom renderers (lookup, multi-select, JSON, computed) register as plugins, so domain-specific fields can be added without touching the core renderer.
Filter-first PostgreSQL design
Server-side pagination, sort, and filter run as parameterised SQL with schema-derived indexes; tables with hundreds of thousands of rows stay responsive without bespoke per-screen tuning.
RBAC down to fields
Read and write permissions live next to each field in the schema, so sensitive columns hide themselves automatically across every screen they appear in.
Self-serve screen creation
Operations teams add screens via the schema editor without involving engineering. New entities ship in minutes instead of sprints.
Outcomes
Schema-driven
New screens
Self-serve
Engineering
Scalable
Architecture
Have a product idea or a system to scale?
Tell us what you're building. You'll hear back within one business day - from a senior engineer, not a sales rep.
- Free 30-min discovery call
- Fixed-scope or T&M engagements
- NDA on request - first reply within 24h