Client
My Office Asia — flex-office brokerage in Hong Kong working with major flexible workspace operators and independent boutique providers across Hong Kong.
Industry
PropTech · commercial real estate · brokerage
Scope
Discovery → design system → development → production-readiness → client handover.
The brief
The old site read like a directory and buried what actually sells the service: a personal advisor model, fast response times, and no direct advisory fee for tenants.
- Rebuild the landing and catalog navigation around the advisor proposition instead of listing density.
- Give the client an admin CMS so they run the catalog themselves — no vendor dependency.
- Launch SEO-ready into the highly competitive “flexible workspace Hong Kong” niche.
- Structure the codebase so Singapore, Taipei or Seoul can be added later without a rebuild.
- Deliver production-ready: documented handover, configurable content, minimal hardcoded business logic.
What we did
Public site
- Landing focused on the advisor proposition, not on listing density.
- Catalog 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 reliable delivery safeguards 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 with simple access management and optional 2FA. Designed so role-based access can be expanded later if the team grows.
Production handover
- Audit-friendly review 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
Multi-market architecture from day one
Hong Kong is the only live market today, but market content, brand tokens and SEO metadata are separated from the component layer — adding Singapore or Seoul later means new content, not a new UI.
Domain-driven structure
Strict layering with no upward dependencies: domains/ (types and contracts) → server/ (business logic and DB adapters) → components/ (UI) → app/ (route composition only). Routes never touch Supabase tables directly — a provider boundary keeps the UI independent of the database, so a future backend change never forces a rewrite of the public interface.
Server-first React
App Router with Server Components as the default. Of roughly 400 components, only 83 run on the client — each one earning its place with state or event handlers. Small JS bundle, fast time to interactive.
Defense-in-depth for public forms
No reCAPTCHA, no Turnstile: a honeypot field, form-age check that rejects instant replays, per-IP rate limiting and server-side Zod validation keep spam out without making users prove they're human.
Fully tokenized design system
After design sign-off we ran a nine-step CSS refactor turning every color, font size, radius, shadow, spacing and motion value into a semantic token. A global change — accent color, spacing scale — is now one edit in globals.css.
Fluid editorial layout
Fluid spacing and content caps replace fixed breakpoint jumps, so pages scale smoothly from a 320px phone to an ultra-wide display.
Production-readiness
Before handover, the whole system went through an audit-style review covering security, SEO, accessibility and operations.
- Security headers: X-Frame-Options, Content-Type-Options, Referrer-Policy, full Permissions-Policy, Cross-Origin-Opener-Policy.
- SEO-ready architecture: dynamic sitemap covering country / district / building / listing / operator, robots.txt with staging guard, JSON-LD structured data, metadata on every public page, ranking-preservation plan for the migration.
- Accessibility: aria-labels, skip-link, prefers-reduced-motion, decorative images marked aria-hidden, semantic landmarks.
- Performance: server-first, loading skeletons on the 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: 71 statically generated pages, 0 TypeScript errors and a clean strict type-check on handover.
By the numbers
Technology stack
| Frontend | Next.js App Router, React, 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 catalog platform with real ownership
If your current site is just a pile of listings — and your team needs a scalable catalog, an admin CMS, SEO architecture and a handover you actually own — this is exactly the kind of platform we deliver.
Product gallery
