Forem: Cassi Lup 🐺

How I Built Browser-Based File Tools That Never Upload Your Data

Cassi Lup 🐺 — Fri, 03 Apr 2026 09:15:15 +0000

Every time I needed to compress an image or merge a PDF, I'd end up on some random website, uploading sensitive files to a server I didn't control. It always felt wrong.

So I built FileWash — a suite of free file tools where everything runs in your browser. Your files never leave your device.

The Problem

Tools like TinyPNG, iLovePDF, and remove.bg work great. But they all share the same architecture: upload your file to a server, process it there, download the result.

This means:

Your files pass through someone else's server
You're trusting their privacy policy (which you didn't read)
There are usually file size limits, watermarks, or account requirements
It doesn't work offline

For personal photos with EXIF location data? For company documents? For legal PDFs? The upload model feels like a compromise we shouldn't have to make.

The Architecture: Client-Side Everything

FileWash processes files entirely in the browser using JavaScript APIs. Here's how each tool works under the hood:

Image Compression

Uses the Canvas API with quality adjustment. Drop a JPEG in, and the browser re-encodes it at a lower quality setting:

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, width, height)
// Quality 0.0-1.0 controls compression
const compressed = canvas.toDataURL('image/jpeg', 0.7)

The browser-image-compression library wraps this with smart defaults — resizing, WebWorker support, and format detection.

Format Conversion

HEIC to JPG uses the heic2any library which decodes Apple's HEIC format in JavaScript. SVG to PNG uses canvas rasterization. WebP/PNG/JPG conversions use the Canvas API's built-in codec support.

PDF Processing

PDF merge, split, and compress use pdf-lib (for manipulation) and pdfjs-dist (for rendering). These are the same libraries that power Firefox's PDF viewer — battle-tested and fast.

Background Removal

This was the most impressive one to get working client-side. It uses @imgly/background-removal, which loads an ONNX neural network model via WebAssembly. The model runs inference directly in the browser — no API calls.

QR Code Generation

Uses the qrcode library with error correction level H (30% redundancy), which means you can embed a logo in the center and the code still scans.

Tech Stack

React 19 + TypeScript + Vite — fast builds, great DX
Tailwind CSS — styling without the CSS bloat
Pre-rendered to static HTML — 464 pages across 16 languages, built at compile time
Lazy-loaded tool pages — the homepage bundle is 275KB, tool-specific code loads on demand
All deployed as static files behind Cloudflare CDN

Performance: The Lazy Loading Story

The first version had a 1.4MB main bundle — every tool's dependencies loaded on every page. The homepage took 8+ seconds to become interactive on slow connections (India, mobile).

The fix was simple: React.lazy() for every tool page.

// Before: everything in one bundle
import ImageCompress from './pages/ImageCompress'
import PdfMerge from './pages/PdfMerge'
import BackgroundRemover from './pages/BackgroundRemover'

// After: each tool loads on demand
const ImageCompress = lazy(() => import('./pages/ImageCompress'))
const PdfMerge = lazy(() => import('./pages/PdfMerge'))
const BackgroundRemover = lazy(() => import('./pages/BackgroundRemover'))

Result: 1.4MB to 275KB main bundle (80% reduction). The heic2any library (1.3MB) now only loads when someone visits the HEIC converter. The ONNX runtime (381KB) only loads for background removal.

SEO for a Static SPA

FileWash supports 16 languages with 29 tool pages each = 464 URLs. All pre-rendered to static HTML at build time.

Each page has unique title tags, meta descriptions, FAQ schema markup, and breadcrumb structured data. The sitemap is generated automatically from the route definitions.

The pre-rendering script launches a local server, visits each route with a headless browser, and saves the rendered HTML. This gives Google fully crawlable content without needing SSR infrastructure.

Privacy as a Feature

The key insight: privacy isn't a restriction, it's a feature. When files never leave the device:

No server costs for file processing
No storage or bandwidth bills
No GDPR compliance complexity
No data breach risk
Works offline (after first load)
No file size limits
No account required

The only analytics is Cloudflare's cookieless Web Analytics beacon — no cookies, no consent banner needed.

What I Learned

Client-side processing is surprisingly capable. Canvas API handles most image operations. WebAssembly unlocks AI models in the browser. PDF libraries are mature.
Bundle size is your LCP. Lazy loading isn't optional for tool-heavy SPAs. One React.lazy() change cut our LCP P90 from 8 seconds to under 2.
Pre-rendering beats SSR for static content. No server runtime, no edge functions, just HTML files on a CDN. Simpler, cheaper, faster.
Privacy sells itself. The "100% private — files never leave your browser" badge in the header isn't just marketing. Users mention it in every positive interaction.

Try It

FileWash is free, no account required. Compress images, merge PDFs, convert formats, remove backgrounds, generate QR codes with custom logos, strip metadata — all in your browser.

Available in 16 languages: English, Spanish, Chinese, German, French, Japanese, Portuguese, Korean, Italian, Russian, Dutch, Polish, Turkish, Arabic, Hindi, Romanian.

I'd love feedback — especially on compression quality, background removal accuracy, and any tools you'd want to see added.

Built with React, TypeScript, Vite, and Tailwind CSS. No servers were harmed in the processing of your files.

How Tariffs Actually Hit Your Wallet: Building a Calculator with Real Data

Cassi Lup 🐺 — Fri, 03 Apr 2026 09:10:42 +0000

With all the noise around tariffs in 2025-2026, I wanted to answer a simple question: how much do tariffs actually cost my household?

Turns out, the data exists. The Yale Budget Lab has published detailed research on tariff impacts broken down by income tier. So I built a calculator that makes this data accessible to anyone.

Try it here: Tariff Impact Calculator

The Data Model

The core insight from the research is that tariff impact isn't linear — it hits different income tiers and spending categories differently. Here's the simplified model:

const TARIFF_TIERS = [
  { max: 50000,   baseImpact: 1700, label: "Under $50K" },
  { max: 75000,   baseImpact: 2400, label: "$50K - $75K" },
  { max: 100000,  baseImpact: 2800, label: "$75K - $100K" },
  { max: 150000,  baseImpact: 3200, label: "$100K - $150K" },
  { max: Infinity, baseImpact: 3800, label: "$150K+" },
];

A household earning $75K/year can expect roughly $2,400/year in higher prices from tariffs. That's $200/month that silently disappears.

But the real nuance is in where that money goes.

Breaking It Down by Category

Not all spending categories are equally affected. Electronics have heavy tariff exposure (most are imported), while services have almost none. Here's how I weighted it:

const CATEGORY_WEIGHTS = {
  groceries:   { weight: 0.22, label: "Groceries & Food" },
  electronics: { weight: 0.28, label: "Electronics" },
  clothing:    { weight: 0.18, label: "Clothing & Apparel" },
  auto:        { weight: 0.20, label: "Automotive" },
  homeGoods:   { weight: 0.12, label: "Home Goods" },
};

Electronics take the biggest hit at 28% of the total impact. If you're buying a new phone, laptop, or TV this year, you're feeling it more than average.

The calculator lets users adjust their spending per category with sliders — someone who rarely buys electronics but spends heavily on groceries will see a different (lower) number.

The Interpolation Problem

One thing that bugged me about simple tier-based calculators: if you earn $49,999 you get one number, and at $50,001 you get a completely different one. That's not how economics works.

So I added smooth interpolation between tiers:

const tierIndex = TARIFF_TIERS.indexOf(tier);
if (tierIndex > 0) {
  const prevTier = TARIFF_TIERS[tierIndex - 1];
  const prevMax = prevTier.max;
  const currMax = tier.max === Infinity ? 200000 : tier.max;
  const fraction = Math.min(1, Math.max(0, 
    (income - prevMax) / (currMax - prevMax)
  ));
  baseImpact = prevTier.baseImpact + 
    fraction * (tier.baseImpact - prevTier.baseImpact);
}

This gives a smooth curve instead of hard jumps between tiers.

Performance: The INP Problem

After launching, Cloudflare Web Analytics flagged a 504ms Interaction to Next Paint (INP) on this calculator — 100% Poor. Every keystroke in the income input triggered:

Tier interpolation math
Category weighting across 5 categories
Category breakdown array generation
PDF data reconstruction via useMemo

All synchronous, all blocking the paint.

The fix was simple — React 19's useTransition:

const [, startTransition] = useTransition();

// Before (blocking):
onChange={(e) => setIncome(Number(e.target.value))}

// After (non-blocking):
onChange={(e) => {
  const v = Number(e.target.value);
  startTransition(() => setIncome(v));
}}

The browser now paints the input response immediately while the expensive calculations happen in the background. LCP went to 100% Good.

The Stack

Next.js 16 with static export (output: "export")
Tailwind CSS for styling
Cloudflare for CDN + Web Analytics
jsPDF for downloadable PDF reports
No database, no auth, no tracking cookies

The entire site is static HTML deployed via rsync. No server-side logic needed — all calculations run client-side.

What I Learned

Real data beats estimates. Using Yale Budget Lab numbers gives credibility that "I made up some percentages" doesn't.
Smooth interpolation matters. Users notice when their result jumps $700 from a $1 income change.
INP is a real ranking signal. Google uses Core Web Vitals for rankings. A 504ms INP on your most-visited page is actively hurting your SEO.
useTransition is underused. For any calculator/form with expensive derived state, it's a one-line fix that dramatically improves responsiveness.
Cloudflare Web Analytics > Google Analytics for understanding real traffic. GA showed 65 users in a week while Cloudflare HTTP traffic showed 944 "visitors" — most of which were bots. CF Web Analytics (the JS beacon, not the HTTP dashboard) gave the honest number: 20 real humans.

The calculator is part of FinCruncher, a free suite of 31 financial calculators. No sign-up, no ads, no tracking — just crunch your numbers.

Try the Tariff Impact Calculator

If you're building financial tools or have questions about the data model, drop a comment. Happy to share more details.

I Built 31 Free Financial Calculators with Embeddable Widgets — Here's How

Cassi Lup 🐺 — Tue, 31 Mar 2026 11:59:03 +0000

I recently built FinCruncher — a collection of 31 free financial calculators. No accounts, no tracking, no ads. Just calculators.

I wanted to share the technical approach, especially the embeddable widget system that lets anyone add these calculators to their own site with a single line of HTML.

The Stack

Next.js with static export (output: 'export')
Tailwind CSS for styling
jsPDF for client-side PDF generation
Cloudflare Workers for IP-based geolocation
Hosted on a Linode VPS behind Cloudflare CDN

Everything runs client-side. Your financial data never leaves your browser.

The Calculators

31 calculators covering mortgage, compound interest, credit card payoff, retirement savings, debt payoff, ROI, income tax, car insurance, and more. Three of them (mortgage, income tax, car insurance) have state-specific versions for all 50 US states + DC — that's 153 additional pages with localized data.

Each calculator includes:

Interactive visualizations (charts, amortization tables)
PDF download of results (Letter/A4 format toggle)
Mobile-friendly responsive design
Structured data for SEO

The Embeddable Widget System

This is the part I'm most proud of. Any calculator can be embedded on any website with one line:

<iframe 
  src="https://fincruncher.com/embed/tariff-impact-calculator/" 
  width="100%" height="700" frameborder="0"
  style="border:none;border-radius:12px;max-width:680px;" 
  loading="lazy">
</iframe>

How it works architecturally

Next.js route groups made this clean. The main site lives under (main)/ and the widgets live under (widgets)/:

src/app/
├── (main)/           ← Full site with header, footer, analytics
│   ├── layout.tsx    ← robots: index, follow
│   └── calculators/
│       └── mortgage-calculator/
└── (widgets)/        ← Minimal wrapper, no chrome
    ├── layout.tsx    ← robots: noindex (don't index iframes)
    └── embed/
        └── mortgage-calculator/

The (widgets) layout strips everything — no header, no footer, no analytics. Just the calculator component with a small "Powered by FinCruncher" link at the bottom. Both route groups share the same calculator components, so there's zero code duplication.

The "Powered by" backlink

Every embed includes a subtle footer link back to FinCruncher. This is the growth flywheel — every site that embeds a calculator gives us a permanent backlink. Calculator.net grew significantly through this exact strategy.

The Tariff Impact Calculator

The most timely one: it estimates how 2025-2026 US tariffs affect household budgets, using Yale Budget Lab data. You can adjust by income level and spending category (groceries, electronics, automotive, etc.).

Try it: fincruncher.com/calculators/tariff-impact-calculator

State Detection with Cloudflare Workers

For the state-specific calculators, I built a tiny Cloudflare Worker that returns the visitor's US state from their IP:

export default {
  async fetch(request) {
    const cf = request.cf || {};
    return new Response(JSON.stringify({
      region: cf.region || null,
      country: cf.country || null,
      city: cf.city || null,
    }), {
      headers: { "Content-Type": "application/json" }
    });
  },
};

The StateSelector component calls this on mount and auto-selects the user's state. Simple, fast, no third-party API needed.

Want to embed a calculator?

All embed codes are at fincruncher.com/embed. The source code for the embed examples is on GitHub: github.com/cassilup/fincruncher-embeds.

If you're building a personal finance blog, real estate site, or anything where a mortgage/compound interest/tariff calculator would be useful — feel free to embed them. No API key, no signup, completely free.

Happy to answer questions about the architecture, the static export approach, or the embed system!