Kunde
My Office Asia — Brokerage für Flex-Workspaces in Hongkong, arbeitet mit großen Flex-Workspace-Operatoren und unabhängigen Boutique-Anbietern in Hongkong.
Branche
PropTech · Commercial Real Estate · Brokerage
Scope
Discovery → Design-System → Entwicklung → Production-Readiness → Handover an den Kunden.
Die Aufgabe
Der Kunde lief auf einer veralteten Seite, die wie ein Katalog-Listing wirkte und die eigentliche Leistung nicht vermittelte — ein persönliches Advisor-Modell, schnelle Reaktionszeiten und keine direkte Beratungsgebühr für Mieter.
- Landing und Katalog-Navigation rund um das Advisor-Versprechen neu denken, nicht als Listing-Stapel.
- Dem Kunden ein eigenes Admin geben, mit dem er den Katalog ohne externe Abhängigkeit pflegt.
- Mit SEO-Bereitschaft in die hart umkämpfte Nische «flexible workspace Hong Kong» launchen.
- Codebasis so aufstellen, dass Singapur, Taipeh oder Seoul später mit geringerem Umbau-Risiko ergänzt werden können.
- Als produktionsreifes Projekt mit dokumentiertem Handover, konfigurierbaren Inhalten und minimaler hardcodierter Business-Logik übergeben.
Was wir gemacht haben
Public Site
- Landing mit Fokus auf das Advisor-Versprechen, nicht auf Listing-Dichte.
- Katalog mit Suche und Filtern: Bezirk × Space-Typ × Teamgröße × Operator.
- Profile von Gebäuden und Operatoren, Listing-Seiten mit Galerie, «shared in building»-Fakten und Related Options.
- Editorial-Layer: Case Studies, District Guides, How-it-works, FAQ und longform SEO-Ressourcen.
- Kontaktformular mit zuverlässigen Zustell-Safeguards und mehrstufigem Spam-Schutz.
- Vollständig responsive von 320px-Phones bis 4K-Monitoren.
Admin-CMS
- Geschlossenes Backoffice mit serverseitiger Authentifizierung und optionalem 2FA.
- CRUD für Listings und Gebäude inkl. Bilder-Upload.
- KI-Redaktionsassistent im Admin (Claude API) für Copy-Unterstützung.
- Für ein kleines In-house-Team gebaut, mit einfachem Zugriffsmanagement und optionalem 2FA. So angelegt, dass rollenbasierte Zugriffe später erweitert werden können, wenn das Team wächst.
Production-Handover
- Audit-freundliches Review von Security-Headers, SEO-Metadaten, Accessibility, Error- und Loading-States.
- Dokumentierte Production-Cutover-Checkliste.
- Health-Probe-Endpoint fürs Uptime-Monitoring.
- Handover mit erweitertem README, Env-Doku und Cutover-Skripten.
Architekturentscheidungen
Multi-Market-Architektur ab Tag eins
Aktiv ist heute nur Hongkong, aber die Architektur ist auf weitere Märkte und Marken vorbereitet. Markt-Content, Brand-Tokens und SEO-Metadaten sind vom Komponenten-Layer getrennt, sodass neue Standorte ergänzt werden können, ohne die UI von Grund auf neu zu bauen.
Domain-driven Structure
Harte Schichtentrennung ohne aufsteigende Abhängigkeiten: domains/ (Typen und Verträge) → server/ (Business-Logik und DB-Adapter) → components/ (UI) → app/ (nur Route-Komposition). Routes wissen nichts von Supabase-Tabellen — alles läuft über eine Provider-Boundary. Diese Provider-Boundary hält die UI unabhängig vom Datenbank-Layer, sodass künftige Backend-Wechsel das Public-Interface nicht neu schreiben müssten.
Server-first React
App Router mit Server Components, wo immer möglich. Von etwa 400 Komponenten sind nur 83 Client-Komponenten — jede begründet durch State oder Event-Handler. Das hält das JS-Bundle klein und verbessert Time-to-Interactive.
Defence-in-depth für öffentliche Formulare
Ohne externe Abhängigkeit zu reCAPTCHA oder Turnstile: Honeypot-Feld, Form-Age-Check (sofort-Replays werden abgewiesen), Per-IP-Rate-Limit, serverseitige Zod-Validierung. Spam bleibt draußen, ohne den Nutzer zu belasten.
Vollständig tokenisiertes Design-System
Nach Design-Freigabe folgte ein neunstufiger CSS-Refactor: jeder Farb-, Font-Größen-, Radius-, Shadow-, Spacing- und Motion-Wert wurde zum semantischen Token. Globale Änderungen — Akzentfarbe, Spacing-Skala — sind ein einziger Edit in globals.css.
Fluides Editorial-Layout
Statt auf feste Breakpoint-Sprünge zu setzen, nutzt das Layout fluides Spacing und Content-Caps, sodass Seiten von Mobile-Screens bis zu Ultra-Wide-Displays gleichmäßig skalieren.
Production-Readiness
Vor dem Handover haben wir ein durchgehendes, audit-freundliches Review über Security, SEO, Accessibility und Operations gefahren.
- Security-Header: X-Frame-Options, Content-Type-Options, Referrer-Policy, vollständige Permissions-Policy, Cross-Origin-Opener-Policy.
- SEO-fähige Architektur: dynamische Sitemap über Country / District / Building / Listing / Operator, robots.txt mit Staging-Guard, JSON-LD-Structured-Data, Metadaten auf jeder Public Page, Ranking-Preservation-Plan für die Migration.
- Accessibility: aria-labels, Skip-Link, prefers-reduced-motion, dekorative Images als aria-hidden, semantische Landmarks.
- Performance: Server-first, Loading-Skeletons auf den schwersten Routes, opt-in Bundle Analyser, next/image überall mit korrekten sizes.
- Operations: /api/health fürs Uptime-Monitoring, dokumentierter Production-Cutover, erweitertes README mit Handover-Runbook.
Production-Build: 71 statisch generierte Seiten, 0 TypeScript-Errors und ein sauberer strict Type-Check beim Handover.
Zahlen
Technology Stack
| Frontend | Next.js App Router, React, TypeScript strict, CSS Modules |
|---|---|
| Backend | Supabase (PostgreSQL), Nodemailer (SMTP), Zod, Anthropic API (Admin-Assistant) |
| Infra | Vercel-kompatibel, Edge Runtime, sharp für Image Processing |
| Quality | ESLint, Prettier, Vitest, Playwright e2e, lint-staged, husky |
| Design | Vollständig kustomisiertes DS, ~150 semantische Tokens |
Eine Katalog-Plattform mit echter Ownership bauen
Wenn deine aktuelle Seite nur eine Liste von Pages, Listings oder Properties ist — und dein Team einen skalierbaren Katalog, ein Admin-CMS, eine SEO-Architektur und einen produktionsreifen Handover braucht — helfen wir dabei, daraus eine Plattform zu machen, die dein Geschäft tatsächlich tragen kann.
Produktgalerie
