How I Built a Suite of 15 Zero-Server, 100% Client-Side Calculators & Tools

How I Built a Suite of 15 Zero-Server, 100% Client-Side Calculators & Tools

Whenever you need a quick online tool—whether it's an auto loan calculation, compound interest projection, WebP image compressor, or a B2B invoice generator—the modern web experience is often painful:

• Aggressive popups and paywalls asking for $9.99/month just to download an amortization schedule.
• Security risks, where private business data, client rates, and financial numbers are uploaded to external cloud databases.
• Bloated frameworks taking 5+ seconds just to hydrate a basic form.

I set out to build Kitzura: a suite of 15 free, high-performance web calculators that execute 100% in-browser memory with zero server-side computation.

Here is the technical breakdown of how I designed and engineered it.

---

1. Architectural Philosophy: The Zero-Backend Stack

Rather than spinning up Docker containers, serverless Lambdas, or Node.js APIs for simple math and file conversions, I chose a radical constraint: Everything must run inside the user's browser.

Key Benefits:

1. Absolute Privacy: User inputs (salary, loan balances, client invoice details) never leave the browser. There is no database to breach.
2. Infinite Scaling & Zero Hosting Costs: Serving static HTML/CSS/JS via a global CDN (Firebase Hosting) costs essentially nothing and scales to millions of concurrent users without server bottlenecks.
3. Sub-second Speed: Near-instant First Contentful Paint (FCP) and Time to Interactive (TTI).

---

2. In-Browser Image Compression with the HTML5 Canvas API

One of the flagship tools in the suite is the WebP Image Compressor. Traditional image optimizers upload your private photos to a remote server, process them via ImageMagick, and send back a download link.

Instead, Kitzura utilizes the browser's native HTMLCanvasElement.toBlob() method:

function compressImageClientSide(file, qualityLevel, maxWidth = 1920) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        // Downscale proportionally if larger than maximum bounds
        if (width > maxWidth) {
          height = Math.round((height * maxWidth) / width);
          width = maxWidth;
        }

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);

        // Convert locally to high-compression modern WebP
        canvas.toBlob(
          (blob) => resolve(blob),
          'image/webp',
          qualityLevel // e.g., 0.8
        );
      };
    };
  });
}

This delivers 70% to 85% file size reductions right on the client device, keeping bandwidth zero and execution instantaneous.

---

3. High-Entropy Password Generation via Web Cryptography API

Standard Math.random() in JavaScript is pseudorandom and completely unsuitable for security credentials. In the PassVault Password Generator, we tap directly into the cryptographically secure pseudo-random number generator (CSPRNG) exposed by modern browsers:

function generateSecureToken(length = 32, charset) {
  const array = new Uint32Array(length);
  window.crypto.getRandomValues(array);

  let result = '';
  for (let i = 0; i < length; i++) {
    result += charset[array[i] % charset.length];
  }
  return result;
}

By computing Shannon entropy directly in real-time, users get instant feedback on password crack-time projections against standard GPU clusters.

---

4. Executive A4 PDF Generation without Bulky Heavy Libraries

Most web developers reach for bloated 500KB client-side PDF libraries (like jspdf or html2pdf) that frequently break layout fonts and styles.

Instead, Kitzura leverages modern native CSS @media print rules:

@media print {
  body {
    background: #ffffff !important;
    color: #0f172a !important;
  }
  .navbar, .omni-cross-footer, .action-btn-group, .ad-container, aside {
    display: none !important;
  }
  .container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .print-statement-footer {
    display: block !important;
    position: fixed;
    bottom: 0;
  }
}

When a user clicks "Print PDF" or "Export Statement", we invoke window.print(). The browser's native print-to-PDF engine renders crisp, vector-grade typography with zero external library overhead.

---

5. URL Hash State Synchronization

How do you allow users to save or share calculations without storing their data in an SQL database?

We serialize user inputs into URL hash parameters:

const Kitzura = {
  syncHash: function(stateObj) {
    const params = new URLSearchParams();
    for (const [key, value] of Object.entries(stateObj)) {
      if (value !== null && value !== undefined && value !== '') {
        params.set(key, value);
      }
    }
    const newHash = params.toString();
    if (newHash) {
      history.replaceState(null, '', '#' + newHash);
    }
  }
};

When a user shares a link like https://kitzura.com/mortgage-calculator/#p=450000&r=6.5&t=30, the receiver's browser parses the hash parameters on page load and hydrates the exact state instantly.

---

Summary & Live Demo

By focusing on native browser APIs, lightweight Vanilla CSS, and zero-telemetry architectures, Kitzura proves that utility web apps can be blazingly fast, deeply private, and completely free.

Check out the live suite of all 15 tools here:

👉 Kitzura (Free Calculators & PDF Tools)

Feel free to ask questions about the implementation below!