Japanese leases front-load four and a half to six months of rent before you get the keys, spread across fees that are never quoted together.
Context
Deposit (敷金), key money (礼金), agency fee (仲介手数料), guarantor company (保証会社), fire insurance, lock exchange and rent paid in advance — the calculator models the full 初期費用 stack with the rules that actually govern it, including the legal cap on agency fees plus consumption tax, prorated 日割り rent, and guarantor rates.
It is written for people moving to Japan from abroad, so it is bilingual by construction rather than by translation pass.
How it works
Each fee says what it is, whether the money ever comes back, and how negotiable it is — plus a 'negotiated well' scenario showing what the same lease costs if you push on the items that move. The point is not the total; it is understanding which parts of the total are actually fixed.
The 23-ward choropleth is built from government boundary data, simplified at build time from GeoJSON into roughly 28 KB of precomputed SVG paths. That replaced shipping a mapping library and a GeoJSON payload to the client entirely. Clicking a ward loads its market average into the calculator, with notes on the ward's character and train access.
Studio averages are fetched once a day from SUUMO's public market-rate page — Japan's largest listing site — and cross-checked against LIFULL HOME'S, falling back to a calibrated baseline dataset when a source is unavailable. Next's daily ISR revalidation means upstream sites are hit at most once per day no matter how much traffic arrives, and the raw data is exposed at /api/rates rather than hidden inside the app.
Every UI string, fee explanation, negotiation tip and ward guide is written natively in English and Japanese. The choice persists and auto-detects Japanese browsers. 23 statically generated ward guide pages carry rent tables, rankings and example breakdowns, refreshed daily by the same pipeline.
Architecture
Decisions
The choices worth defending, and what they cost.
A choropleth of 23 fixed polygons does not need a runtime mapping library. Simplifying to SVG paths at build removed the dependency and the payload in one move.
Scraped market rates are the least trustworthy input in the system. Two independent sources plus a known-good baseline means a bad scrape degrades the numbers instead of breaking the page.
The data changes daily at most, and being a polite consumer of someone else's public page is part of the design.
Verification
The rates pipeline validates each source against the other and against a calibrated baseline before anything is served, so the failure mode is a stale-but-correct number rather than a wrong one.
Next case study
ChordLab
Client-side music analysis