Kunde
My Office Asia — Beratung für flexible Büroflächen in Hongkong, die mit großen Betreibern und unabhängigen Boutique-Anbietern arbeitet.
Branche
PropTech · Gewerbeimmobilien · Beratung
Scope
Analyse → Design-System → Entwicklung → Produktionsvorbereitung → Übergabe an den Kunden.
Die Aufgabe
Die bestehende Website wirkte wie ein reiner Objektkatalog und vermittelte die eigentliche Leistung nur unzureichend: persönliche Beratung, schnelle Rückmeldung und keine direkte Beratungsgebühr für Mieter.
- Einstiegsseite und Katalognavigation auf das Beratungsversprechen ausrichten, nicht auf die bloße Menge an Objekten.
- Dem Kunden einen eigenen Verwaltungsbereich geben, in dem er den Katalog selbst pflegen kann.
- Die Website technisch und inhaltlich für relevante Suchanfragen rund um flexible Büros in Hongkong vorbereiten.
- Codebasis so aufstellen, dass Singapur, Taipeh oder Seoul später mit geringerem Umbau-Risiko ergänzt werden können.
- Das Projekt mit dokumentierter Übergabe, konfigurierbaren Inhalten und möglichst wenig fest im Code verankerter Geschäftslogik produktionsbereit übergeben.
Was wir gemacht haben
Öffentliche Website
- Einstiegsseite mit Fokus auf das Beratungsversprechen statt auf die Zahl der Objekte.
- Katalog mit Suche und Filtern nach Bezirk, Büroart, Teamgröße und Betreiber.
- Gebäude- und Betreiberprofile sowie Objektseiten mit Galerie, Ausstattung im Gebäude und passenden Alternativen.
- Redaktioneller Bereich mit Fallstudien, Bezirksführern, Ablaufbeschreibung, FAQ und ausführlichen SEO-Inhalten.
- Kontaktformular mit abgesicherter Zustellung und mehrstufigem Spam-Schutz.
- Responsive Darstellung vom Smartphone bis zu großen Desktop-Bildschirmen.
Internes Redaktionssystem
- Geschützter Verwaltungsbereich mit serverseitiger Anmeldung und optionaler Zwei-Faktor-Authentifizierung.
- Anlegen, Bearbeiten und Löschen von Objekten und Gebäuden einschließlich Bild-Upload.
- KI-gestützte Formulierungshilfe für redaktionelle Inhalte über die Claude API.
- Für ein kleines internes Team mit einfacher Rechteverwaltung gebaut; das Zugriffsmodell kann bei wachsendem Team um weitere Rollen erweitert werden.
Produktionsvorbereitung und Übergabe
- Nachvollziehbare Prüfung von Sicherheits-Headern, SEO-Metadaten, Barrierefreiheit sowie Fehler- und Ladezuständen.
- Dokumentierte Checkliste für die Produktionsumschaltung.
- Technischer Prüf-Endpunkt für das Verfügbarkeitsmonitoring.
- Übergabe mit ausführlicher README, Umgebungsdokumentation und Skripten für die Umschaltung.
Architekturentscheidungen
Für weitere Märkte vorbereitet
Aktiv ist heute nur Hongkong. Marktinhalte, Markenvariablen und SEO-Metadaten sind jedoch von den Oberflächenkomponenten getrennt. Weitere Standorte können dadurch auf derselben technischen Grundlage ergänzt werden, ohne die Benutzeroberfläche von Grund auf neu zu bauen.
Klare fachliche Schichten
Die Codebasis trennt fachliche Typen und Verträge, serverseitige Geschäftslogik und Datenbankadapter, Oberflächenkomponenten und Routenkomposition. Routen greifen nicht direkt auf Supabase-Tabellen zu, sondern auf eine definierte Datenschnittstelle. So bleibt die Oberfläche von der konkreten Datenbankanbindung entkoppelt.
Serverseitige Auslieferung als Standard
Der App Router nutzt Server Components überall dort, wo keine Interaktion im Browser erforderlich ist. Von rund 400 Komponenten benötigen 83 clientseitigen Zustand oder Ereignisbehandlung. Dadurch bleibt der an den Browser ausgelieferte JavaScript-Anteil begrenzt.
Mehrstufiger Schutz öffentlicher Formulare
Ein unsichtbares Kontrollfeld, eine Plausibilitätsprüfung der Ausfüllzeit, eine Begrenzung pro IP-Adresse und serverseitige Zod-Validierung reduzieren automatisierten Missbrauch ohne zusätzliche CAPTCHA-Hürde für reguläre Nutzer.
Vollständig tokenisiertes Design-System
Nach der Designfreigabe wurden Farben, Schriftgrößen, Radien, Schatten, Abstände und Bewegungswerte in einem neunstufigen CSS-Umbau als semantische Variablen vereinheitlicht. Globale Änderungen wie Akzentfarbe oder Abstandsskala lassen sich dadurch zentral vornehmen.
Fließendes redaktionelles Layout
Fließende Abstände und begrenzte Inhaltsbreiten ergänzen feste Breakpoints. Dadurch skaliert das Layout gleichmäßig von kleinen Mobilgeräten bis zu sehr breiten Bildschirmen.
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
