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 client was running on a legacy site that read as a directory listing and did not communicate the actual service: a personal advisor model, fast response times and no direct advisory fee for tenants.
- 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 with lower rebuild risk.
- Ship as a production-ready project with documented handover, configurable content and minimal hardcoded business logic.
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 reliable delivery safeguards and defence-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
Only Hong Kong is live today, but the architecture is prepared for additional markets and brands. Market content, brand tokens and SEO metadata are separated from the component layer, so new locations can be added without rebuilding the UI from scratch.
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. The provider boundary keeps the UI independent from the database layer, so future backend changes would not require rewriting the public interface.
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. Any global change — accent colour, spacing scale — is a single edit in globals.css.
Fluid editorial layout
Instead of relying on fixed breakpoint jumps, the layout uses fluid spacing and content caps so pages scale smoothly from mobile screens to ultra-wide displays.
Production-readiness
Before handover we ran an end-to-end audit-friendly review across 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 catalogue platform with real ownership
If your current site is only a list of pages, listings or properties — and your team needs a scalable catalogue, admin CMS, SEO architecture and production handover — we can help turn it into a platform your business can actually run.
Product gallery
