How to build an invoice and quote builder with Replit

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 replit.com, checked September 2026.

The first two are all you need to start. Everything here stays inside the one browser tab, the app included once you publish it, and the GitHub copy is the one deliberate exception.

1. 01

   Start the app, ask for the database, and set the rules

   The database comes free with the workspace, so it goes in the opening message. So do the three rules that matter most on this build.

   PromptSet up the project and the databaseCopy

   Set up a React 18 + Vite + TypeScript app with Tailwind, and add a Postgres database to this Repl, the one Replit provisions, not anything outside. Write a short notes file at the project root saying this is an invoicing and quoting app, fixing the vocabulary as clients, quotes, invoices, line items, templates and 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 Replit’s Secrets and is read only by the server. Keep the database connection details in Secrets rather than in the code.

   The rules are worth writing into the notes file rather than a single message. Filtering by user in the screen and converting currencies with a made-up rate are both natural suggestions for any assistant, and both cost somebody money.

2. 02

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

   Replit’s Postgres is a plain database with no login wired into it, so the Agent writes both halves: sessions on the server, and policies the server’s identity feeds, across twelve tables that all carry an owner.

   PromptAdd sign-in, tables and ownership rulesCopy

   Add email-and-password sign-up with a full name and company name, login, logout and a server-side session, with a profile per account. Then write the tables 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, quote and valid-until dates, a tax rate, a discount that is an 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. Line items for each. Tax rates, templates with a settings JSON, settings as key and value JSON, and custom fields scoped to quotes, invoices or both with a values table each. Turn on row-level security across every table: have the server set the current account as a session-local setting at the start of each request, write the policies against that setting so an account reaches only its own rows, line items included through the parent document’s owner, and show me how to verify a second account comes back empty.

   There is no ready-made login handing the database a user id here, so the server is what knows who is asking. Build that first and the policies have something to read.

3. 03

   Build the clients screen and the quote editor

   The hard centre. Lines that add up as you type, a discount that is an amount or a percentage, tax, shipping and a currency from a list. Check the preview after each change here rather than stacking several and finding out which one broke the total.

   PromptBuild the clients screen and the quote editorCopy

   Build the clients screen with a searchable list and add and edit dialogs for every client field. Then build the quote editor: pick a client to fill their details or type them in, add line items with 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 from my tax rates, an optional shipping line and the total, 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, converting nothing. Add a quote date, a valid-until date, notes and terms, then a quotes list with search, a status filter and a sort, with the quote number as the address of its detail page. Every route reads and writes through the server under the signed-in account.

   This is the step where checkpoints earn their keep. A total that was right two messages ago and is not now is a one-click problem rather than an afternoon.

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, numbers it INV-1, INV-2 and so on, links the two documents both ways 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 (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 through a server route, with the database refusing any other value. Build the invoices list and editor to match the quote screens.

5. 05

   Build the PDF and branding, then the AI template analyzer

   What the client receives, generated in the browser with your branding on every design, and then the one AI feature as a server route with the key in Secrets, a log and a ceiling.

   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 (professional, classic, a ledger style and a couple more), each rendering the document’s header, addresses, line items, totals, notes and terms in its currency. Add branding settings: a logo uploaded through a server route that checks the caller and the file size and type and stores it where the server controls, primary and accent colours, a font choice and header and footer text, applied to every design with a live preview. Add a print-ready preview page per document with a Download PDF button.

   PromptAdd the AI analyzerCopy

   Add a server route that requires a signed-in account, accepts an uploaded image or PDF of an existing invoice, sends it to my AI provider with the key held in Replit’s Secrets, and asks the model, through a forced structured tool call, for a layout specification only: colours, typography, header layout, address sections, line-item columns, how totals are shown, footer and decorative elements. It must not read 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, counted in Postgres rather than in memory. Save the specification as a custom template rendered by the same preview and PDF code as the built-in designs.

   Count the limit in the database. An autoscaling deployment runs more than one copy of the server, and a counter in memory is a counter per copy.

6. 06
   Destination

   Add the dashboard, reports and settings, then publish

   The screens around the documents come last, then publish, checking who the app is visible to before that first release, since Publishing is what sets it.

   PromptAdd dashboard, reports, settings, demo, and publishCopy

   Build a dashboard with counts and totals by status and the most recent documents, a reports page with cards for Draft, Finalized and Archived, a sortable table of every document with CSV and PDF export, an activity page listing recent changes to quotes, invoices and clients, and a settings page for the company profile, branding, tax rates, custom fields, numbering and the default currency. Add a demo account seeded on sign-in and wiped on sign-out behind a Try the demo button I can remove before launch. Then help me test the whole flow: 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 match, hit the analyzer limit on purpose and read what the app says. When it holds up, walk me through Publishing: which deployment type fits an app a few people sign in to and whose server does little besides check who is asking, and who it should be visible to.

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 connection details and your AI provider key belong in Secrets only: never in anything the browser downloads, and never in a repository. If either gets out, treat it as compromised and rotate it the same day.

All four are Replit rather than a third party, so the choice is shape rather than vendor, and Autoscale suits most of these apps. Two things specific to this build: the server is small, because the PDF is generated in the browser and the AI provider does the analyzing, and the one number that must be right across every copy of it is the per-account ceiling on analyzer calls, so count it in Postgres. Review who the app is visible to before that first release.

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.

A cheap model is plenty for most of the prompts above. Save Pro’s stronger models for the one or two spots where the extra reasoning actually pays for itself. Add any provider key through Replit’s own Secrets tool rather than hard-coding it, and keep every AI feature behind one server-side function so a single key covers the whole app.