← back technical writeup

frontend · housing · fullstack adjacent

LAHKIO Jan 2026

Frontend for Ann Arbor housing reviews: maps, list/detail pages, ratings, and an “AI Review” panel on top of Supabase. I worked on the property detail side.

Next.js 16 React 19 TypeScript Tailwind CSS 4 Supabase Google Maps Radix UI
Visit lahkio.com

// overview

what I built

On LAHKIO / Tenant Exchange I owned the homes and apartments detail flow: select a pin or list row, open the property page, and see reviews, ratings, cost and beds snapshots, plus an “AI Review” panel that extracts pros and cons from the text.

I prototyped in a Next.js app branded LAHKIO, then shipped into the shared Tenant Exchange repo (about 2.8k lines on the property-detail branch).

// architecture

how the frontend fits

Data

Supabase tables for apartments, homes, and reviews. The client reads that live for lists, maps, and detail. Production also uses SSR-friendly clients.

Insights (not magic ML)

lib/insights.ts and keyword templates turn review text into pros and cons. I kept this deterministic and easy to debug instead of calling a model on every page load.

Maps & routing

Custom pins in the prototype, Google Maps Advanced Markers in production. Pins go to routes like /apartments/[id] and /homes/[id].

UI

Tailwind v4, lucide icons, and Radix in production. Detail sections, ratings, and review lists are shared components so homes and apartments reuse the same layout.

// stack

languages · libraries

// concepts

Concepts applied

/apartments/[id] · /homes/[id]

Dynamic routes

Map pins and list rows open a real URL for that property so reviews and ratings load for the right id.

Supabase

Live data fetching

Apartments, homes, and reviews come from Supabase tables. The detail page composes them into gauges, cost summaries, and review threads.

AI Review panel

Keyword summaries

Pros and cons are built from review text with keyword templates. The logic stays transparent and fast.

map → detail

Map-to-detail flow

Browse on the map first, then open the property detail page. Same pattern in the prototype pins and production Google markers.