How to build a customer portal without code (a real walkthrough)

A working customer portal in one afternoon: login, roles, a dashboard, file uploads, invoices. The exact steps and the tradeoffs at each one.

Moe Levine Co-founder, Tadabase
Published
Reading time
10 min
On this page
  1. Step 1 — Lock in the data model
  2. Step 2 — Two roles, one rule
  3. Step 3 — Three pages, in order
  4. Step 4 — The PDF (the part that wins the deal)
  5. Step 5 — Polish you should not skip

A customer portal is the most-built and most-bungled no-code project. The reason: portals look simple from the outside ("just a login and a few pages") and turn out to be entirely about roles, access, and data scoping. This is the walkthrough I wish I had the first time.

Describe your portal — we’ll build it now.

We started the prompt for you. Edit it, or describe your own app.

Plain English. It asks follow-up questions like a real developer.

Or start from a template

Step 1 — Lock in the data model #

Before clicking anything in the page builder, draw the tables. For a typical portal you need four:

  • Customers — your customer accounts (this is also a Users table).
  • Projects — owned by a customer, with a status.
  • Invoices — owned by a customer and a project, with amount, due date, status.
  • Files — uploaded against a project or invoice.

In Tadabase: create the four tables, add Connection fields (Projects → Customers, Invoices → Customers, etc.). On the Customers table, enable login. That is your users table.

Step 2 — Two roles, one rule #

Create two roles: Customer and Staff. The only rule that matters is the one on every component you build: "Only show records where Customer = logged-in user." Tadabase exposes the logged-in user as a filter value on every component, so this is two clicks per page.

Step 3 — Three pages, in order #

  1. Dashboard — three summary numbers (open invoices, active projects, files), and a recent-activity list. All filtered by logged-in user.
  2. Projects — list of the user's projects, each link going to a Project Details child page with files and a comments thread.
  3. Invoices — table of invoices, with a "View PDF" button that opens a Tadabase-generated PDF for that invoice.

Step 4 — The PDF (the part that wins the deal) #

Tadabase generates branded PDFs from a visual template editor. Wire one to the Invoices table, drop in your logo and the invoice fields, and add a button on the Invoice details that downloads it. This is the single most "looks like a real product" feature you can add in twenty minutes.

Step 5 — Polish you should not skip #

  • Custom domain — portal.yourbrand.com beats yourbrand.tadabase.io every time.
  • White-label CSS — twenty minutes of brand colors goes a long way.
  • A workflow that emails the customer when a new invoice or file appears.
  • A signup flow that auto-assigns the Customer role on creation.

Topics

  • tutorial
  • customer portal
  • no-code
  • tadabase

Moe Levine

Co-founder, Tadabase

Builds the platform and writes about no-code, AI app-building, and the messy parts of shipping software.

Build what you just read about.

We started the prompt for you: customer support hub. Edit it, or describe your own app.

Plain English. It asks follow-up questions like a real developer.

  • Free plan, no card
  • Unlimited app users
  • Live on your own domain