Lumière Estate
Dunkles Luxusdesign · Interaktive Karte + Filter

Lumière Estate

Next.jsTypeScriptTailwindLeafletTanStack QueryFramer Motion

Hinweis: Lumière Estate ist ein Portfolio-Projekt, kein Kundenauftrag. Es wurde gebaut, um eine bestimmte technische Fragestellung zu lösen: Wie baut man eine Immobilienplattform, die sich hochwertig und redaktionell anfühlt, statt wie eine von tausend generischen Immobilienbörsen?

Die Herausforderung

Die meisten Immobilienplattformen lösen Filterung und Darstellung getrennt: eine Kartenansicht hier, eine Listenansicht dort, oft mit spürbarer Verzögerung beim Wechsel zwischen beiden. Bei einer Luxusimmobilien-Plattform ist das ein Problem — die Zielgruppe erwartet ein reibungsloses, hochwertiges Erlebnis, keine Ladebalken.

Der technische Ansatz

Interaktive Karte mit Leaflet. Statt einer generischen Google-Maps-Einbindung wurde Leaflet gewählt — mehr Kontrolle über Styling, Marker-Cluster und Performance bei vielen gleichzeitig angezeigten Objekten.

TanStack Query für Datenmanagement. Filterwechsel (Preisspanne, Lage, Objekttyp) lösen keine vollständigen Neuladungen aus. Stattdessen werden Ergebnisse gecacht und im Hintergrund aktualisiert — das Gefühl ist sofortige Reaktion statt Wartezeit.

Framer Motion für redaktionelle Übergänge. Seitenübergänge und Objektpräsentationen nutzen gezielte Animation, um das "Editorial"-Gefühl zu erzeugen, das man von Hochglanzmagazinen kennt — aber sparsam genug, um nicht von den eigentlichen Inhalten abzulenken.

Buchungs-Widget als eigenständige Komponente. Terminanfragen für Besichtigungen sind als isolierte, wiederverwendbare Komponente gebaut — unabhängig von der restlichen Seite testbar und austauschbar.

Was das Projekt zeigt

Dass komplexe, interaktive Filterlogik nicht zwangsläufig auf Kosten der Performance oder des Designs gehen muss, wenn Datenmanagement und Animation von Anfang an mitgedacht werden — nicht nachträglich aufgesetzt.

Warum das zählt

Jede technische Entscheidung oben zahlt auf eine Zahl ein, die eine echte Agentur interessieren würde:

Sofortige Filterung, kein Ladebalken zwischen Karte und Liste schützt direkt das Lead-Volumen. Bei Immobilien ist ein langsamer Filter ein Lead, der zur nächsten Anbieterseite wechselt, während die Seite noch lädt — dafür braucht es keinen A/B-Test.

Redaktionelle Präsentation statt generischem Listing-Raster ist ein Vertrauenssignal, das schon vor dem ersten Anruf ankommt. Im Luxussegment muss die Website selbst den Preis rechtfertigen — eine Seite, die sich nach Vorlage anfühlt, untergräbt den Pitch, bevor ein Wort gewechselt wurde.

Das als eigenständige Komponente gebaute Buchungs-Widget bedeutet, dass es sich später gegen ein echtes CRM oder Terminsystem austauschen lässt, ohne die Seite drumherum neu zu bauen — geringere Integrationskosten, wäre das an den Betrieb einer echten Agentur angeschlossen.

Das ist ein Portfolio-Projekt, es gibt also keine echten Lead-Conversion-Daten hinter diesen Aussagen. Aber das sind genau die messbaren Kennzahlen, die ich ab Tag eins bei einer echten Version davon erfassen würde: Zeit bis zum ersten Filterergebnis, Abschlussquote bei Buchungsanfragen und Absprungrate auf den Objektseiten.


Live-Demo ansehen · Code auf GitHub

Brauchst du eine Plattform mit ähnlicher Komplexität? Lass uns sprechen.