/how-to-build-lovable

How to build Client invoicing tool with Lovable?

Build a client invoicing tool with Lovable using a clear step by step guide to automate billing issue invoices and track payments for your clients

Book a free  consultation
4.9
Clutch rating 🌟
600+
Happy partners
17+
Countries served
190+
Team members
Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

How to build Client invoicing tool with Lovable?

You can build a client invoicing tool in Lovable by using a Next.js (or React) app inside Lovable, storing invoices and clients in Supabase, and wiring up frontend pages + simple API routes. Configure SUPABASE_URL and SUPABASE_ANON_KEY in Lovable Cloud Secrets, use Chat Mode to create/modify files, Preview the app to test, and Publish when ready. No terminal is required for the core flow; if you need advanced DB migrations or server-side packages, export to GitHub and run CLI outside Lovable.

 

What we’re building / changing (plain English)

 

Simple client invoicing tool with: client list, create invoice form (items, quantities, price), invoice listing, invoice detail with printable HTML invoice (use browser Print to PDF). Data stored in Supabase. Lovable will create frontend pages and a Supabase client file and wire Secrets via Lovable Cloud.

 

Lovable-native approach

 

  • Chat Mode edits: paste the meta-prompts below into Lovable chat to generate files and edits.
  • Preview: use Lovable Preview to interact with the app and test Supabase reads/writes.
  • Secrets UI: set SUPABASE_URL and SUPABASE_ANON\_KEY in Lovable Cloud Secrets (used by the app).
  • Publish: use Lovable Publish to deploy the app when tests pass.
  • GitHub export/sync: only if you need CLI tasks (migrations/package installs); otherwise everything stays in Lovable.

 

Meta-prompts to paste into Lovable

 

  • Prompt 1 — Setup Supabase client & Secrets

    Goal: create Supabase client helper and instruct user to add Secrets.

    Files to create/modify: create src/lib/supabaseClient.ts

    File content instruction for Lovable: create the file with a simple Supabase client export using createClient from @supabase/supabase-js. Use process.env.NEXT_PUBLIC_SUPABASE_URL and process.env.NEXT_PUBLIC_SUPABASE_ANON\_KEY.

    Acceptance criteria: done when src/lib/supabaseClient.ts exists and exports a supabase client; Preview console shows no missing env errors.

    Secrets/Integration steps: in Lovable Cloud > Secrets, add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON\_KEY. (These are the Supabase project URL and anon key.)

  • Prompt 2 — Create pages and components

    Goal: add UI for clients, invoices list, new invoice form, and invoice detail.

    Files to create/modify:

    • create src/pages/invoices/index.tsx — invoice list page
    • create src/pages/invoices/new.tsx — new invoice form page
    • create src/pages/invoices/[id].tsx — invoice detail/printable view
    • create src/components/InvoiceForm.tsx — invoice creation form component
    • create src/components/InvoiceList.tsx — simple list component

    File content instruction for Lovable: implement pages that import supabase from src/lib/supabaseClient.ts and perform basic CRUD: load invoices, create invoice with items array, and show invoice detail. In the printable view include a "Print" button that calls window.print(). Keep code clear and minimal; avoid server-only APIs.

    Acceptance criteria: done when Preview shows a route /invoices with list, /invoices/new form that saves an invoice and redirects to /invoices, and /invoices/[id] displays invoice details and Print works.

    Secrets/Integration steps: No extra secrets beyond Prompt 1. Ensure table schema exists in Supabase (simple schema instructions below).

  • Prompt 3 — Schema & optional migration guidance (outside Lovable if needed)

    Goal: provide minimal database schema for invoices and clients.

    Files to create/modify: none inside Lovable; instead provide SQL to run in Supabase SQL editor (or via CLI outside Lovable).

    SQL to run (tell Lovable to display this to the user): ``` // CREATE TABLE clients (id uuid primary key default gen_random_uuid(), name text, email text); // CREATE TABLE invoices (id uuid primary key default gen_random_uuid(), client_id uuid references clients(id), created_at timestamptz default now(), total numeric); // CREATE TABLE invoice_items (id uuid primary key default gen_random_uuid(), invoice_id uuid references invoices(id), description text, qty int, price numeric); ```

    Acceptance criteria: done when these tables exist in the Supabase project and the app can insert/read rows.

    Note: Running SQL is done in the Supabase dashboard (no terminal required). If you prefer CLI migrations, export to GitHub and run CLI outside Lovable.

 

How to verify in Lovable Preview

 

  • Open Preview and visit /invoices — you should see an empty list or existing invoices from Supabase.
  • Create invoice: go to /invoices/new, fill client and items, submit — Preview should show the new invoice in /invoices and persist after reload.
  • Invoice detail: open /invoices/{id} and click Print — the browser print dialog appears (use Save as PDF to export).

 

How to Publish / re-publish

 

  • Use Lovable Publish button in the editor when tests pass.
  • If you change Secrets, update them in Lovable Cloud Secrets and re-publish so runtime has the new values.
  • For GitHub sync or CLI-required tasks, use GitHub export from Lovable, then run migrations or installs locally / CI, and push back. Label that step clearly as outside Lovable.

 

Common pitfalls in Lovable (and how to avoid them)

 

  • Missing Secrets: app fails to connect — ensure NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON\_KEY are set in Lovable Secrets UI.
  • Using service_role key in client: never put Supabase service_role key in frontend secrets. If you need server-only operations, implement an API route and store service\_role in Secrets — but be careful and prefer Supabase Row-Level Security with anon key for simple apps.
  • Expecting terminal: Lovable has no terminal. Any migration or npm install you can’t do in Chat Mode must be done via GitHub export and run outside Lovable.
  • CORS / network errors: check Supabase project settings and that the URL/keys are correct in Secrets.

 

Validity bar

 

  • Accurate for Lovable's flow: uses Chat Mode edits, Preview, Publish, Secrets UI, and GitHub export for CLI tasks. No invented Lovable features were used.
  • If your app framework is different: adapt file paths (these are for Next.js/React). If you need server-side PDF generation or custom libraries that require build steps, export to GitHub and run those steps outside Lovable.

 

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

How to add a reliable payment webhook handler

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

How to add a safe, idempotent CSV invoice importer

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

How to add fast server-side invoice search with cursor pagination

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation
Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Best Practices for Building a Client invoicing tool with AI Code Generators

I recommend designing a small, auditable schema (clients, invoices, line_items, payments), keep all sensitive keys in Lovable Secrets, implement server-side invoice creation + PDF/email as serverless functions (Supabase Edge Functions, Vercel/Netlify) and use Lovable’s chat-first workflow (Chat Mode edits, file diffs/patches, Preview, Publish) for iterative development. Treat Lovable as the code editor + deploy orchestration UI — don’t rely on a terminal there; push migrations and CI tasks via GitHub export/sync when you need DB CLI operations or advanced CI.

 

Design & Data Model

 

Start with a simple, backwards-compatible schema you can iterate on without destructive migrations.

  • Core tables: clients, invoices, invoice_line_items, payments, users
  • Invoice fields: status (draft, sent, paid), due_date, currency, tax_rates, total, metadata JSON
  • Use UUIDs for IDs to avoid coupling to DB sequences

 

Integration & Backend

 

  • Use Supabase (or PostgreSQL) for data + auth. Edge Functions or serverless endpoints for business logic (create invoice, apply discounts, record payments).
  • PDF/email generation runs in serverless functions — avoids doing heavy work in the browser.
  • Payments via Stripe webhooks that call your serverless endpoints to mark invoices paid.

 

Lovable Workflow & Dev Ergonomics

 

  • Chat Mode edits to iterate UI/logic; use file diffs/patches to review changes before applying.
  • Preview to test UI and client-side AI integration locally in Lovable.
  • Publish to push to a Lovable-hosted environment or GitHub export/sync when you need CI, migrations, or custom deploy steps.
  • Remember: no terminal in Lovable — run DB migrations and build scripts via GitHub Actions after sync.

 

Security & Secrets

 

  • Store keys in Lovable Secrets (Supabase anon/service\_role, Stripe secret). Never hardcode.
  • Least privilege: client-side uses restricted keys; serverless uses service keys from Secrets UI.
  • Protect webhook endpoints with signatures (Stripe signature verification).

 

PDF + Email + Payments (practical)

 

Generate PDFs server-side. Use libraries like PDFKit or HTML-to-PDF in a serverless environment. Send emails via transactional services (SendGrid/Mailgun) from server-side functions.

 

// Supabase: minimal invoice schema
create table clients (
  id uuid primary key default gen_random_uuid(),
  name text not null,
  email text
);

create table invoices (
  id uuid primary key default gen_random_uuid(),
  client_id uuid references clients(id),
  status text default 'draft',
  due_date date,
  currency text default 'USD',
  total numeric,
  metadata jsonb,
  created_at timestamptz default now()
);

create table invoice_line_items (
  id uuid primary key default gen_random_uuid(),
  invoice_id uuid references invoices(id) on delete cascade,
  description text,
  qty integer,
  unit_price numeric
);

 

// serverless endpoint (Node) to create invoice and render PDF using PDFKit
import PDFDocument from 'pdfkit';
import { createWriteStream } from 'fs';
import { db } from './db'; // your DB client configured via Secrets

// POST /api/invoices
export default async function handler(req, res) {
  // // validate req.body, auth via header + supabase
  const invoice = await db.insertInvoice(req.body);
  // // generate PDF
  const doc = new PDFDocument();
  const chunks = [];
  doc.on('data', (c)=>chunks.push(c));
  doc.on('end', ()=>res.setHeader('Content-Type','application/pdf').send(Buffer.concat(chunks)));
  doc.text(`Invoice ${invoice.id}`);
  // // render line items...
  doc.end();
}

 

Testing, Migrations & Deployment

 

  • Preview first in Lovable for UI and AI code generator UX.
  • Export to GitHub when you need migrations or CI; run migrations in GitHub Actions targeting Supabase/DB.
  • Monitor webhooks and set idempotency keys for payments and PDF/email jobs.


Recognized by the best

Trusted by 600+ businesses globally

From startups to enterprises and everything in between, see for yourself our incredible impact.

RapidDev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with.

They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

Arkady
CPO, Praction
Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost.

He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Donald Muir
Co-Founder, Arc
RapidDev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space.

They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Mat Westergreen-Thorne
Co-CEO, Grantify
RapidDev is an excellent developer for custom-code solutions.

We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Emmanuel Brown
Co-Founder, Church Real Estate Marketplace
Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 

This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Samantha Fekete
Production Manager, Media Production Company
The pSEO strategy executed by RapidDev is clearly driving meaningful results.

Working with RapidDev has delivered measurable, year-over-year growth. Comparing the same period, clicks increased by 129%, impressions grew by 196%, and average position improved by 14.6%. Most importantly, qualified contact form submissions rose 350%, excluding spam.

Appreciation as well to Matt Graham for championing the collaboration!

Michael W. Hammond
Principal Owner, OCD Tech

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We’ll discuss your project and provide a custom quote at no cost.