you
Case Study

HisabiERP

A complete ERP system I designed and built solo in 90 days for Pakistan's corrugated packaging industry — replacing spreadsheets with production-grade business software.

90Days to Build
55+App Pages
10Modules
24UI Components
1Person
Scroll
01 — The Problem

An entire industry
running on spreadsheets

Pakistan's corrugated packaging factories manage complex material flows — reel paper, corrugated rolls, chemicals, ply calculations — across disconnected Excel files with no audit trail, no data security, and no domain-specific tooling.

No domain-specific ERP exists

Generic tools like Tally or QuickBooks cannot model corrugated production. They don't understand reel paper GSM, roll area calculations, ply-based material distribution, or delivery-then-invoice accounting.

Spreadsheets break under pressure

Factory managers deal with purchase invoices, delivery challans, production orders, and customer ledgers simultaneously. Disconnected Excel files mean lost data, wrong balances, and zero audit trail.

Financial accuracy needs guarantees

When a delivery goes out, COGS must be captured at that exact moment's average cost — a snapshot that must never be recalculated. Spreadsheets cannot enforce this kind of hybrid accounting.

02 — Role & Process

Solo build.
Both hats.

I served as product researcher, designer, design system architect, frontend developer, backend developer, database architect, security auditor, and QA engineer. One person, every discipline.

01
Research
Industry feasibility, domain validation, competitive analysis
02
Build
Working product first — discover real UI patterns through actual use
03
Systematize
Extract patterns into design system with tokens, components, docs
04
Harden
Security audit, E2E testing, performance optimization

Tools

Claude AI
Perplexity
Figma
Pencil
Next.js 16
React 19
TypeScript
Tailwind 4
PostgreSQL
Prisma
Playwright

I used Claude AI extensively as my development partner — for architectural decisions, code generation, security auditing, and design system documentation. This is central to my approach as a vibe coder: leveraging AI to operate at a velocity that normally requires a team, while maintaining the judgment and creative direction myself.

03 — Design System

Built for trust,
tuned for density

Every token choice traces back to the user's context — factory managers and accountants who need to trust the numbers on screen the same way they trust a physical ledger.

Teal Primary
#0F766E
Navy Dark
#0F172A
Amber Warning
#D97706
Success
#16A34A
Danger
#DC2626
Light Background
#F8FAFB
Headings
Archivo — Industrial strength for dashboard titles
Body / UI
Space Grotesk — Geometric precision, superior tabular legibility at 12–14px
Data / IDs
JetBrains Mono — PKR 1,250,000.00 | INV-2026-0142 | SKU-RP-180
24
Components
16
Button Variants
6
Status Badges
55+
Aligned Pages
03B - Phase 1 Preview

Redesign preview.
Old section retained.

The original section 03 remains above unchanged. This phase-1 redesign is added separately below so you can review both versions before replacing the old one.

04 — The Product

Light & Dark.
Same system.

Full dark mode support through semantic CSS tokens. Every component auto-switches. Every contrast ratio validated.

📊
Dashboard — Light Mode
DashboardLight
Replace with real screenshot: Dashboard with live KPI data, transaction history, quick actions
📊
Dashboard — Dark Mode
DashboardDark
Replace with real screenshot: Same dashboard in dark mode with actual data
📋
Purchase Invoice with Line Items
Purchase InvoiceForm
Replace with: Purchase form with supplier selected, multiple line items with quantities, freight allocation visible
🔐
Login / Authentication
LoginAuth
Replace with: Login screen showing OTP verification or main login form
👥
HR Employee List
HR ModuleEmployees
Replace with: Employee list with status badges, department filters, summary bar
🎨
Design System Showcase
Design SystemShowcase
Replace with: Your /design-system page showing component library
05 — Key Workflows

Solving real
accounting problems

Core Architecture
Delivery → Invoice: Hybrid Accounting

In the corrugated industry, goods leave the factory before the invoice is finalized. COGS must be recognized at delivery time using the item's weighted average cost at that exact moment — a snapshot that must never be recalculated.

I implemented this through a costAtDispatch field frozen at delivery creation. When the invoice is created days later, revenue is recognized separately. The invoice never touches stock.

A cancellation chain enforces consistency: you must cancel the invoice before you can cancel the delivery. This prevents the data corruption that factory accountants dread.

Delivery created — stock reduced immediately
costAtDispatch frozen — weighted avg cost snapshot
COGS recognized — at delivery, not invoice
Invoice created — revenue recognized, no stock touch
Cancellation chain — invoice first, then delivery
Domain Logic
Production Orders: Pakistan-Specific Corrugated ERP

The production system models the actual physics of corrugated box manufacturing. A 5-ply box requires 2 medium sheets and 1 liner. Sheet dimensions come from box dimensions plus joint and flap allowances.

Medium consumption is area-based (m²), liner is weight-based (kg using GSM), and glue is a ratio of medium weight. All operations run inside serializable database transactions with automatic retry on conflicts.

DRAFT — dimensions, ply, materials selected
Calculate — area, weight, glue from box geometry
POSTED — stock mutations in serializable txn
Cost snapshot — unitCost captured per material
CANCELLED — inverse movements, original costs
Settings-First Design
HR & Payroll: Every Factory Is Different

Instead of hardcoding assumptions, I built a settings-first system: the HR module begins with a setup wizard where the business configures their exact rules. Features that aren't enabled don't appear in the UI.

Payroll uses dynamic working-day calculations per month, normalizes all salary types to a daily rate, and blocks approval if any employee has unmarked attendance — a deliberate friction that prevents accidental salary deductions.

Setup wizard — configure rules per business
Attendance grid — monthly entry per department
Leave management — quotas, approvals, balance tracking
Payroll run — DRAFT → REVIEWED → APPROVED → PAID
Payment — posts to OperationalExpense automatically
06 — Technical Architecture

Enterprise-grade
engineering

Multi-Tenant Isolation

Every query scoped by businessId. Session auth on all routes. Fatal error if test env touches production DB. Three isolated database environments.

Security

Serializable Transactions

All inventory-mutating operations use PostgreSQL's highest isolation level. Automatic retry wrapper handles serialization conflicts transparently.

Data Integrity

Security Audit & Remediation

Formal audit of my own codebase. Found 10 vulnerabilities across two batches. Every finding fixed and verified with regression tests. Full documentation.

Self-Audited

Auth Hardening

Rate limiting, CSRF protection, email OTP, trusted device management, optional 2FA, Google OAuth. Browser security headers configured at app level.

Authentication

Design Token Pipeline

Canonical JSON → generated TypeScript → CSS custom properties → Tailwind utilities. Sync checker validates runtime matches spec. Route-level adoption manifest.

Design System

56 E2E Test Workflows

Playwright coverage across auth, onboarding, CRUD, financial transactions, HR flows, and reports. 57 routes mapped with zero missing coverage.

Testing
LayerTechnology
FrontendNext.js 16.1.4, React 19, TypeScript, Tailwind CSS 4
BackendNext.js API Routes, Prisma 7.2.0, PostgreSQL (Neon)
AuthSession-based, Scrypt hashing, OTP, Google OAuth, optional 2FA
Design System24 components, token JSON → generated CSS/TS, sync checker
TestingPlaywright E2E (56 workflows), 3 isolated database environments
SecurityRate limiting, CSRF, serializable transactions, formal audit
AI ToolingClaude AI (architecture, code, audit), Perplexity (research)
07 — Scope

10 modules.
55+ pages.

10
Business Modules
35+
API Routes
56
Test Workflows
1
Production User
ModuleWhat It Covers
DashboardKPI cards, time filters, quick actions, recent transactions
InvoicesDelivery-to-invoice chain, hybrid COGS/revenue accounting
PurchasesRelational line items, freight allocation, weighted average costing
InventoryTyped materials (reel paper, rolls, chemicals, finished goods), production orders
Customers & SuppliersCRUD, ledger with running balance, date filtering, smart caching
BankingBank accounts, computed ledger, petty cash, transfers
HR & PayrollSetup wizard, departments, attendance, leave, salary structures, payroll runs
ReportsProfit & margin, accounts receivable, customer profitability
SettingsProfile, security (2FA, trusted devices), expense categories
Onboarding6-step wizard with CSV/Excel import, opening stock management
08 — Reflection

What I learned

Hardest Problem

Bridging design and engineering

The biggest challenge was operating across both disciplines simultaneously — maintaining design system coherence while shipping production code, making typography choices while debugging serializable transaction failures, thinking about empty states while implementing weighted average costing formulas. Most product designers don't touch database isolation levels. Most developers don't build design token pipelines. Doing both means neither discipline gets shortcuts.

If I Started Over

Systematize earlier

Building first and systematizing after works, but the transition is expensive. I'd establish the token architecture and core component primitives earlier — even if the visual language is still evolving. Having a Button, Input, and Table component from day one would have saved significant refactoring. I'd also invest in the design system showcase page earlier — it became the most useful internal tool for consistency, but I built it late.