Case Study: invoicewebsite.com

A full-stack SaaS invoicing tool for freelancers and small businesses, built from scratch and shipped as a live product.

The Problem

Freelancers and small business owners occupy an awkward middle ground when it comes to invoicing. Full accounting platforms like QuickBooks or FreshBooks are overkill: expensive, complex, and built for accountants. But free invoice generators are usually just bare-bones HTML forms that spit out an ugly PDF. There’s no branding, no client memory, no history, and definitely no design.

The gap: something professional enough to actually send to a client, simple enough to use in five minutes, and priced so it doesn’t eat into thin margins.

invoicewebsite.com is my answer to that gap.

What It Is

invoicewebsite.com is a freemium SaaS web app for creating, managing, and sending professional invoices. Users choose from a library of 32 designed invoice templates, fill in their business and client details, and export a print-ready PDF, or email it directly from the platform. The free tier handles up to 2 invoices a month. Paid tiers unlock more templates, higher volumes, logo support, purchase orders, email history, and edit history with revert.

Pricing: Free · $50/year (Basic) · $192/year (Premium)

Key Design Decisions

Freemium as a conversion funnel, not a free giveaway

The free tier is real and usable: 2 invoices a month is genuinely enough for someone just starting out. But it’s intentionally limited in ways that matter as a business grows: only the plain “Classic” template (no logo), one business, one client. Every friction point in the free tier maps directly to a paid feature. A user who wants their logo on an invoice knows exactly what to upgrade for.

Template access is tiered: 2 templates on Free, 16 on Basic, 14 more on Premium. This makes the upgrade path feel like unlocking creative options rather than hitting a paywall.

The split-pane create experience

The invoice creation page is a side-by-side editor: form on the left, live preview on the right. Every field change updates the preview in real time. On mobile, a sticky button at the bottom toggles between form and preview rather than trying to squeeze both onto a small screen. That’s a small detail that makes the mobile experience feel considered rather than ported.

The InvoiceForm component (the beating heart of the app at ~4,800 lines of TypeScript) handles everything: line items, tax calculation, multi-currency (including BTC, ETH, USDC, and USDT), sequential invoice numbering, client autofill, logo upload, signature integration, and template switching.

Template as a design system problem

32 templates across three tiers could easily become a maintenance nightmare. Each template is a standalone React component registered in a central registry.ts, lazy-loaded on demand, and toggled live/hidden via a database flag without a deploy. This means I can roll out a new template or pull one for revision without touching production.

Template previews use WebP with PNG fallbacks, generated via a custom script that renders each template and captures it. The homepage loads template statuses from Supabase with an in-memory cache (5-minute TTL) so the database isn’t hit on every page load.

Email as a product feature

Most invoice tools let you download a PDF and figure out the rest. invoicewebsite.com lets you send the invoice directly from the platform, with throttled daily limits (50/day on Basic, 100/day on Premium) and bounce suppression to protect deliverability. Email is routed through AWS SES with SNS event processing for bounce and complaint handling. Logs are tracked per user so I can audit and cap usage.

There’s also a nurture email system: an automated sequence that re-engages users who’ve gone quiet, configured per-user based on activity signals.

Technical Architecture

Why Astro? Astro’s islands architecture means the marketing pages are pure static HTML: fast, SEO-friendly, no JavaScript until you need it. The authenticated dashboard and invoice editor hydrate as React islands only where interactivity is required. This keeps Lighthouse scores high on the pages that need to rank.

Why Cloudflare Workers? Deploying to the edge means low-latency responses globally without provisioning servers. The only wrinkle was a fun AWS SDK compatibility issue: the Workers runtime doesn’t have DOMParser, so I wrote a custom Vite plugin to swap in the fast-xml-parser build of the AWS SDK XML parser at bundle time instead of the browser version.

Supabase handles auth (email/password, magic links), the PostgreSQL database, and row-level security. 114 database migrations document the full evolution of the schema, from the initial invoice model through client management, purchase orders, subscription limits, edit history, email logging, and survey responses.

What Got Built

• Full auth flow (signup, login, forgot password, magic link)
• Invoice creation, editing, duplication, and history with revert
• Purchase order creation and management
• Client and business profile management
• 32 invoice templates with live preview
• PDF export (client-side via jsPDF + html2canvas)
• Direct invoice email sending via AWS SES
• Stripe subscription billing with webhook processing
• Admin dashboard for user management and email logs
• Automated nurture email sequences
• Multi-currency support including four cryptocurrencies
• Account dashboard with stats and usage tracking
• SEO-optimized marketing pages with FAQ schema, sitemaps, and structured data
• A guides and help content system (Astro content collections)
• Profession-targeted landing pages for SEO

Ongoing

invoicewebsite.com is a live product, actively maintained and iterated on. It’s not a demo. It processes real Stripe subscriptions and sends real emails. Building it end-to-end (product design → frontend → backend → infrastructure → email deliverability → billing) is the same scope I bring to client projects.

Live site: invoicewebsite.com