How I built a 13-tool Micro-SaaS with $0 server costs using React and Web APIs

Source: Dev.to

Introduction

If you’ve ever tried building a SaaS or a tool aggregator, you know the drill: file uploads equal server costs. Processing PDFs or stripping image backgrounds usually requires setting up a backend, managing storage (like AWS S3), and dealing with potential privacy liabilities.

I was tired of uploading my sensitive files to random “free” tools that hit me with paywalls or forced me to create accounts. So I challenged myself: Could I build a comprehensive toolbox where every single task runs 100 % in the user’s browser?

The answer is yes. I built ZeroTools, a collection of 13 everyday utilities (Image Compressor, Background Remover, PDF Optimizer, Code Formatters, etc.) with a strict Zero‑Backend architecture. Below is how I kept server costs at exactly $0 while guaranteeing total privacy for users.

The Architecture: React + Vite + Vercel

The foundation is simple. The entire project is a static React application built with Vite and hosted on Vercel’s free hobby tier. Since there is no Node.js backend or database, Vercel just serves the static assets globally via its CDN.

The real magic happens in how modern Web APIs replace backend servers.

1. Image Compression using HTML5 Canvas

Instead of uploading images to a server to run ImageMagick or Sharp, I used the native browser API.

When a user selects an image, the browser reads it via FileReader, draws it onto an invisible canvas, and then exports it at a lower quality or different format.

// Read the file locally
const reader = new FileReader();
reader.onload = (e) => {
  const img = new Image();
  img.src = e.target.result;

  img.onload = () => {
    // Draw on a temporary canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // Export as compressed WebP (0.7 = 70% quality)
    const compressedDataUrl = canvas.toDataURL('image/webp', 0.7);

    // Now the user can download the compressedDataUrl directly!
  };
};
reader.readAsDataURL(file);

2. AI Background Removal via WebAssembly (WASM)

Usually, removing backgrounds requires an expensive Python/PyTorch backend API. Instead, I used @imgly/background-removal, which ports a machine‑learning model to WebAssembly. The first time a user opens the tool, their browser downloads a tiny AI model (~40 MB, cached for future visits) and executes the neural network locally using the device’s CPU/GPU.

import imglyRemoveBackground from "@imgly/background-removal";

async function removeBg(imageFile) {
  // The AI runs completely inside the user's browser via WASM
  const imageBlob = await imglyRemoveBackground(imageFile);
  const url = URL.createObjectURL(imageBlob);
  return url;
}

Zero server cost, infinite scaling, and the user’s photos never touch the internet.

3. PDF Manipulation with pdf‑lib

For the PDF Compressor, I utilized the pdf-lib library. It allows loading, modifying, and saving PDFs directly in JavaScript. By reading the local file buffer, I can optimize the document structure and strip unnecessary metadata without ever sending the document over the network.

import { PDFDocument } from "pdf-lib";

async function compressPdf(file) {
  const arrayBuffer = await file.arrayBuffer();
  const pdfDoc = await PDFDocument.load(arrayBuffer);
  // Example: remove metadata
  pdfDoc.setTitle("");
  pdfDoc.setAuthor("");
  // Save the modified PDF
  const pdfBytes = await pdfDoc.save();
  return new Blob([pdfBytes], { type: "application/pdf" });
}

The Result

By shifting compute power from my servers to the user’s local device, the result is a blazing‑fast, infinitely scalable Micro‑SaaS.

• Privacy: 100 % guaranteed.
• Limits: None. Users can process 1,000 images if they want; it only costs them their own electricity.
• Hosting cost: $0.

Test the speed and see the tools in action: ZeroTools

I’d love to hear your thoughts on this architecture! Have you built any client‑side‑only tools recently? Drop your feedback or any edge cases you find in the comments.