VCM
Eine rollenbasierte Web-App, die alles, was eine Wohnanlage benötigt, in einer einzigen Oberfläche vereint: Eigentümer, Bewohner, Finanzen, Buchungen, Anfragen und Berichte.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
Übersicht
VCM ist das Frontend für eine Plattform für Immobilien- und Community-Management, die zwei grundlegend verschiedene Zielgruppen aus derselben Codebasis bedient. Administratoren steuern damit den operativen Betrieb: Liegenschaften, Bewohner, Finanzen, Vorfälle, Reporting und Kommunikation. Eigentümer und Bewohner wickeln damit ihre eigenen Angelegenheiten ab, darunter Zahlungen, Serviceanfragen, Raum- und Ressourcenbuchungen, Dokumente und Community-Informationen. Das Produkt führt eine Vielzahl verstreuter, manueller Arbeitsabläufe an einem konsistenten Ort zusammen.
Das Problem
Die Verwaltung einer Wohnanlage erfordert das gleichzeitige Managen vieler Faktoren: Eigentümer- und Bewohnerakten, Wartungs- und Serviceanfragen, Buchungen von Gemeinschaftseinrichtungen, Beschwerden, Zahlungsverläufe, Abrechnungen, Inspektions- und Vorfallberichte sowie Ankündigungen. Wenn diese über Tabellenkalkulationen, E-Mail-Verläufe und isolierte Tools verteilt sind, gehen Dinge unter. Die Herausforderung bestand darin, eine einheitliche Oberfläche zu schaffen, die sowohl das operative Team als auch die betreuten Bewohner bedient – zwei grundlegend verschiedene Nutzererfahrungen –, während das Produkt auch bei neuen Workflows performant, konsistent und wartungsfreundlich bleibt.
Meine Rolle & Vorgehensweise
Ich leitete die Frontend-Entwicklung: Anwendungsarchitektur, gemeinsame Datenschicht, wiederverwendbare UI-Muster und die rollenbasierte Struktur, die alles zusammenhält. Als Hauptmitwirkender an der Codebasis definierte ich die Konventionen für die weitere Umsetzung. Meine Priorität war es, das typische Problem solcher Anwendungen zu vermeiden: das ständige Neuerstellen derselben Tabellen-, Filter- und Formularlogik für jede neue Entität. Stattdessen entwickelte ich ein kompaktes Set robuster Basiselemente und eine berechtigungsgesteuerte Shell, sodass neue Workflows durch einfaches Zusammensetzen statt Neuerfinden hinzugefügt werden konnten.
Tech-Stack
Wichtigste Features
Galerie
Herausforderungen & Lösungen
Die zentrale Herausforderung lag im großen Funktionsumfang: Dutzende Entitätstypen, die jeweils Listen-, Filter-, Erstellungs-, Bearbeitungs- und Exportfunktionen über zwei Benutzerrollen hinweg erforderten. Eine separate Entwicklung für jedes Feature hätte zu einer nicht wartbaren Anwendung geführt. Ich löste dies durch wiederverwendbare Grundelemente und ein konfigurierbares, berechtigungsgesteuertes Navigationsmodell. So passt sich die Benutzeroberfläche flexibel an die Backend-Rechte an, ohne dass Menüs fest einprogrammiert oder Logiken dupliziert werden müssen.
Eine weitere zentrale Anforderung war ein Anwendungszustand, der dem praktischen Einsatz standhält. Ich habe Listenpaginierung und -filterung über den Query-String der URL gesteuert. Dadurch lassen sich Ansichten direkt teilen, Vor- und Zurück-Aktionen des Browsers funktionieren intuitiv und der Tabellenzustand bleibt auch beim Neuladen erhalten. Die Authentifizierung habe ich in den gemeinsamen Zustand und die Anforderungsschicht ausgelagert, um Feature-Komponenten schlank zu halten. Eine Error Boundary, Ladezustände und ein sauberer Redirect bei Sitzungsablauf stellen sicher, dass ein komplexes Dashboard niemals unbemerkt abbricht.
Ergebnis
VCM ist ein einheitliches Frontend, das beide Seiten des Community-Managements nahtlos bedient: Operative Teams steuern den gesamten Immobilienzyklus über einen zentralen Admin-Arbeitsbereich, während Bewohner Zahlungen, Anfragen, Buchungen und Dokumente im Self-Service abwickeln. Dank der modularen Basiselemente und der berechtigungsgesteuerten Shell skaliert die Codebasis mit jedem neuen Workflow, ohne unnötig aufgebläht zu werden.
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.
SaaS-Entwicklungsdienstleistungen