Client portal.

The side of the Stato platform that Lead Generation's clients log in to. Each buyer sees their own leads, spend, invoices, creatives and agreement, and nothing else.

React 19 + ViteTailwind CSSNode.js / Express 5PostgreSQL (Drizzle)

The problem

What needed solving.

Buyers had to email to ask what had been delivered, what it cost and what was running for them. The client portal answers those questions itself, and lets buyers flag bad leads inside a set window.

Who uses it

Buyer admins, who check deliveries, spend and invoices
Their team members, with access set by the admin
The Lead Generation team, who see the same data from the operations side

Walkthrough

The software, screen by screen.

Every screen here is the real software, run on its own throwaway local database with made-up demo records (Demo Buyer Ltd, Demo Skips Ltd, Test Lead 01 and so on, example.com emails, ZZ postcodes and reserved 07700 900 test numbers). All outside services were blocked. Every figure is demo data, not a real price, spend or invoice.

Portal home at desktop width — Demo data **Portal home.** Spend this month, cost per lead, active campaigns, leads this month, outstanding balance and agreement status, with a chart of recent deliveries. Buyers can rearrange it.

Portal home at mobile width — Demo data **Portal home.** Spend this month, cost per lead, active campaigns, leads this month, outstanding balance and agreement status, with a chart of recent deliveries. Buyers can rearrange it.

Leads at desktop width — Demo data **Leads.** Every lead delivered, with filters, search, an overview and CSV export. Buyers can flag a lead for rejection within their window.

Leads at mobile width — Demo data **Leads.** Every lead delivered, with filters, search, an overview and CSV export. Buyers can flag a lead for rejection within their window.

Spend at desktop width — Demo data **Spend.** Spend, leads delivered and cost per lead for any date range, split by campaign and source, with a CSV download.

Spend at mobile width — Demo data **Spend.** Spend, leads delivered and cost per lead for any date range, split by campaign and source, with a CSV download.

Invoices at desktop width — Demo data **Invoices.** Outstanding and paid totals and every invoice issued to the buyer.

Invoices at mobile width — Demo data **Invoices.** Outstanding and paid totals and every invoice issued to the buyer.

Agreement at desktop width — Demo data **Agreement.** The buyer's contract, sent by their account manager to sign in the portal.

Agreement at mobile width — Demo data **Agreement.** The buyer's contract, sent by their account manager to sign in the portal.

How it works

Workflows, integrations and stack.

Workflows & automations

Each buyer only ever sees their own records, enforced on the server
Lead rejections go to the operations team to accept or decline
Spend follows the buyer's billing model: managed spend, cost per lead or delivery price
Staff can view the portal as a buyer, with every session logged

Integrations

LeadByte (lead delivery)
Xero (invoices)
Resend (email)

Tech stack

React 19, Vite and Tailwind CSS
Express 5 REST API in TypeScript
PostgreSQL with Drizzle ORM

How it was built and tested

Built in reviewed pull requests
Every change gets a UX check at 390px and 1440px in Chromium and WebKit, with synthetic test data

Results

Outcomes

Results for this project will be published once the figures have been checked against our own data.

Next case study

Leadform, the form builder

Read it →

Got a project in mind?

Tell us what you need to run better. We'll come back with how we'd build it.

Start a project →