How I Built a Zero-Latency, 100% Client-Side Payroll Engine in Next.js

ANAS MYOUNAS — Sun, 27 Sep 2026 06:46:18 +0000

Legacy paycheck calculators are bloated with ad scripts, slow to render, and send sensitive salary data to backend servers.I built PayCalc to demonstrate that a modern web app can execute complete 50-state U.S. payroll calculations instantly in the browser with 100% data privacy.Key Technical ArchitectureZero-Latency Client Engine: Instead of making backend API requests, all 2026 IRS progressive tax brackets, FICA statutory caps ($176,100 for Social Security), standard deductions, and 50-state tax codes run in pure TypeScript (taxEngine.ts). Standard calculations finish in under 2ms.100% Browser Privacy: Salary inputs, filing statuses, and deduction parameters never leave the user's browser. Zero backend databases or telemetry.Solving Net-to-Gross (Reverse Tax) with Binary SearchCalculating gross pay from a target net income (Target Net) normally requires manual trial-and-error. Since tax functions are monotonic, PayCalc solves this on the client using a Binary Search Algorithm that converges in 12–15 iterations (3ms):TypeScriptexport function

calculateGrossFromNet(targetNet: number, state: string): number {
  let low = targetNet, high = targetNet * 2.5, estGross = targetNet;
  while (low <= high) {
    estGross = (low + high) / 2;
    const diff = calculateGrossToNet(estGross, state).netPay - targetNet;
    if (Math.abs(diff) <= 0.01) return estGross;
    if (diff < 0) low = estGross; else high = estGross;
  }
  return estGross;
}

Programmatic Edge SEOPre-renders static routes for all 50 states using Next.js generateStaticParams().Generates dynamic social preview cards on the edge via @vercel/og (/app/opengraph-image.tsx) to display state-specific tax stats on social shares.
Try the live tool at paycalc.online.

DEV Community: ANAS MYOUNAS

How I Built a Zero-Latency, 100% Client-Side Payroll Engine in Next.js