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.
Live-Demo ansehen · Code auf GitHub
Brauchst du eine Plattform mit ähnlicher Komplexität? Lass uns sprechen.