Lawrence Buena Verified
all projects

Claude app · Designed & built · 2026

A live-preview invoice generator with no backend

A purpose-built invoicing tool for a sales and operations team. Form on the left, rendered invoice on the right, print-ready PDF export, and every byte of data stays in the browser.

Zero backendReactVitePDF exportSecurity

The problem

A sales and operations team was building invoices by hand, which is slow, inconsistent, and easy to get wrong when line items, tax, and discounts pile up. They needed something purpose-built, fast to use, and safe to trust with customer and payment details.

What it does

The tool is a live two-panel interface: the form sits on the left and the rendered invoice updates on the right as you type. Five focused tabs cover everything an invoice needs:

  1. Products. Line items with SKU, quantity, price, and images, plus shipping, discounts, and tax as a percentage or flat amount.
  2. Customer. Who the invoice is issued to.
  3. Invoice. Number, issue date, and due date.
  4. Payment. Payment methods and details.
  5. Company. Logo and branding.

Invoices export as print-ready PDFs straight from the browser.

The invoice generator with the Products tab open on the left showing a line item, shipping, discount, and tax fields, and a live invoice preview on the right with subtotal, tax, and total, plus a Download PDF button

Built light, built safe

It runs as a lightweight standalone web app built with React and Vite. There’s no backend, so all data stays client-side and nothing is stored on a server. Because it handles financial and customer details, security was part of the build, not an afterthought:

  • MIME-validated file uploads, so only real images get through.
  • Cryptographically generated invoice numbers that can’t be predicted.
  • Clamped financial inputs that keep quantities, prices, and rates within valid ranges.
  • Full HTML escaping on all PDF output, so nothing typed into a field can inject code into the document.