QuickInvoice 🧾

A fast, lightweight, and installable Progressive Web App (PWA) for small businesses, freelancers, and consultants to generate professional invoices with live preview, cloud logo synchronization, PDF downloads, and one-click WhatsApp summaries.

---

✨ Features

• Zero Build Friction: 100% client-side web application (HTML5, CSS3, JavaScript ES6+).
• Live Invoice Preview: A4-styled printable sheet updating in real-time as you type.
• Business Settings & Logo Upload: Upload company logos (PNG/JPG, max 2MB) with instant live preview.
• Shareable Workspace Links (?b=my-studio): Bookmark or install a custom workspace link on any device to automatically load your business name, contact info, and logo with zero setup.
• Vercel Blob Cloud Storage: Logos and workspace profiles are stored in Vercel Blob storage for seamless cross-device persistence across laptops, phones, and tablets.
• Clean Empty State: Graceful typography with zero broken image placeholders or awkward gaps when no logo is set.
• Client-Side PDF Generation: High-density vector PDF exports powered by html2pdf.js.
• Installable PWA: Add to Home Screen on iOS (Safari) and Android (Chrome) with standalone full-screen native app experience and dynamic branding icons.
• WhatsApp Summary: One-click emoji-formatted text summary ready to copy and paste into messaging chats.
• Print Optimized: Native @media print stylesheet for clean paper and browser PDF printing.

---

🚀 Deploying to Vercel

QuickInvoice is optimized for zero-configuration public deployment on Vercel.

Required Environment Variables

Variable	Description	Where to Get	Required
BLOB_READ_WRITE_TOKEN	Read/Write access token for Vercel Blob cloud logo storage	Generated automatically when you create a Vercel Blob Store in your project dashboard	Yes (for cross-device logo persistence)

🔒 Security Notice: BLOB_READ_WRITE_TOKEN is used strictly on the server in /api/blob.js and is never exposed to or accepted by the client browser.

---

Step-by-Step Deployment Guide

Method 1: Deploy via Vercel Dashboard (Recommended)

1. Push your repository to GitHub / GitLab / Bitbucket:

   git add .
   git commit -m "Deploy QuickInvoice PWA with Vercel Blob support"
   git push origin main

2. Import into Vercel:

   • Go to vercel.com/new.
   • Select your QuickInvoice repository and click Import.
   • Framework Preset: Leave as Other (static site with serverless API).
   • Root Directory: ./

3. Attach a Vercel Blob Store:

   • Once the project is created, navigate to the Storage tab in your Vercel Project Dashboard.
   • Click Create Database $\rightarrow$ select Blob $\rightarrow$ click Continue.
   • Name your store (e.g., quickinvoice-logos) and click Create.
   • Click Connect Store to connect it to your QuickInvoice project.
   • Vercel will automatically populate the BLOB_READ_WRITE_TOKEN environment variable in your production and preview environments!

4. Deploy:

   • Click Redeploy (or trigger a new git push) to apply the storage connection.
   • Your public URL (e.g., https://quickinvoice.vercel.app) is live with HTTPS and PWA installability enabled!

---

Method 2: Deploy via Vercel CLI

1. Install Vercel CLI & Login:

   npm i -g vercel
   vercel login

2. Link and Deploy:

   vercel

   Follow the prompts to link the project.

3. Link Blob Store: In the Vercel Web Dashboard under Storage, create and connect your Blob store, or pull environment variables locally:

   vercel env pull .env.local

4. Deploy to Production:

   vercel --prod

---

📱 PWA & Mobile Installation

Once deployed to a public HTTPS domain:

• Android (Chrome): Tap the "Install App" button in the header or the prompt banner to add QuickInvoice to your home screen.
• iOS (Safari): Open the URL in Safari, tap the Share button (), and select "Add to Home Screen" ().
• Desktop (Chrome / Edge): Click the install icon in the browser address bar to install as a standalone desktop app.

---

📁 Project Structure

QuickInvoice/
├── index.html          # Semantic dual-pane UI, invoice sheet & modals
├── style.css           # Design system, layout, print & PWA standalone rules
├── app.js              # State engine, calculations, PDF export & PWA manager
├── manifest.json       # PWA Web App Manifest
├── sw.js               # Service Worker for app shell caching & installability
├── vercel.json         # Vercel caching headers & routing configuration
├── .gitignore          # Excludes node_modules, .env secrets, and .vercel files
├── api/
│   └── blob.js         # Secure serverless Vercel Blob storage bridge
└── icons/
    ├── icon-192.png    # 192x192 PWA app icon
    ├── icon-512.png    # 512x512 high-DPI PWA app icon
    └── apple-touch-icon.png

---

📄 License

MIT License. Free for commercial and personal use.