How we built AffordableHome.us

The problem we saw

Most homebuying tools are either overwhelming spreadsheets or black-box "AI" calculators that hide their assumptions. First-time buyers especially get lost in jargon, hidden fees, and mortgage insurance rules that change the monthly payment by hundreds of dollars.

We wanted one place that gives instant clarity — no account required, no credit card, no jargon — and then offers deeper guides when you're ready.

Stack & architecture

• Frontend: Vite + React 19 + TypeScript. Client-side interactivity for the listing analyzer and affordability calculator.
• Backend: Cloudflare Workers + Hono. Edge-rendered HTML for guides, learn pages, and these story destinations so crawlers see real content.
• SSR pattern: Every content page returns static HTML with unique title/description/canonical. React hydrates only for interactive tools.
• Deploy: wrangler + Cloudflare Pages/Workers. Zero-config preview + instant global edge.

Why this stack: Fast iteration, real static HTML for SEO/AdSense, and zero cold-start latency for the tools that matter most.

What we learned

• Real value beats clever tech. The listing analyzer that pastes a Zillow URL and returns PITI + negotiation scripts in seconds is the feature people actually use.
• Scroll-recovery CTAs matter. After someone finishes a guide, they need a clear next action at the bottom — not a dead end.
• Invisible intelligence wins. We don't say "powered by AI" on the page. The tools just work.
• Publisher depth is non-negotiable. Thin guides get filtered by AdSense. Every guide must be genuinely useful on its own.

Live proof

Everything here is running in production right now:

• Listing Analyzer — paste any listing, get instant numbers
• Affordability Calculator — income + debts → price range + DTI
• Guides — 2026-first-time-buyer playbook, PMI removal, closing costs, energy upgrades