SaaS invoicing app with Stripe billing, PDF generation, and client portal.

Technical Implementation

Built for speed and reliability.

The frontend is built with React and TypeScript, using Zustand for state management and React Hook Form with Zod validation for the invoice builder. Supabase handles authentication, database, and real-time subscription updates when payments are received. The PDF generation pipeline uses server-side rendering to produce consistent, print-ready documents regardless of the client's browser or device. The architectural choice to use Supabase rather than hand-rolling backend services was deliberate. Supabase provides out-of-the-box PostgreSQL, Auth, Realtime subscriptions, and Edge Functions — all the primitives you need for a SaaS app. This reduces the surface area of code I need to maintain and allows focus on product experience rather than infrastructure. When a customer logs in, they're authenticated via Supabase Auth with passwordless magic links or traditional password auth. Their data is stored in PostgreSQL with Row Level Security policies ensuring they can only access their own invoices. Realtime subscriptions are particularly powerful for the payment experience. When a customer completes payment on the portal, Stripe webhook fires, updating the invoice status in Supabase. The account owner's invoice list receives a realtime update — they see the payment land instantly, without refreshing the page. This responsiveness creates confidence that the system is working. The PDF generation uses @react-pdf/renderer, a library that renders React components to PDF. This allows reusing invoice component logic between the web UI (where users preview invoices) and the PDF output (where invoices are printed and archived). The process is: user creates invoice → component generates PDF → PDF is uploaded to Supabase Storage → URL is returned to user. This keeps PDFs out of the database, optimizing storage costs and query performance. Stripe integration is handled at two levels. Client-side: the React frontend uses Stripe.js for payment processing, displaying the Stripe payment element securely. Server-side: Stripe webhooks update invoice status and trigger downstream actions. I implemented idempotent webhook handlers that safely handle duplicate events (critical since webhooks may fire multiple times for a single event). The subscription billing is managed entirely through Stripe Billing, calculating usage-based fees automatically.

Stripe webhooks handle payment lifecycle events, automatically updating invoice status and triggering confirmation emails. The subscription model uses Stripe Billing with tiered pricing based on monthly invoice volume. Automated payment reminders are scheduled through Supabase Edge Functions, with configurable intervals and customizable email templates. The entire platform runs on Netlify with edge-optimized delivery for sub-second page loads globally. Edge Functions (Supabase's serverless function offering) power the payment reminder system. A function is triggered daily, finding all invoices that are past due and haven't received reminders in the past 7 days. It then sends a branded email using Resend (a modern email service built for developers). Users can customize reminder frequency and message content, applying their branding to automated emails so customers feel like reminders come from them, not a third-party service. Data reliability is critical for financial systems. Invoices are never deleted (regulatory and trust reasons), only marked as archived. Payment records are immutable once created. The database schema enforces business logic: you cannot mark an invoice as paid unless the payment amount matches the invoice total. These constraints exist at the database level (via Postgres constraints), not just application level, ensuring data integrity even if bugs occur in application code. Performance is equally critical. Invoice listing queries are indexed by user_id and date, enabling instant filtering even with thousands of invoices. PDF generation happens asynchronously (user clicks "download" and the PDF is generated in the background while they wait) to avoid blocking the UI. Large customers with hundreds of invoices per month experience no slowdown.