How to build an invoice and quote builder with Claude Code

Rule of thumb: if you send a handful of invoices a month and want to be paid by card tonight, rent one, and Wave or Zoho Invoice will do it for nothing but the card fee or their logo on your PDF. If invoicing is part of a product you sell, if your quotes carry revisions and your PDFs carry your brand, or if you bill in several currencies and do not want them converted for you, the software is worth owning, because the caps above are exactly where a growing business pays and your clients’ names and amounts are yours to keep in a database you control. The honest middle case is a business that needs to be paid online. Build this and connect a payment rail, and read the block on choosing how you get paid, because that fee exists whether you rent the software or own it.

* On this template the free-tier line to watch is the pause, not storage. The only file is a logo and the rows are small, but a free project is paused after a week without activity, and a business that invoices at month end leaves it idle for three. Pro, from $25/mo, ends the pause and keeps a daily backup for 7 days, which matters more here than anywhere else in the catalogue, because an invoice is a record you may be required to keep.

Prices and rates from supabase.com, developex.com and claude.com, checked September 2026.

Nothing here is worth memorizing. These four just need to exist on your machine. From step 01 on, you say what you want and Claude Code runs the commands.

1. 01

   Set up the project

   An empty app running against your own database, plus a notes file so Claude Code keeps the three rules this build depends on in front of it.

   PromptSet up the projectCopy

   Set up a new React 18 + Vite + TypeScript project with Tailwind and the Supabase JS client. Read VITE_SUPABASE_URL and the publishable key (the sb_publishable_… key, which replaces the older anon key) from .env, and add .env to .gitignore in the same step so neither value reaches GitHub. Add a typed Supabase client under src/lib, then write a short CLAUDE.md describing the stack and the vocabulary for an invoicing app (clients, quotes, invoices, line items, templates, tax rates) and recording three standing rules: every row belongs to the signed-in account and the database enforces that rather than the screen, money is stored as numbers in each document’s own currency and never converted, and any AI key lives in a server-side function and never in the browser.

   Write the ownership rule down now. Filtering by the current user in the component is the first thing any assistant will reasonably do, and it would hand every account’s invoices to anyone who asked the database directly.

2. 02

   Add sign-in, the data model and the rules that keep accounts apart

   Twelve tables, sign-up and sign-in, and an ownership rule on every one of them. There is no public side to this app, so the test is a second account that sees nothing.

   PromptAdd auth, tables and ownership rulesCopy

   Add Supabase Auth with email and password: sign-up with a full name and a company name, login, logout, a persisted session and a useUser hook, plus a profiles row per account created by a trigger on sign-up. Then write the data model as migrations and show me the SQL before running it. Clients with name, email, phone, billing and shipping address, tax ID, account number, contact person and notes. Quotes with a number, a status of Draft, Finalized or Archived enforced by a database check and defaulting to Draft, the client’s details, a quote date and a valid-until date, a tax rate, a discount that is a fixed amount or a percentage, shipping, a currency code, notes, terms and a link to the invoice it became. Invoices with the same shape plus a due date, payment terms in days, payment instructions and bank details. A line-items table for each with description, quantity, unit price and a per-line discount. Tax rates, templates (a name and a settings JSON), settings as key and value JSON, and custom fields scoped to quotes, invoices or both, with a values table for each. Every table carries the owning account, has row-level security on, and lets a user reach only their own rows with explicit WITH CHECK clauses on insert and update, including line items through a function that checks the parent document’s owner. Show me how to verify a second account gets nothing back for the first account’s quotes.

   The second account is the test that matters. If it sees one invoice, the ownership rule lives in the screen rather than the database, and every table after this inherits the leak.

3. 03

   Build the quote editor and the clients screen

   The hard centre of the app. Lines that add up as you type, a discount that is an amount or a percentage, a tax rate, shipping, a currency from a list, and a client picked from file rather than retyped.

   PromptBuild the quote editor and clientsCopy

   Build the clients screen: a list with search, and add and edit dialogs for every client field. Then build the quote editor: pick a client and fill their details, or type them in, add line items with a description, quantity, unit price and an optional per-line discount, and show the subtotal, a document discount as a fixed amount or a percentage, a tax rate chosen from my tax rates table, an optional shipping line and the total, all recalculating as I type. Let me choose the document’s currency from a list of about thirty common ones and format every amount with the browser’s own number formatting for that currency, without converting anything between currencies. Add a quote date, a valid-until date, notes and terms. Give the quotes list search, a status filter and a sort, and make the quote number the address of its detail page.

   Test it with a percentage discount, a tax rate and shipping on the same quote, in a currency with no decimals. Arithmetic that is right in dollars and wrong in yen is the bug this row exists to catch.

4. 04

   Turn a quote into an invoice, and give both a lifecycle

   Converting without retyping, revisions of a quote, sequential numbers, and the three statuses. No sent and no paid, because nothing here sends or takes money.

   PromptAdd conversion, revisions, numbering and statusesCopy

   Add a Convert to invoice action on a finalized quote that creates an invoice with the same client, lines, discount, tax, shipping and currency, gives it the next number in the form INV-1, INV-2 and so on, links the two documents to each other, and opens the invoice editor with a due date and payment terms in days added. Add a Duplicate action on a quote that creates a revision numbered from the original, so quote R becomes R/1, then R/2, and make the routes handle a number with a slash in it. Then the statuses: Draft, Finalized and Archived on both documents, changed from the detail page, with the database refusing any other value. Build the invoices list and the invoice editor to match the quote screens.

   The statuses are the whole workflow, so name them plainly. There is no sent and no paid, because this app does not email or take money, and adding those words to the list without the machinery behind them is how a status lies.

5. 05

   Build the PDF, the branding, and the AI template analyzer

   What the client actually receives. A handful of PDF designs generated in the browser, your logo and colours on all of them with a live preview, and then the one AI feature: a design rebuilt from an invoice you already use.

   PromptBuild the PDF designs and brandingCopy

   Generate the PDF in the browser with a PDF library. Build a template gallery with a handful of designs (a professional one, a classic one, a ledger-style one and a couple more), each rendering the document’s header, addresses, line items, totals, notes and terms in the document’s currency. Add branding settings: a logo uploaded to a storage bucket limited to 5 MB and image types, primary and accent colours, a font choice, and header and footer text, applied to every design with a live preview as I change them. Add a print-ready preview page per document with a Download PDF button.

   PromptAdd the AI template analyzer, with a log and a ceilingCopy

   Create a Supabase edge function called analyze-template that requires a signed-in user, accepts an uploaded image or PDF of an existing invoice as a data URL, sends it to my AI provider with the key held in function secrets, and asks the model, through a forced structured tool call, for a layout specification only: colours, typography, header layout, address sections, the line-item columns, how totals are shown, footer and decorative elements. It must not read the invoice’s amounts or line items. Before contacting the provider, write a row to an ai_calls table and check the caller’s calls today against a limit read from settings. Save the returned specification as a custom template in the gallery, rendered by the same preview and PDF code as the built-in designs.

   Say out loud that it extracts a layout and not the contents. A model asked to read amounts off a scanned invoice will do so confidently and wrongly, and this feature is worth more when it stays a designer than when it becomes a bookkeeper.

6. 06
   Destination

   Add the dashboard, reports, settings and demo mode, then use it as a stranger

   The screens around the documents, then the check nobody skips twice: a second account, a downloaded PDF, and a currency with no decimals.

   PromptAdd dashboard, reports, settings, demo, and testCopy

   Build a dashboard with counts and totals of quotes and invoices by status and the most recent documents, a reports page with cards for Draft, Finalized and Archived, a sortable table of every document with client, date, number and total, and CSV and PDF export of the table, an activity page listing recent changes to quotes, invoices and clients from their timestamps, and a settings page for the company profile, branding, tax rates, custom fields, numbering and the default currency. Add a demo account that is seeded with sample clients and documents when it signs in and wiped when it signs out, behind a Try the demo button on the landing page that I can remove before launch. Then run the app and walk me through it as a stranger: sign up a second account and confirm it sees no documents, create a quote in a currency with no decimals, convert it, download the PDF and check the totals on paper match the screen, and hit the analyzer limit on purpose and read what the app says.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

One rule outranks everything above it: the database service key and the AI provider key stay on the server, and neither one ever goes into the app a browser downloads or into a repository. Should either leak, assume it has been used, look at what your provider says was spent with it, and issue a new one the same day.

Two questions decide this, and neither is about speed. Does the plan permit commercial use, because an app that bills clients is a business and Vercel’s Hobby tier is not for one. And does a saved link to one invoice open that invoice after sign-in, which takes one routing rule on each of these hosts, with Vercel’s already in the template. Nothing on this app is public, so a search engine has nothing to index and that is fine. The host serves one small static folder, and every amount comes from your database.

A percentage has no size until you multiply it by your own month, so do that first. Twenty invoices of $500 paid by card in a month, $10,000 in all, costs roughly $336 through Stripe (the card fee, the 30 cents on each, and the 0.4% for the invoice), about the same through Square on the free plan, and roughly $309 through PayPal at its card rate. Bank details printed on the PDF cost nothing and arrive when the client gets round to it. Whichever you pick, the paid status and the reconciliation are yours to build, because the template has neither.

Open the analyze-template function. Make the model name a setting I can change without a deploy, and set it to a current model on my provider’s price list that accepts images and structured tool calls. Add an ai_calls table that records every model call (which account, which task, which model, tokens in and out, a cost estimate, success or failure) and write to it from the function, successful or not. Then add a ceiling: a limit per account per day and a total across the whole app, both settings I can change without a deploy, checked before the function contacts the provider and returning a friendly “you have reached today’s limit” rather than an error. Do not let the browser send the limit or the cost. Then add a small usage panel to settings showing calls and estimated spend this month.

Add a “Draft from description” box at the top of the quote editor. It sends my description and my last twenty finalized quotes’ line items to the ai function and gets back suggested lines with a description, quantity and unit price each, drawn from prices I have used before where they match. Fill the editor with the suggestions marked as drafts for me to edit or delete, never save anything until I do, and keep the totals recalculating as I change them.

Add an “Overdue” filter to the invoices list for finalized invoices past their due date, and a “Draft reminder” action on each that sends the client’s name, the invoice number, the amount, the currency, the due date and how many days late it is to the ai function and gets back a short, polite reminder in my company’s voice, with a firmer version for anything more than thirty days late. Show it in a box I can edit and copy, and record in the activity feed that a reminder was drafted, since this app does not send email.

Add a second function called read-invoice that requires a signed-in account, accepts an uploaded image, PDF or CSV of an invoice or a price list, sends it to the ai function and asks for the line items (description, quantity, unit price), the currency, the tax rate and the client details it can find, each with a confidence. Show the result as a prefilled draft quote or invoice with every figure the model was unsure about highlighted for me to confirm, and never save until I do. Log it and count it against the same ceiling as the analyzer.

Add a “Summarize this month” button on the reports page that gathers the documents finalized in the selected period, grouped by currency with no conversion between them, and asks the ai function for a short summary: what was invoiced, what was quoted and not yet invoiced, the largest clients by amount, and anything unusual compared with the previous period. Show it in a box I can edit and copy, and make clear which currency each figure is in.

Each prompt above picks the model that fits the job. As a rule of thumb, that is Haiku for high volume, Sonnet for everyday writing, and Opus for deeper reasoning. Model names move faster than this page does, so check the current list in the Claude docs (linked in the references below) before you build. Send every one of these prompts through that same ai function, so one key and one set of rules governs all of them.