Project

Realtor Website Starter

Rebrandable Next.js site for a Winnipeg realtor: listings, guides, leads, and a mortgage calculator

Role: Hatch Digital
Focus: Rebrandable marketing site, Sanity content model, CASL lead capture
Testing: Playwright, Lighthouse CI, axe
Key patterns: Next.js, Sanity, n8n, Tailwind

Next.js (App Router)
TypeScript
Tailwind CSS
Sanity
n8n
Playwright

What it does

Gives a realtor a marketing site that can be rebranded without a rewrite
Edits listings, neighbourhood guides, and reviews in Sanity Studio at /studio
Marks a listing sold from the studio and updates the public page
Posts lead forms to an n8n webhook with the CASL consent record
Calculates a Manitoba mortgage payment and land-transfer tax

Architecture

┌────────────────────┐     ┌────────────────────┐     ┌────────────────────┐
│  Next.js site      │────►│  Sanity CMS        │     │  n8n webhook       │
│  App Router        │     │  Studio at /studio │     │  lead + CASL       │
└─────────┬──────────┘     └─────────┬──────────┘     └─────────▲──────────┘
          │                          │                          │
          │ listings, guides,        │ mark sold, reviews       │ form post
          │ mortgage calculator      │                          │
          ▼                          ▼                          │
┌────────────────────┐     ┌────────────────────┐               │
│  Public pages      │     │  Studio editors    │               │
│  CSP + HSTS        │     └────────────────────┘               │
└─────────┬──────────┘                                          │
          └─────────────────────────────────────────────────────┘

Reliability and guardrails

Consent is part of the payload. A lead without a CASL record is not sent
CSP and HSTS are set on the production response
CI runs Playwright against the built site, plus Lighthouse and axe
Sold listings stay in the CMS and leave the active listing state on the public site

Key engineering decisions

Sanity Studio at /studio instead of a separate CMS host
Listings, neighbourhood guides, and reviews stay in the same app the realtor already opens.
Lead forms post to n8n, with the consent record stored alongside the lead
CASL needs proof of what was agreed to. The webhook payload carries that record, not just the email.
A Manitoba calculator in the site, not an embedded third-party widget
Mortgage payment and land-transfer tax are local questions. The page stays fast and the numbers stay inspectable.

Failure modes handled

Form submitted without consent — the lead is rejected and nothing is posted to n8n
Webhook down — the form surfaces the failure instead of pretending the lead was saved
Listing marked sold — the public page drops the active badge and keeps the record
Content edited in Studio — the site reads the published document, not a draft

How to demo in 2 minutes

1Open the site and browse a listing and a neighbourhood guide
2Open /studio, edit the listing, and mark it sold
3Submit the lead form with consent and confirm the n8n webhook receives the CASL record
4Run the Manitoba mortgage and land-transfer-tax calculator
5Run the Playwright, Lighthouse, and axe quality gate