Hearth, Home Search

The brief and the build

Brief: Keep list and map in step. Filter by type, bedrooms, and price; hover a home to highlight its pin and click a pin to find its card; save homes; open a detail view with a monthly payment estimate.

Search results are one source of truth rendered twice, as cards and as map pins, so the two views cannot disagree. Hovering a card highlights its pin without re-rendering, so clicks are never lost mid-hover. Every pin is a real button with the home’s name and price as its label.

Saved homes persist in local storage and have their own filter. The detail view is a modal that traps focus, closes on Escape, and returns focus to the card that opened it. The map is a stylised stand-in, and the pin layer is the part that would take a real map library’s coordinates.

Light is a split list and map. Dark puts the map first with large editorial cards and a slide-in detail panel. Creative is a collage of tilted cards over a sticky map.

Results

• Problem: Buyers lost track of which home on the map matched which card in the list.
• Built: A home search where cards and map pins render from one result set, with filters, saved homes and a payment-estimate detail view.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 0.9 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 12.1 KB (4.6 KB gzipped). The script alone is 7.9 KB (2.9 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs also score 100 in all four categories.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• List and map sync
• Filters and sort
• Saved homes
• Accessible modal