Skip to content

Repository files navigation

InvoiceKit

Invoice Operations, Not Invoice Paperwork

InvoiceKit is a browser-based invoicing tool that turns client billing into a 30-second task: build a professional, client-ready invoice, run it through a built-in risk/intelligence check, and get paid faster — no account, no server-side storage, no setup.

Live Demo GitHub Repo

Next.js React TypeScript Tailwind CSS Framer Motion Vercel

Animated InvoiceKit headline

What It Does

InvoiceKit lets a freelancer or small business build a professional invoice directly in the browser: business details, client details, line items with quantities and rates, automatic subtotal/tax/total calculation, and custom branding. The finished invoice renders as a clean, client-ready document and exports straight to PDF. An intelligence layer (/api/intelligence) adds a risk-aware check on top of the invoice data before it goes out the door.

How It Works

  • Built on Next.js App Router (app/page.tsx) with client-side state for the invoice form and live preview, animated with Framer Motion.
  • app/components/invoiceTypes.ts computes subtotal, taxAmount, and total from real line-item math (quantity × rate per item, summed, then tax rate applied), with multi-currency formatting (USD, GBP, EUR, CAD, AUD, NGN).
  • The "Download PDF" step calls window.print() against a print-formatted view — no PDF library, no server round-trip.
  • Styling is Tailwind CSS 4; the whole flow — data entry to PDF — runs without a database or user account, entirely in the browser.

Engineering Notes

The real problem: invoices contain real financial numbers — line items, tax, totals — and a tool that sends those to a server just to render a PDF is taking on a data-handling liability the task doesn't need.

The approach: subtotal/taxAmount/total compute directly from the in-memory line-item state, and the PDF step reuses the browser's own print pipeline against a print-specific CSS view rather than shipping a PDF-generation library — no invoice data ever leaves the client.

One real number: 6 currencies are supported with proper formatting (USD, GBP, EUR, CAD, AUD, NGN) — not a single hardcoded $.

Not handled yet: app/api/intelligence is a separate, disconnected decorative endpoint — it does not evaluate real risk signals and isn't part of the invoice calculation path.

Live

Production: https://invoicekit-pi.vercel.app

Tech Stack

Layer Technology
Framework Next.js (App Router)
UI Library React 19
Language TypeScript
Styling Tailwind CSS 4
Motion Framer Motion
Server Logic Next.js API route (/api/intelligence)
Deployment Vercel

ArkNet Digital

About

A professional invoice, done before your coffee gets cold. Browser-only, no signup, instant PDF.

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages