Invoice Application

Build a small-business invoicing tool: manage clients, create line-item invoices, generate PDFs, and track paid/unpaid status.

Intermediate1-2 days

See the build prompt Browse AI coding tools

Stack

Technology used

Next.js
TypeScript
Postgres
Prisma
Tailwind CSS
react-pdf

Required tools

AI coding tools you'll need

Claude Code
Cursor

What you'll learn

Skills you'll practice

How to model relational data (clients, invoices, line items) with Prisma and Postgres
How to build CRUD forms with server actions or API routes
How to calculate totals, tax and due dates from dynamic line items
How to generate a downloadable PDF from structured data
How to track invoice status through simple state transitions

Build process

Step-by-step build

1
Scaffold and model the data
Set up Next.js with TypeScript and configure Postgres with Prisma, defining Client, Invoice and InvoiceItem models.
2
Build the clients section
List, create and edit client records (name, email, billing address).
3
Build the invoice creation form
Add dynamic line items (description, quantity, unit price) that compute subtotal, tax and total live as you type.
4
Save invoices
Persist invoices via a server action or API route, linking them to a client and generating a sequential invoice number.
5
Build the invoice list
Show status (Draft, Sent, Paid, Overdue) with filtering.
6
Build the invoice detail page
Style a single invoice like a real printable invoice.
7
Add PDF export
Add PDF download using a library such as @react-pdf/renderer.
8
Add status actions
Add a 'mark as paid' action and a simple status-change history.
9
Add authentication
Restrict the dashboard to the business owner with simple email/password auth.
10
Deploy
Deploy with a hosted Postgres database and verify PDF generation works in production.

Starter prompt

Paste this into your AI coding tool

Adapt the placeholders in brackets to your own product, then iterate on the result step by step rather than expecting a perfect first pass.

Prompt

Build an invoicing application using Next.js App Router, TypeScript, Prisma and Postgres. Data model: Client (id, name, email, address), Invoice (id, clientId, invoiceNumber, issueDate, dueDate, status: draft/sent/paid/overdue, taxRate), and InvoiceItem (id, invoiceId, description, quantity, unitPrice). Build: a /clients section for creating and listing clients; an /invoices/new form that lets me pick a client, add/remove line items dynamically, and see subtotal, tax and total update live as I type; an /invoices list page showing invoice number, client, total, status and due date, filterable by status; an /invoices/[id] page styled as a clean printable invoice with a 'Download PDF' button using @react-pdf/renderer; and a 'Mark as paid' action that updates status. Add simple email/password authentication so only I can access the dashboard. Use server actions for mutations where practical. Seed the database with 2-3 realistic sample clients and invoices for testing.

SEO

SEO considerations

This is an authenticated internal tool, not a public content site — set robots noindex on all app routes
Keep any separate public marketing/landing page indexable with its own metadata
Ensure invoice detail pages requiring auth are never accidentally statically exported or publicly cached
Use unguessable, non-sequential tokens for any shareable client-facing invoice links
Add rate limiting to any public invoice-viewing link to prevent enumeration of invoice IDs

Ship it

Deployment steps

Provision a managed Postgres database (e.g. Neon, Supabase or Railway)
Set the database URL and auth secret as environment variables in your hosting provider
Run `npx prisma migrate deploy` as part of the build/deploy step
Deploy the Next.js app to Vercel or another Node-capable host
Test PDF generation and email delivery in the production environment, not just locally

Keep building