Client
My Office Asia — flex-office brokerage in Hong Kong working with operators of the WeWork / Regus / IWG / JustCo scale alongside independent boutique providers.
Industry
PropTech · commercial real estate · brokerage
Scope
Discovery → design system → development → production-readiness → client handover.
The brief
The client was running on a legacy site that read as a directory listing and did not communicate the actual service: a personal advisor, replies within two hours, free for the tenant.
- Re-architect the landing and catalogue navigation around the advisor proposition, not a pile of listings.
- Give the client an admin so they can run the catalogue themselves, without depending on the vendor.
- Launch SEO-ready into the very competitive “flexible workspace Hong Kong” niche.
- Architect the codebase so Singapore, Taipei or Seoul can be added later without a rewrite.
- Ship as a true production project — no TODOs, no hardcoded values, full handover documentation.
What we did
Public site
- Landing focused on the advisor proposition, not on listing density.
- Catalogue with search and filters: district × space type × team size × operator.
- Building and operator profiles, listing pages with gallery, “shared in building” facts and related options.
- Editorial layer: case studies, district guides, how-it-works, FAQ and long-form SEO resources.
- Contact form with guaranteed delivery and defense-in-depth spam protection.
- Fully responsive from 320px phones up to 4K monitors.
Admin CMS
- Private back office with server-side authentication and optional 2FA.
- CRUD for listings and buildings with image upload.
- AI editorial assistant inside the admin (Claude API) for copy support.
- Built for a small in-house team — no per-user account sprawl, single shared credential with TOTP.
Production handover
- Full audit of security headers, SEO metadata, accessibility, error and loading states.
- Documented production cutover checklist.
- Health-probe endpoint for uptime monitoring.
- Handover with an extended README, env documentation and cutover scripts.
Architectural decisions
White-label-ready from day one
Only one market is live (HK), but the architecture supports multiple markets and brands. Content data, brand tokens and SEO metadata are isolated from the component layer — adding Singapore or Taipei later doesn't require rewriting the UI. That's the foundation for the client's regional growth.
Domain-driven structure
Hard stratification with no upward dependencies: domains/ (types and contracts) → server/ (business logic and DB adapters) → components/ (UI) → app/ (route composition only). Routes don't know about Supabase tables — everything goes through a provider boundary. Migrating from Supabase to direct Postgres or PlanetScale would not require UI changes.
Server-first React
App Router with Server Components wherever possible. Out of roughly 400 components only 83 are client components — each one justified by state or event handlers. This keeps the JS bundle small and improves time to interactive.
Defence-in-depth for public forms
No external reCAPTCHA or Turnstile dependency: honeypot field, form-age check (instant replays rejected), per-IP rate limit, server-side Zod validation. Spam stays out without burdening the user.
Fully tokenised design system
After design sign-off we ran a nine-step CSS refactor: every colour, font size, radius, shadow, spacing and motion value became a semantic token. Result: zero hardcoded font-size declarations across 144 CSS modules. Any global change — accent colour, spacing scale — is a single edit in globals.css.
Atlas-edge fluid layout
Instead of fixed breakpoints for horizontal padding we use a single clamp(24px, 5.55vw, 80px). Content scales smoothly from mobile to desktop and caps in the editorial 1600px range on ultra-wide screens (Apple / Stripe / Linear style) without splattering on 4K.
Production-readiness
Before handover we ran an end-to-end audit.
- 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 staging guard, JSON-LD structured data, metadata on every public page.
- Accessibility: aria-labels, skip-link, prefers-reduced-motion, 143 decorative images marked aria-hidden, semantic landmarks.
- Performance: server-first, loading skeletons on the four heaviest routes, opt-in bundle analyser, next/image everywhere with correct sizes.
- Operations: /api/health for uptime monitoring, documented production cutover, extended README with a handover runbook.
Production build: ~5 seconds to compile, 71 statically generated pages, 0 TypeScript errors, 0 console.log in production.
By the numbers
Technology stack
| Frontend | Next.js 16 (App Router, React 19, Turbopack), TypeScript strict, CSS Modules |
|---|---|
| Backend | Supabase (PostgreSQL), Nodemailer (SMTP), Zod, Anthropic API (admin assistant) |
| Infra | Vercel-compatible, Edge runtime, sharp for image processing |
| Quality | ESLint, Prettier, Vitest, Playwright e2e, lint-staged, husky |
| Design | Fully custom DS, ~150 semantic tokens |
Build a platform like My Office Asia
If you're sitting on a listing-style site that doesn't convert, or you want a regional platform with a real admin and a defensible design system — we can build it the same way.
Product gallery
