All projects

Makeable Billing

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

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

A closer look.

Explore the screens. Select an image to view it full size.

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

Makeable Billing · 1 / 14

Outstanding invoices and recent payments in light mode on desktop

Outstanding invoices and recent payments. Desktop · Light mode. Fictional demonstration data.

The rationale

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.