Invoice Generator: Automating Client Billing
The Motivation
As a freelancer, I was tired of manually creating invoices in Google Docs every time I completed a project. I needed something fast, professional-looking, and free — so I built my own.
How It Works
The Invoice Generator is a client-side web application. You fill in your business details, add line items with descriptions and rates, and the app automatically calculates subtotals, taxes, and grand totals. When you're happy with the result, export it as a clean PDF.
Tech Stack
- JavaScript — vanilla JS for maximum simplicity and zero dependencies
- HTML/CSS — responsive layout that works on any screen size
- html2pdf.js — client-side PDF generation from the DOM
Features
Dynamic Line Items
Add, remove, and reorder invoice items. Each item has a description, quantity, rate, and computed amount. Totals update in real-time as you type.
Tax Calculation
Configurable tax rate (percentage-based) with automatic computation. Supports both tax-inclusive and tax-exclusive pricing.
PDF Export
One-click export to a clean, professionally formatted PDF. The generated file includes your logo, business details, and a unique invoice number.
Local Storage
Your business details (name, address, logo, tax rate) are saved in the browser so you don't have to re-enter them every time.
Design Decisions
I deliberately kept this project dependency-free on the JS side. No React, no Vue — just plain JavaScript. For a tool this focused, a framework would have been overkill. The result is a fast, lightweight app that loads instantly.
What I Learned
Building the PDF export was trickier than expected. Browser rendering and PDF rendering don't always agree on spacing and fonts. I spent time fine-tuning CSS specifically for the print output to ensure invoices look crisp on paper.