ProInvoice: Privacy-First Client-Side Invoice Generator

ProInvoice is a lightweight, fully client-side invoice generation tool built with modern Vanilla JavaScript. Designed for freelancers and small businesses, it offers a professional, "What You See Is What You Get" (WYSIWYG) experience without the need for a backend, ensuring total data privacy.

Live Demo on GitHub Pages

---

🚀 Key Features

• Real-time WYSIWYG Editor: See your changes update instantly on an A4-formatted preview.
• Privacy-First: No data ever leaves your browser. All storage is handled via LocalStorage.
• Intl Support: Dynamic currency switching (NGN, USD, EUR, etc.) with localized number formatting using the Intl.NumberFormat API.
• Automatic Persistence: Built-in auto-save feature with debouncing to prevent data loss while maintaining performance.
• Optimized Exports: High-quality PDF generation leveraging native browser print engines (@media print).
• Asset Compression: Integrated Canvas-based image compressor to keep company logos high-quality but under the browser's storage limits.

---

🛠️ Engineering Highlights

This project was built to demonstrate a "Software Architect" mindset using Vanilla JavaScript. Key technical implementations include:

1. Reactive State Management (Proxy Pattern)

Instead of relying on heavy frameworks like React or Vue, I implemented the JavaScript Proxy API to create a reactive state manager. This handles the "Single Source of Truth," automatically triggering UI re-renders and data persistence whenever a value is updated.

2. Performance-Optimized Storage

To maintain a smooth user experience, I implemented Debounced Auto-save. This ensures that disk-write operations to LocalStorage only occur after the user has stopped typing for 500ms, preventing main-thread lag and unnecessary processing.

3. Smart Asset Handling

To solve the 5MB limit of browser storage, I engineered a Canvas-based compression utility. It automatically resizes and optimizes high-resolution company logos before they are stored as Base64 strings, ensuring the app remains fast and lightweight.

4. Semantic & Accessible UI

The interface is built with Tailwind CSS and follows a11y best practices, using semantic HTML5 elements (like <table>, <scope>, and aria-live regions) to ensure the tool is usable by everyone, including those using screen readers.

---

🏗️ Technical Stack

• Language: JavaScript (ES6+), HTML5, CSS3
• Styling: Tailwind CSS (Utility-first framework)
• State Management: JS Proxy Pattern
• Persistence: LocalStorage API with Version Migration logic
• API: Intl.NumberFormat (Internationalization), Canvas API (Image Processing)

---

📂 Project Structure

├── index.html       # Entry point & Semantic UI structure
├── css/
│   └── style.css    # Custom Print queries & CSS Variables
└── js/
    ├── app.js       # DOM Orchestration & Event Delegation
    ├── state.js     # Reactive State & Proxy Handler
    ├── storage.js   # LocalStorage & Data Migration Logic
    └── utils.js     # Image Compression & Validation Helpers

🚦 Getting Started

1. Clone the repository:

   git clone [https://github.com/deBugger360/invoice-generator.git](https://github.com/deBugger360/invoice-generator.git)

2. Navigate to the folder:

   cd invoice-generator

3. Launch the App: Simply open index.html in any modern web browser. Note: Because this project uses JavaScript Modules (type="module"), it is best viewed via a local server. If using VS Code, right-click index.html and select "Open with Live Server".