Invoice Generator

A serverless web application that creates professional, print-ready invoices with intelligent pagination and optional banking details.

Features

• Interactive Invoice Builder: Capture invoice number, issue/due dates, billing details, payment reference, notes, and banking details
• Line Item Management: Add, edit, and remove line items with live subtotal calculation
• Smart Pagination: Deterministic page splitting with dynamic final-page capacity for notes and banking details
• Print-Ready Output: Optimized A4 layout with robust page margins and page-break behavior
• Responsive Design: Works smoothly on desktop and mobile devices
• Zero Build Step: Runs from a single Cloudflare Worker with CDN-hosted frontend libraries

Technical Stack

• Runtime: Cloudflare Workers (V8 isolates)
• Frontend: React 18 + ReactDOM (via CDN)
• Transpilation: Babel Standalone (browser-side JSX transform)
• Styling: Inline styles with print media queries
• Deployment: Wrangler CLI

Key Implementation Details

• Serverless single-file architecture serving the UI and assets from worker.js
• Deterministic chunking algorithm for first, continuation, and final invoice pages
• Dynamic reserve-space calculation for notes and banking details on the last page
• Explicit print fragmentation controls (break-after, break-inside) to prevent cross-page duplication artifacts
• South African date/currency formatting (en-ZA locale and R formatting)

Deployment

npm install -g wrangler
wrangler deploy

Credit

This project was created primarily with the use of Claude Opus 4.6.

The human developer provided requirements, reviewed outputs, and guided architectural decisions, while Claude handled implementation details, edge case handling, and bug fixes.