DEV Community

CalciQ
CalciQ

Posted 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

`javascript
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

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

Server
├── Static file hosting (Cloudflare Pages)
└── That's it. Nothing else.
`

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

javascript
// 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
];

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

`javascript
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';
}
`

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:

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

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.

What's Next

Building an AI-powered calculator generation engine — "Canva for Calculators." Natural language prompt → working calculator in 30 seconds. Same privacy-first architecture.

If you're interested in the technical details of the micro-template assembly system, let me know in the comments.

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)