Behind the build

How we built AffordableHome.us

A transparent look at why this site exists, the stack we chose, and what we learned shipping real tools for first-time homebuyers.

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:

Next step: Try the Listing Analyzer on a real home you're considering. See the numbers that actually matter.