DEV Community

CalciQ.app
CalciQ.app

Posted on

I Built a Privacy-First Calculator Platform Used in 100+ Countries — Here's the Stack

#javascript #privacy #showdev #webdev

I Built a Privacy-First Calculator Platform Used in 100+ Countries — Here's the Stack

Every major calculator website tracks you. Calculator.net, Omni Calculator, NerdWallet — they all use session recording, behavioral profiling, and third-party cookies.

I built the opposite: calciq.app — 18 calculators across finance, lifestyle, and utility categories. Zero tracking. Zero data collection. Works offline. Used in 100+ countries.

Here's the technical breakdown.

The Architecture 

No backend. No database. No API calls.
Everything runs in the browser.
Enter fullscreen mode Exit fullscreen mode

Stack:

  • Vanilla JavaScript (ES6+) — no React, no Vue, no framework
  • CSS3 with responsive design (no Tailwind, no Bootstrap)
  • PWA with Service Worker for offline capability
  • Cloudflare Pages for hosting (free tier)
  • Static HTML files — no SSR, no build step

Why no framework? Performance. A calculator doesn't need virtual DOM diffing. It needs instant response to user input. Our total JS bundle is under 500KB for 18 calculators. Most framework-based apps ship that much for a login page.

The Privacy Architecture 

// This is our entire "analytics" system:
// ... nothing. There is none.
Enter fullscreen mode Exit fullscreen mode

No Google Analytics. No Mixpanel. No Hotjar. No cookies. No localStorage tracking. No fingerprinting.

How do we know anything about users? Google Search Console (anonymous, aggregated data Google gives us anyway) and basic Cloudflare stats (page views by country, no PII).

The result: Our pages load faster because there's no tracking JavaScript. No consent banners needed. GDPR compliant by default — you can't violate privacy if you don't collect data.

Calculator Architecture Pattern

Every calculator extends a base class:

class CoffeeCalculator extends BaseCalculator {
    constructor() {
        super('coffee', 'lifestyle');
        this.title = 'Coffee Cost Calculator';
    }

    validate(inputs) {
        // Input sanitization + XSS prevention
        // Returns user-friendly error messages
    }

    performCalculation(inputs) {
        // Pure math — no side effects, no API calls
        // Returns results object
    }

    renderResults(results) {
        // Mobile-first UI using shared components
        // Includes viral sharing functionality
    }
}

window.CoffeeCalculator = CoffeeCalculator;
Enter fullscreen mode Exit fullscreen mode

Key design decisions:

  • Global class pattern (no module bundlers needed)
  • Every calculator is self-contained
  • Shared MobileCalculatorComponents for consistent UI
  • All inputs validated with XSS protection
  • No eval() or innerHTML with user data — ever

Multi-Currency Support (8 Currencies) 

const currencies = {
    USD: { symbol: '$', locale: 'en-US' },
    EUR: { symbol: '€', locale: 'de-DE' },
    GBP: { symbol: '£', locale: 'en-GB' },
    INR: { symbol: '₹', locale: 'en-IN' },
    CAD: { symbol: 'C$', locale: 'en-CA' },
    AUD: { symbol: 'A$', locale: 'en-AU' },
    JPY: { symbol: '¥', locale: 'ja-JP' },
    SGD: { symbol: 'S$', locale: 'en-SG' }
};
Enter fullscreen mode Exit fullscreen mode

Auto-detected from navigator.language. No IP-based geolocation (that would require a server call — against our principles).

PWA & Offline Support

The Service Worker caches all calculator logic:

const CORE_CACHE = [
    '/', '/app', '/assets/js/calculators/**',
    '/assets/css/main.css'
];

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('calciq-v1')
            .then(cache => cache.addAll(CORE_CACHE))
    );
});
Enter fullscreen mode Exit fullscreen mode

Users can install calciq.app as a mobile app. All calculations work without internet. No account needed.

Mobile-First Design (75%+ Mobile Users) 

/* Minimum touch targets: 48px */
/* Minimum font: 16px (prevents iOS zoom) */
/* Responsive breakpoints: 320px, 768px, 1024px */
Enter fullscreen mode Exit fullscreen mode

Calculator platforms get 75-85% mobile traffic (higher than the 58-65% web average). We designed every interaction for thumbs first.

What I Learned

  1. Privacy is a feature, not a limitation. Pages load faster without tracking scripts. Users trust you more. GDPR compliance is free.

  2. You don't need a framework for everything. Vanilla JS is fast, debuggable, and has zero supply chain risk. No node_modules with 1,847 dependencies.

  3. Cloudflare Pages free tier is absurdly generous. Unlimited bandwidth, global CDN, custom domains, auto-SSL. Our hosting cost: $0/month.

  4. Multi-currency from day 1 was the right call. We're now in 100+ countries. If we'd started USD-only, we'd be rewriting everything.

  5. Mobile-first isn't optional for calculators. Three-quarters of calculator usage is on phones. Desktop-first calculator sites are leaving money on the table.

The Numbers (3 Months In)

  • 100+ countries with organic search traffic
  • 18 specialized calculators
  • 2,475 Google Search impressions (growing 15%/week)
  • $0 hosting cost
  • 0 bytes of user data collected

Try It

🔗 calciq.app — All 18 calculators, zero tracking

The code patterns are battle-tested across financial calculators (SIP, EMI, FD, Rent vs Buy), lifestyle calculators (coffee cost, fuel, tip), and utility calculators (BMI, age). Each one follows the same base class pattern shown above.

If you're building tools that handle sensitive financial data, consider whether you actually need to collect it. For calculators, the answer is almost always no.

Questions about the architecture? Drop a comment — happy to go deeper on any part of the stack.

Top comments (0)