Training
Certification Leadership Frameworks Agentic for Business
Community Keynotes Retreat Blog Book A Consultation
Protocol 11 of 18 · Track, Building · What we ship

Admin interfaces, CRM, dashboards, Supabase access

Building internal tools (CRMs, dashboards, lightweight admin UIs) so the team can read and write data without escalating to engineers.

Protocol 10 Communications, SMS, email, Resend All 18 Protocol 12 Product planning and epic planning
Why this matters

The pain it
solves

A team can have the cleanest workflows, the best agents, and a working database, and still grind to a halt if the only way to see the data is through the Supabase dashboard. Admin interfaces are how non-engineers on your team read, write, and act on the data your product collects.

This is also the protocol that retires the last surviving piece of the old CMS instinct. The admin UI is the new editor. You built it. You own it. It looks like your site and works like your team.

The teaching

What this
actually is

What an admin interface actually needs

A team can have the cleanest workflows, the best agents, and a working database, and still grind to a halt if the only way to see the data is the Supabase dashboard. Admin interfaces are how non-engineers read, write, and act on the data your product collects.

At minimum, an admin UI has four parts. Get these four and you have a real product, not a database with a paint job.

  • A protected route
    Auth required. /admin behind a login. Even on a tiny project: lock it on day one, not when the data leaks.
  • Tabular views
    Lists of leads / customers / orders pulled live from Supabase. Sortable. Filterable. The single screen the team opens 50 times a day.
  • Inline actions
    Update status, send email, archive a row without leaving the page. Every leave-the-page click costs five seconds and one context switch. Inline saves both.
  • Drill-down detail
    Click a row, see the full record, edit it, see related rows. The detail view is where the work actually happens.

The trap to avoid

Most admin UIs look nothing like the customer-facing site. Default Bootstrap. Default Material UI. A different brand entirely.

When admin looks like a different product, your team mentally separates the brand from the data. That separation costs you taste. The team starts treating the customer-facing site as marketing and the admin as work, and the work that touches customers gets less care over time.

Rule: same design system. Same fonts, same colors, same component library. Admin is a different surface of the same product.

A good admin interface is boring

Boring fonts. Boring layout. Tons of whitespace. Information dense but not cluttered. The data is the point.

Resist the urge to design it. The team is here to do work, not to admire your gradients.

Try it yourself 40 minutes

Build a working /admin in 40 minutes

You need the lead capture from Protocol 07 (with the contacts table). You will add a protected /admin route, a leads view, and one inline action.

  1. Step 01
    Add Supabase Auth (email + password)

    In Claude Code: "Add Supabase Auth with email + password. Create a /login page and a sign-up flow. Restrict /admin to logged-in users only." Sign up as yourself.

  2. Step 02
    Build the leads table at /admin

    Tell Claude: "At /admin, fetch all rows from contacts using the Supabase server client. Render them in a table: name, email, created_at, status. Use the existing design tokens."

  3. Step 03
    Add filter and sort

    Tell Claude: "Add a search field that filters by name or email. Add column sorting on created_at and status."

  4. Step 04
    Add an inline status action

    Tell Claude: "Add a status column with values New, Working, Closed. Make it editable inline with a dropdown. Save the change to Supabase on change. Show a toast on success."

  5. Step 05
    Test it end to end

    Submit a fake lead from your homepage. Log in to /admin. See the lead. Change status from New to Working. Reload. Status persisted.

Outcome

A real /admin route on your live site with auth, a filterable leads view, and one working inline action. Your team can now read and act on the data without you. The product has a back office.

Official resources

Straight from
the source

What you walk out with

By the end of this
protocol

At the retreat

You learn it by
doing it

You build a working CRM page in 40 minutes that lists, filters, and updates the leads from your contact form. Then you secure it with login so the data is actually private.

Connects to

Other protocols this
compounds with

← Previous, Protocol 10 Next, Protocol 12 →