Project Overview
My Office Asia (MOA) is a broker for flexible workspace rentals in Hong Kong, working with operators ranging from WeWork, Regus, IWG, and JustCo to independent boutique providers.
MOA came to us with an outdated catalog-style website that looked like a listing directory and did nothing to convey their actual offer — a personal advisor, free for tenants, with a two-hour response guarantee.
We delivered the engagement end-to-end: discovery, design system, development, production hardening, and a documented handover. The result is a public catalog site and a closed admin that the MOA team can run themselves, architected so that adding Singapore, Taipei, or Seoul later is configuration rather than a rebuild.
The Challenge
MOA needed more than a redesign. The brief had four moving parts:
- Reposition the landing experience around the advisor offer instead of a flat catalog feed.
- Give the team a real admin so they own the catalog without depending on the agency for daily edits.
- Ship the site as SEO-ready from day one in a competitive niche (flexible workspace Hong Kong).
- Architect the foundation so adding new Asian markets later is a configuration change, not a rewrite.
- Hand the project over as production-ready — no TODOs, no hardcoded values, with documentation.
What We Built — Public Site
The public catalog is the surface MOA prospects land on. We designed it around the advisor offer, with the listing inventory as supporting evidence rather than the headline.
- Landing focused on the advisor proposition (two-hour reply, free for tenant), with the catalog as proof rather than the lead.
- Catalog search with district × space type × team size × operator filters, plus building and operator profiles.
- Listing pages with photo galleries, building-shared facts, and related options surfaced contextually.
- Editorial layer for SEO weight: case studies, district guides, how-it-works, FAQ, and longform resources.
- Contact forms with guaranteed delivery and defense-in-depth anti-spam (no third-party CAPTCHA dependency).
- Fully responsive from 320px to 4K monitors, with editorial capping on ultra-wide displays.
What We Built — Admin
The admin lets the MOA team manage their own catalog without engineering involvement. It is a closed area, designed for the realities of a small team rather than enterprise IT.
- Server-side authorization with optional TOTP 2FA — works for a small team without per-user account overhead.
- Full CRUD for listings and buildings with image upload and validation.
- Claude-powered editorial assistant inside the admin for copywriting and content polish.
- Documented operations runbook so the team can onboard new staff to the admin without us.
Architecture & Engineering Decisions
Five structural decisions shaped the codebase. Each one buys a specific business capability — not engineering taste for its own sake.
White-label ready from day one
Even though only the Hong Kong market is live, the architecture supports multiple markets and brands. Content data, brand tokens, and SEO metadata are isolated from the component layer, so adding Singapore or Taipei in the future does not require rewriting the UI. This makes regional expansion an operational decision instead of a build.
Domain-driven structure
Strict layering with no upward dependencies: domains (types and contracts) → server (business logic and database adapters) → components (UI) → app (route composition only). Routes never reach into database tables — everything goes through a provider boundary. Migrating from Supabase to a direct Postgres or another provider would not touch the UI.
Server-first React
App Router with Server Components wherever possible. Out of roughly 400 components, only 83 are client components, and every one is justified (state, event handlers, or browser APIs). This minimizes the JavaScript bundle and improves time-to-interactive.
Defense-in-depth for public forms
No external reCAPTCHA or Turnstile dependency. Honeypot field, form-age check (filters instant replay submits), per-IP rate limit, and server-side Zod validation. Stops spam without making real prospects pass a puzzle.
Fully tokenized design system
After the design was approved, we ran a nine-stage refactor of the CSS: every color, font size, radius, shadow, spacing, and motion duration is a semantic token. Result: zero hardcoded font-size values across 144 CSS modules. Any global change — accent color, base spacing scale, motion feel — is a single edit in globals.css.
Atlas-edge fluid layout
Instead of fixed breakpoints for horizontal gutters, a single clamp(24px, 5.55vw, 80px) drives them. The content scales smoothly from mobile to desktop and caps in an editorial 1600px range on wide screens — the Apple / Stripe / Linear pattern — so the layout does not spread out on 4K monitors.
Production Readiness
Before handover, we ran an end-to-end audit across every dimension that affects launch quality.
- Security headers: X-Frame-Options, Content-Type-Options, Referrer-Policy, full Permissions-Policy, Cross-Origin-Opener-Policy.
- SEO: dynamic sitemap covering country / district / building / listing / operator, robots.txt with a staging guard, JSON-LD structured data, and per-page metadata.
- Accessibility: aria-labels, skip link, prefers-reduced-motion handling, 143 decorative images marked aria-hidden, semantic landmarks throughout.
- Performance: server-first rendering, loading skeletons on the four highest-traffic routes, optional bundle analyzer, next/image with correct sizes everywhere.
- Operations: /api/health for uptime monitoring, a documented production cutover checklist, and an extended README with the team runbook.
- Production build: ~5 seconds compile, 71 statically generated pages, zero TypeScript errors, zero console.log in production.
By the Numbers
Tech Stack
Project Gallery
Case Studies
Let’s build what
moves you forward.
From idea to infrastructure — we help you design, launch, and scale systems that perform.