Skip to content

The admin app

The admin app your team works in

Every view you describe becomes part of one admin app that Protobase maintains: lists, filters, record pages, dashboards and buttons, on desktop and on phones, in light and dark.

Start in the cloud

Early accessSign up with GitHub or email. Your first app is live in a few minutes. Plans from €0.99 a month.

Or self-host it for free
The Protobase admin app with a list of orders: a chart of orders per day, filters for status, country, owner and total, and a sidebar grouped into sales, inventory, finance and admin.
Orders in the ERP example.

Lists

Lists that answer a question in one click

An empty view is already a working admin: every column, sorting, paging, a record page and a New button. Add columns, filters and a chart when you need them.

  • Five filter widgets: values with counts, date ranges with presets from today to this year, ranges with a histogram, toggles, and several yes-or-no fields at once.
  • Every filter writes into the address, so a filtered list is a link you can send.
  • A chart above the list counts records per hour, day, week or month, and follows the filters.
  • Only the visible rows are drawn and loaded, Back returns to where you were, and the scrollbar jumps straight to any row.
  • Select rows to delete them in bulk, or use the menu on each row.
The filter bar of the orders list with the status filter open, showing each status with its count.
Each filter shows how many records it would find.

Displays

A table, cards, a map, or your own

The same list can switch between displays, and every display follows the same filters.

Bike repairs shown as cards with the bike, the customer, the repair number, the date and a status badge.
The bike shop’s repairs as cards.

  • Table

    Always there, with a sticky header, row selection and a row menu.

  • Cards

    Image, title, badge and amount, a carousel of up to 10 photos, a favorite heart, and a New marker for records you have not seen.

  • Map

    Records on a MapLibre map, clustered when zoomed out and loaded only for the area in view. Approximate positions show as hollow markers or areas.

  • Your own

    Any React display you write, such as a kanban board.

Record pages

Record pages with the buttons your team needs

  • Sections with help text, a read-only summary in the sidebar, related records including many-to-many, a map, and sections of your own.
  • Named buttons set fields in one click, through the same API as Save, and ask for confirmation when you want them to.
  • Links open a filtered list or an outside address, with values from the record filled in.
  • A button someone may not use stays visible but disabled, with the reason in a tooltip.
  • Every record carries a version, so a stale edit is refused instead of overwriting someone else’s change.
A repair record with sections for the bike, the workshop and the money, a summary and buttons for Ready for pickup and Collected and paid.
A repair, laid out like the shop’s paper card, with its buttons.
A sales overview page with counts of draft orders, unpaid deliveries, overdue invoices and open leads, the biggest unpaid delivery, and lists of invoices and orders.
A sales overview: four numbers, the order to chase and the lists behind them.

Dashboards

One page for what needs attention

Composed pages are JSX files that compile to plain data. A count links to the list behind it, a table has View all, and a button or a form in a dialog does the next step.

  • Page
  • Grid
  • Card
  • Link
  • Stat
  • Table
  • RecordCard
  • CardRow
  • RecordRow
  • Field
  • Progress
  • Action
  • ModalForm
  • Show
  • There are no endpoints to write and no React to maintain: a page holds data only, and the build refuses functions or state, naming the file, line and column.
  • Every block reads the regular API as the person viewing it, so each person sees only what their access allows.
Build your first composed page

On phones

The same app, laid out for a phone

The layout changes with the screen, and a role can get the tabs it uses most at the bottom.

  • Below 768 pixels the sidebar becomes a drawer, and a bottom bar can show up to four tabs per role, plus More.
  • Below 640 pixels lists open as cards, and sorting and filters move into a sheet.
  • Tables and related lists become rows of cards you swipe sideways, and dialogs open from the bottom.
  • Maps fill the screen and pan with two fingers, and reduced motion is respected.
The orders list on a phone: a chart, filters and the first orders.
Orders on a phone.
The repairs list in a teal theme with rounder corners and a serif font.
The bike shop with a project theme: teal, rounder corners and a serif font.

Your look

Your colours, your fonts

  • One theme file sets 32 tokens for light and dark: colours, the corner radius and fonts, including your own.
  • The build checks the file and warns about tokens it does not know.
  • People switch between light, dark and system, applied before the first paint, so the page never flashes.
  • Deeper changes replace a part with a plugin, such as the record card or a field type.

Good to know: the built-in screens are in English, numbers and currencies use Irish formatting, and dates use British formatting in UTC.

Keep reading

Your back office, live in a few minutes

Sign up with GitHub or email, pick a starting point, and ask the assistant for what you need.

Start in the cloud

Early access Plans from €0.99 a month.