Overview
Key Features
- Professional A4-Optimized Invoice Templates: A carefully designed template system perfectly scaled for both on-screen viewing and print/PDF generation. Clients get clean, professional documents every time.
- QR Code Scan-to-Access: Each invoice automatically generates a secure QR code embedded directly on the document. Clients simply scan it on any device to instantly view their digital bill — eliminating the need to hunt through email threads.
- Multi-Currency Support: Built-in global-ready invoicing with real-time currency symbol mapping. Supports USD ($), EUR (€), GBP (£), JPY (¥), and more, with dynamic exchange rate calculations.
- Digital Signatures: Invoices can include legally-accepted digital signatures via an integrated signature canvas (react-signature-canvas), adding a professional and verifiable touch to each document.
- Client Management: Full client database with standardized phone number input (react-phone-number-input), billing address management, and contact history.
- Auth0 Authentication with Google Social Login: Secure, production-grade authentication with Auth0, including Google Workspace social login support. Users are one click away from a secure session.
- Supabase (PostgreSQL) Backend: All invoice data, client records, and user settings are stored in a managed PostgreSQL database via Supabase, with row-level security policies enforcing strict data isolation between accounts.
- Form Validation with Zod & React Hook Form: All user inputs are validated client-side with type-safe Zod schemas and React Hook Form, catching errors before they ever hit the server.
- Robust Date Handling: Invoice dates, due dates, and overdue tracking are handled precisely using dayjs.
Architecture & Technical Decisions
Frontend Stack
- Next.js 15+ (App Router, React 19): Built on the latest Next.js App Router architecture with React Server Components for blazing-fast page loads and nested layouts for the dashboard.
- Tailwind CSS v4 + Shadcn UI (Radix Primitives): The entire UI is built using Tailwind CSS v4's new CSS-first configuration alongside Shadcn UI components, which are built on top of accessible Radix UI primitives. This gives a polished, accessible design without sacrificing flexibility.
- Material Symbols Outlined: Used for iconography throughout the interface, matching the Material Design 3 aesthetic of the application.
- Custom Typography: Three typefaces — Inter, Work Sans, and Hanken Grotesk — are combined to create a distinctive, professional typographic hierarchy.
Backend & Database
- Supabase: The entire database layer is Supabase-managed PostgreSQL. Row-Level Security (RLS) ensures that a user can only ever access their own invoices and client data — never another account's records.
- Auth0 with Google OAuth: Authentication is handled entirely through Auth0, with callback URLs configured for both local development and production. Google Social Connection is enabled so users can sign up and log in with a single click.
- API Routes (Next.js Route Handlers): All data mutations (create invoice, update client, etc.) go through Next.js API route handlers that verify the user session from Auth0 before touching Supabase.
Key Libraries
| Library | Purpose |
|---|---|
| react-hook-form | Performant, uncontrolled form state management |
| zod | Type-safe schema validation for all form inputs |
| react-signature-canvas | In-browser digital signature capture and rendering |
| react-phone-number-input | Standardized, international phone number formatting |
| qrcode.react | Client-side QR code generation embedded in invoice PDFs |
| dayjs | Lightweight, immutable date formatting and manipulation |