All examples

Makeable Billing

A working billing tool built around the way a small studio actually gets paid.

A focused invoicing app I use for recurring client billing. Client records, invoices, retainers, payment status, and a clear customer-facing invoice stay together in one small system.

Visit Makeable(opens in a new tab)

My Role in this Project

  • Product scope and billing workflow
  • Interface and invoice design
  • Full-stack application development
  • Recurring retainer and payment flows

Technologies Used

  • Next.js, React, TypeScript, Tailwind CSS
  • Postgres and Drizzle ORM
  • Auth.js and Stripe Checkout
  • React PDF, Backblaze B2, Brevo
  • Vercel Cron for recurring invoices

The Impact

  • Used for recurring client billing
  • Keeps invoice states visible
  • Connects retainers to generated invoices
  • Gives clients a focused invoice view

Build for the billing you actually do.

The starting point was a practical need: send recurring invoices for client work without carrying a much larger accounting product along with it. Makeable Billing puts the few records that matter together: who the client is, what the invoice covers, when it is due, and whether it has been paid.

Retainers make the recurring relationship explicit. A monthly amount, billing day, line-item template, and active or paused status describe the agreement. The invoice history sits beside that agreement, so the recurring setup and the documents it produces remain connected.

The interface separates the studio’s working view from the client’s reading experience. Internally, status labels and an outstanding-invoice dashboard support follow-up. Externally, a simple invoice shows the work, amount, due date, and notes. PDF generation, payment collection, email delivery, and scheduled invoicing support that same workflow.

This is a private operational app rather than a public signup product. The screenshots use fictional clients, contacts, invoices, and payments in an isolated demonstration database. They show the actual interfaces without exposing client information or financial records.

A closer look.

Outstanding invoices and recent payments in light mode on desktop
Outstanding invoices and recent payments. Desktop · Light mode. Fictional demonstration data.
Outstanding invoices and recent payments in dark mode on desktop
Outstanding invoices and recent payments. Desktop · Dark mode. Fictional demonstration data.
Invoice status and billing history in light mode on desktop
Invoice status and billing history. Desktop · Light mode. Fictional demonstration data.
Invoice status and billing history in dark mode on desktop
Invoice status and billing history. Desktop · Dark mode. Fictional demonstration data.
Recurring monthly billing agreements in light mode on desktop
Recurring monthly billing agreements. Desktop · Light mode. Fictional demonstration data.
Recurring monthly billing agreements in dark mode on desktop
Recurring monthly billing agreements. Desktop · Dark mode. Fictional demonstration data.
A recurring retainer and its invoice history in light mode on desktop
A recurring retainer and its invoice history. Desktop · Light mode. Fictional demonstration data.
A recurring retainer and its invoice history in dark mode on desktop
A recurring retainer and its invoice history. Desktop · Dark mode. Fictional demonstration data.
An invoice with line items and delivery status in light mode on desktop
An invoice with line items and delivery status. Desktop · Light mode. Fictional demonstration data.
An invoice with line items and delivery status in dark mode on desktop
An invoice with line items and delivery status. Desktop · Dark mode. Fictional demonstration data.
Client relationships and contact details in light mode on desktop
Client relationships and contact details. Desktop · Light mode. Fictional demonstration data.
Client relationships and contact details in dark mode on desktop
Client relationships and contact details. Desktop · Dark mode. Fictional demonstration data.
The client-facing invoice and payment view in light mode on desktop
The client-facing invoice and payment view. Desktop · Light mode. Fictional demonstration data.
The client-facing invoice and payment view in light mode on a phone
The client-facing invoice and payment view. Phone · Light mode. Fictional demonstration data.