Project
Roulette

Invoice Generator

Fill in line items, get a PDF that looks like it came from an accountant.

BeginnerWeb appTool8–16hAI-buildable 5/5no setupworth shipping

Build an invoice with line items, tax and totals, then print it to PDF via a properly designed print stylesheet. Print CSS is a genuinely different discipline from screen CSS, and getting page breaks right on a long invoice is the real work.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Editable sender and recipient details
  • Line items with description, quantity, rate and computed amount
  • Subtotal, tax and total calculate live
  • Invoice number and dates with sensible defaults
  • A print stylesheet produces a clean PDF
  • Long invoices break across pages without splitting a row
  • Invoice data persists across reloads

The interesting part

  • Print CSS with correct page-break control
  • Currency rounding that keeps line items and totals reconciled
  • Keeping the screen layout and the print layout from diverging

Once it works

  • Add multiple currencies
  • Add saved client details
  • Add a paid/unpaid status and a payment log

Suggested stack

reacttypescripttailwindreact-hook-formlocalstorage

Track it