Skip to content
FrederickDesign Studio
04

Meridian Bookkeeping

Studio Demo • Site + CRM + Mobile App • Live2026

A complete bookkeeping practice, built from scratch: a cinematic marketing site, plus the full client-and-practice CRM that runs the business behind it. Dashboard, clients, invoicing, documents, and month-end close.

Meridian Bookkeeping homepage

The organization

Meridian Bookkeeping is a studio demonstration build: a complete digital presence for a premium small-business bookkeeping practice in the San Francisco Bay Area. It exists to answer the question every service business asks, which is what custom actually buys you over a template. So I built the whole thing, the marketing site and the software the business would run on, as one working system rather than flat mockups.

The challenge

Most bookkeepers, contractors, clinics, and studios get a brochure website: a pretty template that ends at 'Contact us.' The real work of the business happens somewhere else entirely. Managing clients, collecting documents, sending invoices, closing the books each month. All of it lives in spreadsheets, email threads, and disconnected tools. The challenge was to show the alternative end to end: a marketing site and a genuine operating system for the practice, sharing one brand, one design language, and one standard of speed and polish.

My approach

One brand, two surfaces

A distinct identity carried across both the public site and the private app, so the whole thing reads as one product: a Sora display face, off-white on true black with a single blue accent, and a quiet ledger motif.

It actually runs

Every screen is data-driven from a single typed dataset, so nothing on it is a flat image. Navigate the CRM, open a client, read the numbers.

Wired for real

All data flows through one accessor layer with a clean seam: swap the seed for a live database or the QuickBooks API and the interface never changes. The demo is the front end of a real build.

Performance as a feature

Server-rendered pages, a custom SVG revenue chart instead of a heavy charting library, and an image pipeline that crushes 10 MB photos to roughly 100 KB with no visible loss. A template can't match that.

Built to be used

A working sign-in, real routing, and a consistent component system throughout.

Inside the build

A branded, secure sign-in for the client and practice portal.
A branded, secure sign-in for the client and practice portal.
The client book: ten businesses with generated avatars, engagement tiers, and close status at a glance.
The client book: ten businesses with generated avatars, engagement tiers, and close status at a glance.
A single client, with invoices, document intake, profile, notes, and open items in one view.
A single client, with invoices, document intake, profile, notes, and open items in one view.
Invoicing with real status, reconciled to the dashboard totals: paid, sent, overdue, draft.
Invoicing with real status, reconciled to the dashboard totals: paid, sent, overdue, draft.
Document intake: exactly what's received, needed, and in review for the month-end close.
Document intake: exactly what's received, needed, and in review for the month-end close.
The month-end close board, with every client's books tracked from to-do to done.
The month-end close board, with every client's books tracked from to-do to done.
A companion mobile app: send documents, see what's needed, and pay from your phone (iOS & Android).
A companion mobile app: send documents, see what's needed, and pay from your phone (iOS & Android).

What we built

  • A cinematic marketing site: animated hero, services, a secure-portal preview, and a working contact form
  • A gated client & practice portal with a branded, role-aware sign-in
  • An owner's dashboard: live KPIs, a custom revenue chart, a needs-attention queue, and an activity feed
  • A searchable client directory with a detail page for every business
  • Invoicing that reconciles to the dashboard, with real status: paid, sent, overdue, draft
  • A document-intake tracker tied to each month-end close
  • A close task board spanning the whole book of business
  • An image pipeline that takes 10 MB photos down to ~100 KB without visible loss
  • A companion mobile-app concept, so clients upload, track, and pay from their phone

The outcome

It is the clearest proof we have that the studio builds custom software rather than templates: a live marketing site you can visit, backed by a fully-built client-and-practice CRM shown here in full, with dashboard, clients, invoices, documents, and a month-end close. We designed, built, and populated the whole thing as a capability demonstration.

Built with

Next.js 16React 19TypeScriptServer ComponentsTailwind CSS 4GSAPCustom SVG Chartssharp