MLZ-Advanced
Eine End-to-End-Plattform für Grundstücks- und Immobilienverkäufe: öffentliche Lead-Erfassung, eine kartenbasierte Customer Journey und eine große interne Konsole für Inventar, Vertrieb, Zahlungen und Genehmigungen.
Next.js 16
React 19
TypeScript
Prisma + MongoDB
Mapbox GL
SCSS
Recharts
Übersicht
MLZ-Advanced ist die operative Plattform hinter einem Immobilienvertrieb. Eine Seite richtet sich an die Öffentlichkeit und Kunden: Landingpages, ein kartenbasierter Browser für Projekte und Grundstücke sowie ein Kaufinteressenten-Flow mit Telefonverifizierung. Die andere Seite ist eine umfangreiche interne Konsole, in der das Personal den gesamten Vertrieb steuert, einschließlich Inventar, Kunden, Kaufanfragen, Zahlungen, Genehmigungen, Berichten und Kommunikation. Es ist eine langlebige, groß angelegte Anwendung, die als Progressive Web App ausgeliefert wird und zweisprachig auf Arabisch und Englisch läuft.
Das Problem
Der Verkauf von Grundstücken und Parzellen bringt eine Vielzahl an Zuständen mit sich, die schwer zu überblicken sind. Jede Parzelle umfasst Preise, Abmessungen, Ausrichtung, Eigentumsverhältnisse, Erschließung und einen Status, der sich auf dem Weg zum Verkauf kontinuierlich ändert. Kunden durchlaufen Phasen vom Lead über die Opportunity bis zum Käufer, Zahlungen erfolgen in unterschiedlichen Strukturen und erfordern Freigaben, und zahlreiche Vorgänge müssen genehmigt werden – darunter Wiederverkäufe, Stornierungen und Berechtigungsänderungen. All dies über Tabellenkalkulationen und isolierte Tools abzuwickeln, ist nicht skalierbar. Das Unternehmen benötigte ein zentrales System, das sowohl den öffentlichen Ablauf als auch die internen Prozesse abbildet – inklusive des Prüfpfads und der Genehmigungsprozesse, auf die ein Immobilienbetrieb angewiesen ist.
Meine Rolle & Vorgehensweise
Dies ist ein großes Teamprojekt, das über einen langen Zeitraum gewachsen ist und an dem ich als Frontend-Entwickler mitgewirkt habe. Die Codebasis ist so strukturiert, dass grundverschiedene Zielgruppen – die Öffentlichkeit, Kunden und interne Mitarbeiter – ein gemeinsames Deployment nutzen, während sie durch Route Groups und Berechtigungen sauber voneinander getrennt bleiben. Ein Großteil meiner Frontend-Arbeit konzentrierte sich auf die interaktionsintensiven Oberflächen: Karten, Massenbearbeitungstools, Diagramme und die detailreichen Ansichten, in denen die Mitarbeiter ihre tägliche Arbeit erledigen – umgesetzt als Client-Komponenten auf Basis servergerenderter, zugriffsgesteuerter Daten.
Tech-Stack
Wichtigste Features
Galerie
Herausforderungen & Lösungen
Die Plattform bedient drei Zielgruppen aus einer einzigen Anwendung heraus, was konzeptionell anspruchsvoll ist. Die Architektur nutzt Next.js Route Groups, um die öffentliche Website, die Customer Journey und das interne Dashboard nach Funktion und Berechtigung sauber zu trennen, während sie sich ein gemeinsames Deployment teilen. Das Dashboard-Layout lädt den aktuellen Benutzer, ermittelt die Module seiner Abteilung und filtert die Navigation entsprechend.
Die Performance unter realem Datenvolumen war eine weitere ständige Anforderung. Immobilienbestände bedeuten umfangreiche Listen, komplexe Karten und datenintensive Detailseiten. Daher verbleiben Datenabruf und Autorisierung auf dem Server, während Client-Komponenten für die wirklich interaktiven Bereiche reserviert sind: Karten, tabellarische Massenbearbeitungstools, Diagramme und Modalfenster. Virtualisierte Listen halten umfangreiche Tabellen reaktionsschnell, und Kartendaten durchlaufen eine GeoJSON-Konvertierung, sodass Parzellen als echte räumliche Objekte statt als statische Bilder gerendert werden.
Ergebnis
MLZ-Advanced ist ein ganzheitliches System, das ein Immobilienunternehmen vom ersten Webseitenbesucher bis zum abgeschlossenen, genehmigten und bezahlten Verkauf begleitet – mit dem Detaillierungsgrad in der Bestandsverwaltung, der CRM-Tiefe und den Prüfpfaden, die ein solcher Betrieb erfordert. Die Beständigkeit und der Umfang – eine mehrjährige, hochaktive Codebasis – stehen für eine Plattform, die ein Unternehmen verlässlich steuert, statt nur ein Prototyp zu sein.
Haben Sie eine ähnliche Produktherausforderung?
Teilen Sie mir den aktuellen Stand des Produkts, das gewünschte Ergebnis und bereits bestehende Rahmenbedingungen mit. Daraus leite ich einen sinnvollen ersten Meilenstein ab.
Full Stack Developer engagieren