DEV Community

CalciQ.app
CalciQ.app

Posted on • Edited on

I Built a Privacy-First Calculator Platform With Zero Tracking — Here's the Architecture

#privacy #finance #opensource #investing

Every financial calculator website I've used tracks you. Calculator.net, Omni Calculator, Mathway — they all collect your inputs, profile your behavior, and sell that data.

Think about what you're entering: your salary, loan amounts, investment goals, health data. That's incredibly sensitive information being harvested by ad networks.

So I built CalcIQ — a calculator platform where nothing leaves your browser. 19 calculators, 8 currencies, works offline. Zero tracking.

Here's how I architected it.

The Problem With Existing Calculators

I analyzed 11 major calculator platforms. Every single one:

  • Loads Google Analytics, Facebook Pixel, or similar trackers
  • Stores your calculation inputs on their servers
  • Uses session recording tools (Hotjar, FullStory)
  • Requires accounts for basic features
  • Sells behavioral data to advertisers

When you enter "$500,000 home loan at 7.5%" into a mortgage calculator, that data point is worth money to insurance companies, real estate advertisers, and financial product marketers.

The privacy gap in this market is massive. 103M+ monthly users across calculator platforms, and zero privacy-first alternatives exist.

Architecture Decisions

1. Pure Vanilla JavaScript — No Framework 

class SIPCalculator extends BaseCalculator {
    constructor() {
        super('sip', 'financial');
        this.title = 'SIP Calculator';
    }

    performCalculation(inputs) {
        // All math happens here, in the browser
        const monthlyRate = inputs.rate / 12 / 100;
        const months = inputs.tenure * 12;
        const futureValue = inputs.amount * 
            ((Math.pow(1 + monthlyRate, months) - 1) / monthlyRate) * 
            (1 + monthlyRate);
        return { futureValue, totalInvested: inputs.amount * months };
    }
}
Enter fullscreen mode Exit fullscreen mode

Why no React/Vue/Angular?

  • Zero build step = instant deployment
  • No node_modules = smaller attack surface
  • No virtual DOM = faster calculations (<100ms)
  • No framework updates breaking things
  • Any developer can read and audit the code

The entire platform is static HTML + JS + CSS. No server-side rendering, no API calls, no database.

2. Zero Server Dependencies 

User's Browser
├── HTML (structure)
├── CSS (styling)
├── JavaScript (calculations)
└── localStorage (user preferences only)

Server
├── Static file hosting (Cloudflare Pages)
└── That's it. Nothing else.
Enter fullscreen mode Exit fullscreen mode

There is no backend. No database. No API. No server-side code.

Calculations happen entirely in the browser's JavaScript engine. Results are rendered to the DOM. Nothing is ever sent anywhere.

3. PWA for Offline Capability 

// Service Worker caches everything
const CACHE_NAME = 'calciq-v1';
const urlsToCache = [
    '/',
    '/app',
    '/assets/css/main.css',
    '/assets/js/calculators/simple-base-calculator.js',
    // ... all calculator files
];
Enter fullscreen mode Exit fullscreen mode

Once you visit CalcIQ, it works without internet. The Service Worker caches all assets. You can calculate your SIP returns on an airplane.

4. Multi-Currency Without External APIs 

const currencies = {
    USD: { symbol: '$', name: 'US Dollar', locale: 'en-US' },
    EUR: { symbol: '€', name: 'Euro', locale: 'de-DE' },
    GBP: { symbol: '£', name: 'British Pound', locale: 'en-GB' },
    INR: { symbol: '₹', name: 'Indian Rupee', locale: 'en-IN' },
    // ... 8 currencies total
};

// Auto-detect from browser locale
_detectUserCurrency() {
    const userLocale = navigator.language || 'en-US';
    const currencyMap = { 'en-US': 'USD', 'en-GB': 'GBP', 'en-IN': 'INR' };
    return currencyMap[userLocale] || 'USD';
}
Enter fullscreen mode Exit fullscreen mode

No exchange rate APIs. No external calls. Currency is just formatting — the math is the same regardless of currency symbol.

5. Mobile-First Design (No Framework)

75-85% of calculator users are on mobile. Instead of using Tailwind or Bootstrap, I built a custom component system:

// All UI elements go through this for consistent mobile sizing
MobileCalculatorComponents.resultGrid(items);
MobileCalculatorComponents.socialCard(title, value, subtitle);
MobileCalculatorComponents.sharingButtons(calculatorType);
Enter fullscreen mode Exit fullscreen mode

Rules enforced:

  • 16px minimum font size (prevents iOS zoom on input focus)
  • 48px minimum touch targets
  • No horizontal scrolling
  • CSS-only animations (no JS animation libraries)

Infrastructure: Cloudflare Pages

Why Cloudflare Pages over Vercel/Netlify?

  • Global CDN with 300+ edge locations
  • Enterprise DDoS protection (free)
  • Universal SSL (auto-renewing)
  • No cold starts (it's just static files)
  • 99.9% uptime SLA
  • Free tier handles significant traffic

Total infrastructure cost: $0/month for hosting.

The only costs are the domain ($12/year) and my time.

What I Learned

1. Privacy is a feature, not a limitation

Not having a backend isn't a constraint — it's a competitive advantage. The site loads faster (no API calls), works offline, and users trust it more.

2. Vanilla JS is underrated

Everyone reaches for React by default. But for a calculator platform, vanilla JS with ES6 classes is:

  • Faster to load (no 100KB+ framework bundle)
  • Easier to debug (no virtual DOM abstraction)
  • More maintainable (any JS developer can contribute)
  • More secure (smaller surface area)

3. Mobile-first isn't optional

With 75-85% mobile users, I design for 320px width first, then scale up. Not the other way around. This single decision eliminated 90% of responsive design bugs.

4. SEO for JS-heavy apps is hard

Google struggles to index JavaScript-rendered content. My solution: dedicated static HTML landing pages for each calculator with full content, linking to the JS app for actual usage. The landing pages rank; the app serves users.

Results

  • 19 calculators across financial, lifestyle, utility, and regional categories
  • 8 currencies with auto-detection
  • Works offline via PWA
  • <2 second load on 3G networks
  • Zero data collection — verified by checking Network tab
  • 50+ countries showing organic search impressions within 3 weeks of indexing

Try It

Open DevTools → Network tab. You'll see zero outbound requests carrying your calculation data. That's the whole point.

If you found this useful, consider giving CalcIQ a try next time you need a financial calculator. Your data will thank you.

Tags: #privacy #javascript #webdev #showdev #opensource #pwa #cloudflare #sideproject

Top comments (0)