Kunde
My Office Asia — Brokerage für Flex-Workspaces in Hongkong, arbeitet mit Operatoren auf WeWork-/Regus-/IWG-/JustCo-Niveau sowie unabhängigen Boutique-Anbietern.
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 — persönlicher Advisor, Antwort innerhalb von zwei Stunden, für den Mieter kostenlos.
- 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 ohne Rewrite ergänzt werden können.
- Als echtes Produktionsprojekt übergeben — keine TODOs, keine Hardcodes, vollständige Handover-Doku.
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 garantierter Zustellung 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 — kein Account-Wildwuchs, ein geteilter Credential mit TOTP.
Production-Handover
- Vollständiger Audit 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
White-label-ready ab Tag eins
Aktiv ist nur ein Markt (HK), aber die Architektur trägt mehrere Märkte und Marken. Content-Daten, Brand-Tokens und SEO-Metadaten sind vom Komponenten-Layer isoliert — Singapur oder Taipeh später hinzuzunehmen, erzwingt keinen UI-Rewrite. Damit ist das Fundament für regionales Wachstum gelegt.
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. Eine Migration von Supabase auf direktes Postgres oder PlanetScale wäre ohne UI-Eingriff möglich.
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: jede Farb-, Font-Größen-, Radius-, Shadow-, Spacing- und Motion-Werte wurde zum semantischen Token. Ergebnis: null hardcodierte font-size-Werte über 144 CSS-Module. Globale Änderungen — Akzentfarbe, Spacing-Skala — sind ein einziger Edit in globals.css.
Atlas-edge Fluid Layout
Statt fester Breakpoints für horizontale Paddings nutzen wir ein einziges clamp(24px, 5.55vw, 80px). Inhalte skalieren weich von Mobile zu Desktop und werden auf Ultra-Wide-Screens in den editorialen 1600px-Bereich gecappt (Apple / Stripe / Linear), ohne auf 4K auseinanderzulaufen.
Production-Readiness
Vor dem Handover haben wir einen durchgehenden Audit gefahren.
- Security-Header: X-Frame-Options, Content-Type-Options, Referrer-Policy, vollständige Permissions-Policy, Cross-Origin-Opener-Policy.
- SEO: dynamische Sitemap über Country / District / Building / Listing / Operator, robots.txt mit Staging-Guard, JSON-LD-Structured-Data, Metadaten auf jeder Public Page.
- Accessibility: aria-labels, Skip-Link, prefers-reduced-motion, 143 dekorative Images als aria-hidden, semantische Landmarks.
- Performance: Server-first, Loading-Skeletons auf den vier 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: ~5 Sekunden Compile, 71 statisch generierte Seiten, 0 TypeScript-Errors, 0 console.log in Production.
Zahlen
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-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 Plattform wie My Office Asia bauen
Wenn du auf einer Listing-Seite sitzt, die nicht konvertiert, oder eine regionale Plattform mit echtem Admin und einem belastbaren Design-System brauchst — wir bauen sie genauso.
Produktgalerie
