DEV Community

吴美良
吴美良

Posted on

I Built a $0/month SaaS — Full Stack Breakdown

Uploading imageHow CompressFast runs on zero infrastructure cost while handling thousands of image compressions.


The $0 Stack

┌──────────────────┬──────────────────────────┬───────────────────┐
│ Layer │ Technology │ Cost │
├──────────────────┼──────────────────────────┼───────────────────┤
│ Frontend │ Next.js 14 (App Router) │ $0 (Vercel Hobby) │
├──────────────────┼──────────────────────────┼───────────────────┤
│ Image Processing │ Canvas API + Web Workers │ $0 (client-side) │
├──────────────────┼──────────────────────────┼───────────────────┤
│ State Management │ Zustand │ $0 │
├──────────────────┼──────────────────────────┼───────────────────┤
│ Compression WASM │ @jsquash/oxipng + avif │ $0 │
├──────────────────┼──────────────────────────┼───────────────────┤
│ Payments │ Creem (one-time) │ % of sale only │
├──────────────────┼──────────────────────────┼───────────────────┤
│ License DB │ Vercel KV (Redis) │ $0 (free tier) │
├──────────────────┼──────────────────────────┼───────────────────┤
│ Analytics │ Custom API + Vercel KV │ $0 │
├──────────────────┼──────────────────────────┼───────────────────┤
│ Total │ │ $0/month │
└──────────────────┴──────────────────────────┴───────────────────┘

Why Client-Side?

The key insight: image compression is CPU-bound, not I/O-bound. Modern browsers have excellent Canvas APIs. You don't
need a server to resize or re-encode an image.

  1. No upload bandwidth — files stay on device
  2. Instant processing — zero network round-trip
  3. Privacy-first — a real differentiator
  4. Infinite scale — each user brings their own CPU

The Compression Pipeline

User drops file

Main thread: detect format

Web Worker pool (4 workers, round-robin):
- SVG: regex-based text optimization
- HEIC: main-thread decode → Worker
- Raster: decode → resize → quantize → encode
Optional: watermark, rotation, flip
Optional: target-KB iterative search
Optional: lossless oxipng (WASM)
Optional: AVIF (WASM)
Optional: EXIF preservation

Blob ready → download or ZIP (JSZip)

Key Decisions

Web Workers, not main thread. Offloading to Workers keeps UI responsive. 4 workers in round-robin — handles 20 files
without freezing.

WASM for PNG/AVIF. Canvas does JPEG/WebP natively, but lossless PNG needs oxipng (Rust→WASM) and AVIF needs
@jsquash/avif. Both load on demand.

Zustand over Redux. For a single-page tool, Zustand wins. Entire store is ~800 lines with all compression logic.

One-time purchase, not subscription. Creem handles $24.99 lifetime Pro. No recurring billing headaches.

Numbers After 2 Weeks

  • 744 page views, 123 unique visitors
  • 2,847 images compressed
  • 1 Pro sale ($24.99)
  • Twitter: ~5 followers

What I'd Do Differently

  1. SEO tool pages earlier — 11 pages drive long-tail traffic
  2. Demo showcase from day 1 — visitors need to see results first
  3. Mobile-first testing — most users on mobile

Try It

  • compressfast.site (global)
  • jisuyatu.com (China)

This is post #4 in my CompressFast build-in-public series. Previous: [privacy-first approach], [AVIF vs WebP
benchmarks], [why your compressor uploads files].

Top comments (0)