Ankit Gabani
All products

Calqlate

Live in production

Free financial calculators for India. Every calculation runs in the visitor's browser. No backend, no database, no runtime API calls, and every page is fully static HTML.

Role
Architect and sole engineer
Live at
calqlate.angabani.com
  • Astro
  • TypeScript
  • Tailwind CSS v4
  • Chart.js
  • Vitest
  • Cloudflare Pages
  • GitHub Actions
Open live product Get in touch

Architecture, in one picture

BUILD TIME, runs once, on CI BROWSER, what the visitor downloads calculators.json Zod-validated collection lib/finance/*.ts pure functions, Vitest rendered once Astro static render formula, definitions, worked example, FAQ, initial results, schedule theme preset one .mjs file gen:brand CSS, logo, favicons OG image, manifest CI gate astro check → vitest → build → wrangler pages deploy static HTML to the edge Page is complete and readable with zero JavaScript executed crawlers, screen readers, answer engines all see everything on interaction Calculator island, ~4 KB gzip re-runs the same pure functions in the browser nothing typed is transmitted, stored or logged IntersectionObserver Chart.js, ~68 KB gzip separate chunk, only if the chart is scrolled to Lighthouse 100 / 100 / 100 / 100, mobile deferred, never blocks first render
The split is the whole design. Everything a reader or a crawler needs is decided at build time; the browser downloads an interactive enhancement, not a prerequisite.

What it is

A set of financial calculators aimed at Indian users. Loans, savings, tax, retirement. The kind of thing that normally arrives as a slow page covered in ads, where you type your salary into someone else’s server.

This one does the arithmetic in your browser. Nothing you type is transmitted, stored or logged, because there is nowhere for it to go. There is no backend at all.

Stack

Concern Choice
Framework Astro 7, static output, islands
Language TypeScript, strict, checked in CI
Styling Tailwind CSS v4, one generated theme layer
Charts Chart.js 4, loaded only where used
Tests Vitest, on the calculation layer only
Hosting Cloudflare Pages
Delivery GitHub Actions, then wrangler pages deploy

Deliberately absent: no backend framework, no database, no ORM, no auth, no state store, no client-side router, no web fonts. Interactivity is layered on top of static HTML rather than being required to see the content.

What makes it worth reading

Every page works without JavaScript. Headings, formulas, worked examples and FAQs are all in the HTML. The calculator widget is an enhancement. If the script never loads, the page is still useful, and a crawler sees everything a visitor does.

The maths is a library, not a component. Financial formulas live as pure functions with no UI, each tested against an independently verified value before it gets wired to a page. When a number is wrong, there is exactly one place to look.

One source for the theme. Colours are defined once and generate the Tailwind theme layer, so a palette change cannot leave one component behind.

Performance is a budget, not a goal. About 4 KB of first-load JavaScript, space reserved for late-loading widgets so nothing shifts as it appears, and Lighthouse 100 on all four categories on a mobile preview build.

Written for AI answer engines as well as search. Semantic HTML, one h1 per page, clean URLs, structured data on every page, and a robots.txt that explicitly welcomes AI crawlers. When someone asks an assistant how to compute an EMI, the page is built to be quotable.

Delivery

Every push runs astro check, then Vitest, then the build, and only then deploys. Static assets are served with immutable caching and hashed filenames, with security headers set at the edge. There is no server to patch and no database to back up, which is most of the appeal.

Next

See the rest of the work, or get in touch.

Case studies Contact