ATRAS

A rent map for first-time renters in Metro Vancouver.

Role: Solo: research, design and engineering
Status: Live

The problem

When I moved to Vancouver, I didn't know which areas I could afford. Rental sites asked me to choose an area first, but that was exactly what I didn't know. So I kept scrolling through endless listings. Later, I found I wasn't alone. More than half of international students struggle to find a place, and "Where should I live?" is asked again and again on Reddit. So I built the tool I wished I had.

What it does

Enter your budget and the number of bedrooms. The map colours 25 areas by how their average rent compares to your budget. Tap an area to see the estimated rent, a short AI summary, reviews and photos. When you find an area you like, ATRAS takes you to rental sites to look for real places.

Desktop screen: the colour-coded map on the left and the details of Kitsilano on the right — The map and an area's details on desktop.

Phone screen: setting the budget and bedrooms — Set your budget.

Phone screen: the map coloured by budget — See which areas fit.

Phone screen: Kitsilano's estimated rent, photos, AI summary and a Find rentals button — Tap an area to learn more.

Key decisions

1. Choose what not to build

ATRAS doesn't show listings. Collecting listing data has legal risks, and rental sites already do it well. So ATRAS only helps you choose an area, then sends you to them. Thanks to this, it needs no backend and stays a simple, fast website.

2. Measure the gap in percent, not dollars

The map colours each area by how far its rent is from your budget. I had to choose how to measure that gap: in dollars, or in percent? Being $200 over is a lot on a $1,500 budget (13% more), but small on a $3,500 budget (only 6% more). So I used percent. This way, the same colour means the same thing, whatever your budget.

85% or lessWell within
85–95%Within
95–105%Right at
105–120%Slightly over
Over 120%Well over

Rent as a percentage of your budget.

3. Code picks the facts, AI only writes

Each area page has a short summary written by AI. But AI can make things up, and a wrong fact could lead someone to the wrong home. So I split the job. First, code reads public data, like maps and the census, and makes a list of true facts about each area, such as "has a beach called Spanish Banks." Then AI only turns that list into a few sentences. It isn't allowed to add anything. I checked all 25 summaries against their lists by hand, until none said anything that wasn't on the list.

Public data
List of facts
AI writes sentences
Checked by hand

How I designed it

I started with a moodboard of Canada's forests, lakes and mountains, and took the main colours from it: forest green, ivory and cedar. The logo came from the same place: two mountains reflected in a lake.

For the map, I first tried green to red. But people with red-green colour blindness couldn't tell the two ends apart. So I switched to blue and orange, and made sure all five colours stay different for them.

Moodboard with forest green, ivory and cedar colours and photos of Canadian lakes and mountains — The moodboard.

The logo.

Built with

Frontend: Astro, React, TypeScript
Map: MapLibre GL JS, Protomaps
Data & AI: CMHC and OpenStreetMap open data, Claude API
Hosting: Cloudflare, GitHub Actions

Thanks for reading! Open ATRAS