Nestify — Mortgage Affordability
A zero-backend mortgage affordability dashboard for couples buying in Montreal. Dual incomes, CMHC insurance, Quebec taxes, stress testing.
The challenge
Partners needed to share exact mortgage scenarios with each other — a shared link that shows the same calculator state and renders a rich preview card on iMessage, Slack, etc.
Approach
- All calculator state lives client-side in Zustand. Sharing compresses the full store into a single URL parameter with lz-string.
- A Cloudflare Pages Function acts as edge middleware — it intercepts crawler requests (Twitter, iMessage, Slack bots) and returns dynamic Open Graph meta tags.
- A second edge function at /api/og uses Satori + resvg-wasm to generate a 1200×630 preview image on the fly — "You can afford $650K in Montreal."
- Regular users hit the SPA directly and hydrate state from URL params. Zero backend, zero database.
Key takeaway
Cloudflare Workers as the serverless edge layer — the equivalent of AWS Lambda@Edge but with Pages Functions for per-route logic. Learned to split crawler vs. browser traffic at the edge for rich link previews without a server.