Building a GST-Compliant Invoicing System with Next.js and MongoDB

#webdev #nextjs #typescript #mongodb

How I built InvoiceDesk-a production-ready invoicing app with automatic GST calculations, PDF generation, and smart performance optimizations for Indian businesses.

From Messy Prototype to Production Invoicing App

Building invoicing apps sounds simple until you hit GST compliance, PDF generation, auth security, and performance at scale. Here's how InvoiceDesk went from "barely working" to production-ready for Indian SMBs.

The GST Headache Most Apps Ignore

Indian GST isn't just "add 18% tax." You need:

CGST+SGST (9%+9%) for same-state transactions
IGST (18%) for cross-state transactions

The system auto-detects this by comparing the first 2 digits of business vs client GSTINs. Users just enter GST numbers—tax math happens instantly in real-time previews.

Split Stores = 10x Performance

Problem: One giant Zustand store caused 50+ unnecessary re-renders per minute. Product updates broke invoice pages. Dashboard flickered on every action.

Fix: Split into domain stores (auth, products, clients, invoices). Each lazy-loads independently with caching. Result: buttery smooth UX, no more cascade re-renders.

Data Retention Saved the Free Tier

MongoDB Atlas free tier = 512MB. Invoices eat storage fast.

Policy:

Current month: full access
Last month: archived summaries
3+ months: auto-delete (with export option)

API routes enforce date ranges. Database stays lean, queries stay <10ms.

Auth That Actually Protects Money

Dual-token JWT (15m access + 7d refresh) with HTTP-only cookies. No localStorage nonsense. Middleware auto-refreshes. Rate limited. bcrypt'd passwords. Multi-tenant isolation from day one.

PDFs That Match Your UI Pixel-for-Pixel

Tried Puppeteer (too slow), react-pdf (styling hell). Landed on html2canvas + jsPDF. Screenshot the live invoice component at 2x scale. Same template for screen + PDF = perfect consistency.

The UX Details That Feel Premium

Searchable client dropdowns (100+ clients? No problem)
Live tax calculations as you type quantities/prices
Optimistic updates—UI reacts instantly, server syncs quietly
Mobile-first Tailwind grids that work everywhere
Sequential invoice numbers (INV-2026-0001 format, per user/year)

Production Checklist That Matters

✅ 95+ Lighthouse across metrics
✅ MongoDB indexes on userId + dates
✅ Lazy loading per domain
✅ HTTP-only cookies + CSRF protection
✅ Data retention prevents bloat
✅ Multi-tenant isolation in every query
✅ Modern formats (WebP/AVIF images)
✅ Gzip/Brotli compression

What I'd Do Differently Next Time

Start with split stores—don't refactor later
Build searchable selects early—clients pile up fast
Plan retention Day 1—512MB fills quicker than you think
Use the same component for preview + PDF always

Steal This for Your Next Project

Open source, 5-minute setup. Perfect for learning GST flows, multi-tenant patterns, or performance optimization.

git clone → npm i → npm run seed → http://localhost:3000

Default login: admin@sndt.com / Admin@123

Indian devs building financial tools: What GST headaches have you solved? What's your go-to PDF strategy? Drop your war stories below—someone's gonna steal your patterns (in a good way).

Built for: Indian businesses who need GST compliance without the \$50/month SaaS tax
The key is to start simple and iterate. My first version had one massive store and no data retention. It worked, but it didn't scale. Refactoring to split stores and adding retention policies made it production-ready.

If you're building something similar, focus on: