Back to projects
Open standalone ×
02 / PROJECTConcept / demo project

Northline Realty

A focused property search for Toronto and the GTA, connecting filters, the map, saved homes and a next step in one clear journey.

Try interactive demo Try interactive demo Read the case
THE PROBLEMWHY IT EXISTS

Keep the search connected.

The design challenge was to preserve a buyer or renter’s context while they move between filters, locations, saved options and a single home. Northline keeps those decisions visible and gives the next step a clear place in the journey.

VISUAL SYSTEMDESIGN DIRECTION

Calm space for a dense search.

Architectural photography provides the character; a tight grid, Manrope typography and one muted green accent keep prices, filters and map states easy to scan. The visual hierarchy gives the home and its location room to speak without competing promotional content.

Field #F5F7F4
Surface #FFFFFF
Ink #26332E
Action #365E4B
THE SOLUTION03 PILLARS
01

One search, two views

List and map use the same filtered results. Applied filters, sorting, page and map area live in the URL, so a shared link restores the search.

02

A shortlist that stays

Homes can be saved across the catalog and property pages, then revisited after a reload in the same browser without creating an account.

03

A practical next step

Property details lead to an illustrative mortgage estimate or a guided demo viewing request, with the limits of both made explicit.

IN PRACTICESCREENSHOTS
Northline property page showing the home gallery, details and viewing action.
A home in context
Northline mobile map view with Toronto results and a Show homes action.
Map search on mobile
Northline mortgage calculator with home price, down payment and an illustrative monthly payment.
An estimate with clear assumptions
Northline viewing flow showing the selected home, Toronto time slots and contact fields.
A guided demo viewing request
LIVE DEMOINTERACTIVE

Try it in your browser.

Illustrative homes and locations. Saved homes stay in this browser; viewing requests are demos. Open standalone ↗
UNDER THE HOODTECH

How it is built.

  • Next.js 16 + React 19 + TypeScript
  • Tailwind CSS
  • 48 stable demo homes: 30 Buy and 18 Rent
  • URL-backed filters, sorting, pagination and map area
  • Interactive illustrated map with optional Mapbox GL JS
  • Versioned, browser-local saved home IDs
  • React Hook Form + Zod validation
  • Illustrative mortgage calculation
  • Viewing slots in America/Toronto
  • Vitest unit tests + Playwright user journeys
HONEST LIMITSWHAT IT IS NOT

Where the demo stops.

Northline is a portfolio concept with fictional homes, agents, prices and approximate locations. This demo uses an interactive illustrated map; a public Mapbox token can enable Mapbox separately. There is no live listing database or account. Viewing requests are local demonstrations: no time is reserved, no email is sent and no agent is contacted. Mortgage estimates are illustrations, not lending offers.

Open Northline Realty Open standalone in a new tab ↗