A modern, client-side invoice management system built for freelancers, small businesses, and professionals who need a fast, elegant solution for creating and managing invoices.
Features • Tech Stack • Installation • Usage • Project Structure
PaperTrail is a powerful, privacy-first invoice generator that runs entirely in your browser. All your data stays local—no server required, no data transmitted, complete control. Create professional invoices with beautiful templates, manage clients, track payments, and export to PDF with ease.
-
Invoice Management
- Create, edit, and delete invoices with an intuitive interface
- Auto-save functionality (saves every 5 seconds)
- Duplicate existing invoices for quick creation
- Multiple invoice statuses: Draft, Sent, Paid, Overdue
- Advanced search and filtering by invoice number or client name
- Smart sorting by date, amount, or status
-
Client Management
- Save and manage client information
- Auto-populate client details in new invoices
- Store company details, tax IDs, contact information
- Quick client selection from saved database
-
Professional Templates
- Three beautiful template options: Minimal, Professional, Modern
- Fully customizable branding (logo, colors, footer text)
- Responsive invoice preview with real-time updates
- Export to high-quality PDF
-
Flexible Line Items
- Unlimited line items per invoice
- Support for both percentage and fixed discounts
- Automatic calculations for subtotals, tax, and totals
- Quantity and unit price management
-
Customization
- Configurable invoice prefix (e.g., INV, BILL)
- Multiple currency support (USD, EUR, GBP, INR, BDT)
- Custom payment terms (Due on Receipt, Net 15/30/60)
- Tax rate configuration
- Brand color customization with live preview
- Company logo upload support
- Dark/Light Theme Support via Next Themes
- Responsive Design optimized for desktop and mobile
- Toast Notifications for user feedback
- Confirmation Dialogs for destructive actions
- Keyboard Navigation and accessibility features
- Local Storage Persistence for complete privacy
|
|
- ESLint - Code linting with React hooks plugin
- TypeScript ESLint - TypeScript-specific linting
- PostCSS & Autoprefixer - CSS processing
- Lovable Tagger - Component tagging (development mode)
- Vite Plugin React SWC - Fast refresh with SWC compiler
- LocalStorage API - Client-side data persistence
- Invoices collection
- Client database
- Application settings
- Invoice counter for auto-numbering
- Node.js 16.x or higher
- npm, pnpm, or bun package manager
-
Clone the repository
git clone <repository-url> cd paper-trail
-
Install dependencies
npm install # or pnpm install # or bun install
-
Start development server
npm run dev
The application will be available at
http://localhost:8080 -
Build for production
npm run build
-
Preview production build
npm run preview
- Navigate to the Dashboard
- Click "Create Invoice" button
- Fill in client information (or select from saved clients)
- Add line items with descriptions, quantities, and prices
- Configure discounts and tax rates as needed
- Customize branding and template in the preview panel
- Save the invoice (auto-saves every 5 seconds)
- Export to PDF when ready
- Navigate to Settings page
- Configure default values:
- Invoice prefix and numbering
- Default currency
- Preferred template style
- Payment terms
- Customize branding:
- Upload company logo
- Set brand colors (primary, secondary, background)
- Define default footer text
- Save settings to apply to new invoices
paper-trail/
├── src/
│ ├── components/ # React components
│ │ ├── invoice/ # Invoice-specific components
│ │ │ ├── InvoiceForm.tsx # Invoice editing form
│ │ │ ├── InvoicePreview.tsx # Real-time preview
│ │ │ └── templates/ # Invoice templates
│ │ ├── ui/ # Reusable UI components (Shadcn)
│ │ ├── ClientManager.tsx # Client management
│ │ ├── ConfirmDialog.tsx # Confirmation dialogs
│ │ ├── Layout.tsx # App layout wrapper
│ │ └── NavLink.tsx # Navigation links
│ ├── contexts/ # React contexts
│ │ └── ThemeContext.tsx # Theme provider
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility libraries
│ │ ├── storage.ts # LocalStorage operations
│ │ └── utils.ts # Helper functions
│ ├── pages/ # Page components
│ │ ├── Dashboard.tsx # Main dashboard
│ │ ├── InvoiceBuilder.tsx # Invoice creation/editing
│ │ ├── Settings.tsx # App settings
│ │ ├── Clients.tsx # Client management page
│ │ ├── Index.tsx # Landing page
│ │ └── NotFound.tsx # 404 page
│ ├── App.tsx # Root application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── public/ # Static assets
├── index.html # HTML template
├── vite.config.ts # Vite configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── components.json # Shadcn UI configuration
└── package.json # Project dependencies
interface Invoice {
id: string;
number: string; // Auto-generated (e.g., INV-2024-001)
title: string;
clientInfo: ClientInfo;
items: LineItem[];
currency: string;
date: string;
dueDate: string;
paymentTerms: string;
paymentInstructions: string;
notes: string;
status: 'draft' | 'sent' | 'paid' | 'overdue';
template: 'minimal' | 'professional' | 'modern';
branding: BrandingConfig;
settings: InvoiceSettings;
pdfSettings: PDFSettings;
taxRate: number;
attachments: string[];
createdAt: string;
updatedAt: string;
}interface ClientInfo {
name: string;
email: string;
address: string;
phone: string;
company: string;
taxId: string;
}
interface SavedClient extends ClientInfo {
id: string;
createdAt: string;
updatedAt: string;
}interface LineItem {
id: string;
description: string;
quantity: number;
unitPrice: number;
discount: number;
discountType: 'percentage' | 'fixed';
}The application supports both light and dark themes through the ThemeContext. Theme switching is automatic based on system preferences, with manual override available.
Three professional templates are included:
- Minimal - Clean and simple design
- Professional - Traditional business invoice
- Modern - Contemporary styling with bold accents
Each template supports full color customization and logo integration.
- Custom logo upload (Base64 encoded storage)
- Primary brand color
- Secondary accent color
- Background color
- Custom footer text
- 100% Client-Side - No data sent to servers
- LocalStorage Only - Data stays on your device
- No Tracking - Complete privacy
- No Account Required - Instant access
- Offline Capable - Works without internet
| Command | Description |
|---|---|
npm run dev |
Start development server on port 8080 |
npm run build |
Build for production |
npm run build:dev |
Build with development mode |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Opera 76+
Requires modern browser with LocalStorage API support.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
This project is open source and available for personal and commercial use.
Built using React + TypeScript + Vite
PaperTrail - Making invoicing simple, professional, and private