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

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.

Here is how I managed to keep my server costs at exactly $0 while guaranteeing total privacy for the 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 their CDN.

But the real magic happens in how I used modern Web APIs to 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.

Here is a simplified version of the logic:

// 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)
This was the most exciting part. 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 (~40MB, which is cached for future visits) and executes the neural network locally using their own 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 you to load, modify, and save 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.

🚀 The Result
By shifting the 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.
If you want to test the speed and see the tools in action, check it out here: 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.

Access via the link: ZeroTools