Skip to content
Systems

Systems · 05

InvoicerMachine Billing App

A mobile-first billing app for a freelancer whose clients pay in different ways: hourly, on a fixed schedule, by monthly retainer or per project milestone. Work is logged from a phone, each invoice is previewed with exact totals before it's created, and the finished invoice is handed to a Zapier workflow for PDF creation and email delivery. Invoices are reserved inside one database transaction, so the same hours or the same retainer month can't be billed twice.

Built with
  • Next.js
  • TypeScript
  • Supabase
  • PostgreSQL
  • Zapier
  • Vercel

01 / 09

InvoicerMachine overview with revenue, unbilled, invoiced and outstanding totals
Open full size (opens in a new tab)

Image 1 of 9: InvoicerMachine overview with revenue, unbilled, invoiced and outstanding totals

Real app build, fictional clients and amounts.

Overview

The problem. Freelance billing gets messy as soon as clients stop paying the same way. In a spreadsheet that means hand-calculated totals, forgotten hours, rate changes that quietly re-price past work, and the risk of invoicing the same hours twice.

What I built. InvoicerMachine is a billing app for a freelancer whose clients pay in different ways: by the hour, on a fixed schedule, by monthly retainer or per project milestone. Work is logged from a phone as it happens, and the app always shows what hasn't been billed yet.

I built client profiles that hold each client's billing rules, quick work logging that applies the right rate, an invoice preview that shows the exact total before anything is created, and a dashboard of what's earned, unbilled and outstanding. When an invoice is generated, the database reserves that work so it can't be billed twice, and the finished invoice is handed to a Zapier workflow for the PDF and the email.

Why it helps. Unbilled work is always visible, invoicing takes one preview and one click, and the database, not the user, is what prevents double billing.

System architecture

  1. Responsive web app. Logs work, manages clients and generates invoices; bottom tabs on a phone. Next: Request gate.
  2. Next.js proxy · Supabase Auth. Verifies the session on every request; signed-out pages go to login and signed-out API calls get 401. Next: Route handlers.
  3. Next.js · Zod. Clients, work, invoice preview, send, cancel and the delivery callback. Ownership comes from the session, never the request. Next: Database, Zapier workflows.
  4. Supabase Postgres · RLS. Owner-only clients, work entries and invoices. reserve_invoice locks the client and links the work in one transaction. End of flow.
    Webhooks · Google Docs, Drive, Gmail. Log Work Sync mirrors entries to Google Sheets. Generate Invoice is designed to build the PDF from a Docs template, email it with Gmail and confirm delivery with a per-invoice token. Next: Route handlers.
Hover, focus or tap a component to see its technology and role.

Key features

  • Four billing models from one client profile
  • Work logging with rate snapshots and schedule pre-fill
  • Invoice preview with exact totals and blocking reasons
  • Double-billing protection inside the database
  • Zapier hand-off that releases the draft if it fails
  • Token-secured, repeat-safe delivery callback
  • Dashboard: revenue, unbilled, invoiced and outstanding
  • Invoice history with Draft, Sent and Overdue status
  • Owner-only data with Row Level Security
  • Mobile layout with bottom-tab navigation

Integrations

  • Zapier webhooks
  • Google Sheets
  • Google Docs
  • Google Drive
  • Gmail