Nouradin
Bereite mein Portfolio vor...
Nouradin
Bereite mein Portfolio vor...
Entwicklung eines Turborepo-Monorepos mit 2 Next.js 16-Anwendungen (öffentliches Portal und Admin-Panel) und 13 gemeinsamen Paketen. Bietet ein 100% dynamisches CMS auf PostgreSQL; Echtzeitsynchronisierung via Supabase Realtime (~250–1000ms); interaktive MapLibre GL-Kartensuche mit Supercluster; native dreisprachige Unterstützung (Englisch, Arabisch RTL mit Cairo-Schriftart, Türkisch); Offline-Fallback-Modus mit realistischen Demodaten; und Enterprise Security Center mit pgcrypto bcrypt und Kontosperrung.
Moderne Immobilienportale stehen vor großen Herausforderungen: starre Layouts, die für jede Änderung Entwicklerunterstützung erfordern; Verzögerungen bei der Datenübertragung zwischen Maklerangeboten und öffentlicher Suche; getrennte Portale für Nutzer und Administration; unzureichende Unterstützung für RTL und arabische Typografie; und mangelnde Sicherheit ohne Brute-Force-Schutz und Audit-Protokolle.
Entwicklung eines Turborepo-Monorepos mit 2 Next.js 16-Anwendungen (öffentliches Portal und Admin-Panel) und 13 gemeinsamen Paketen. Bietet ein 100% dynamisches CMS auf PostgreSQL; Echtzeitsynchronisierung via Supabase Realtime (~250–1000ms); interaktive MapLibre GL-Kartensuche mit Supercluster; native dreisprachige Unterstützung (Englisch, Arabisch RTL mit Cairo-Schriftart, Türkisch); Offline-Fallback-Modus mit realistischen Demodaten; und Enterprise Security Center mit pgcrypto bcrypt und Kontosperrung.
Bereitstellung eines produktionsreifen Immobilien-Ökosystems mit Inhaltsaktualisierungen in unter einer Sekunde (~250–1000ms), 100%iger RTL-Stabilität, flüssigem 60fps-Vektorkarten-Clustering, unterbrechungsfreiem Betrieb dank Offline-Fallback und robuster Administrationssicherheit.
Duale Anwendungsarchitektur: Leistungsstarkes öffentliches Portal (apps/website) und umfassendes Admin-Center (apps/admin) in einem Turborepo-Monorepo
13 geteilte interne Pakete: Modulare Trennung für @workspace/ui, Karten, Branding, i18n, lib, Datenbank, Typen und Hilfsprogramme
100% dynamische CMS-Engine: Keine fest codierten Texte; visueller Drag-and-Drop-Homepage-Builder (@dnd-kit) mit sofortiger Sichtbarkeitssteuerung
Echtzeitsynchronisierung im Subsekundenbereich: Supabase Realtime-Listener mit intelligenter 250ms-Aktualisierung für Besucherseiten
Interaktiver Karten-Explorer (/explore): Vollbild-MapLibre GL-Engine mit Supercluster-Gruppierung und synchronisierter Immobilienliste
Dreisprachige und RTL-Parität: Nahtloser Wechsel zwischen Englisch, Arabisch (RTL mit Cairo-Schriftart) und Türkisch mit Base UI-Spiegelung
Finanzierungs- und Nebenkostenrechner: Interaktiver Hypotheken-Tilgungsrechner mit Schiebereglern und Aufschlüsselung aller Erwerbskosten
Enterprise Security Center: Zentrale Sicherheitsparameter, pgcrypto bcrypt-Passwortprüfungen und automatische Kontosperre bei Fehlversuchen
Umfassende CRM-Interessentenverwaltung: Mehrstufige Lead-Pipeline mit Zuweisung, internen Notizen und lückenloser Kontakthistorie
Hierarchischer digitaler Medienmanager: Ordnerbasierte Verwaltung mit MIME-Prüfung, Größenlimits (10MB/50MB) und SHA-256-Deduplizierung
Robuste Offline-Fallback-Ebene: Über 260 Zeilen Demodaten für vollständige Seitennavigation und Tests auch ohne aktive Datenbankverbindung
Aufgebaut als Turborepo-Monorepo mit Next.js 16.2.6 und React 19.2.4, gestaltet mit Tailwind CSS v4 und Base UI / Shadcn. Die Datenschicht basiert auf Supabase (PostgreSQL 15+) mit 25 sequenziellen SQL-Migrationen, Row-Level Security (RLS) und sicheren RPC-Funktionen.
Entwurf einer zirkelfreien 13-Paket-Turborepo-Architektur mit sauberen Schnittstellen zwischen Next.js 16-Apps
Umsetzung der Supabase Realtime-Synchronisierung mit 250ms Debouncing zur Vermeidung unnötiger Re-Renderings
Integration von MapLibre GL mit dem mapbox-gl-rtl-text-Plugin zur korrekten Darstellung arabischer Orts- und Straßennamen
Entwicklung eines sicheren Passwort- und Sperrsystems direkt in PostgreSQL mittels pgcrypto bcrypt und SECURITY DEFINER-Funktionen
Aufbau einer zuverlässigen Offline-Fallback-Architektur, die alle dynamischen Abfragen ohne Datenbankverbindung nahtlos bereitstellt
Enterprise Monorepo Topologien: Multi-App-Builds mit Turborepo, modulare Pakete und einheitliche Tailwind v4 Design-Tokens
Fortgeschrittene PostgreSQL- und RLS-Modellierung: Audit-Trails, Passwortablauf-Trigger und rollenbasierte Zugriffskontrolle
Räumliche Webanwendungen: MapLibre GL-Integration, Supercluster-Optimierung und Koordinatenauswahl mit Reverse-Geocoding
Echtzeit-Statussynchronisierung: Zusammenführung von serverseitigen Next.js-Seiten mit clientseitigen Supabase Realtime-WebSockets
Tiefgehende Internationalisierung und RTL: Dynamischer Schriftartwechsel, Layout-Spiegelung und mehrsprachige Taxonomien
Schaffung einer modernen digitalen Immobilienplattform, die intuitive Immobiliensuche mit sicherer, codefreier Administration vereint.
The codebase is organized into 2 standalone Next.js 16 applications and 13 internal shared workspace packages managed via Turborepo:
apps/website: Public Real Estate Portal (Port 3000) featuring listings directory, interactive map explorer, financing calculator, and dynamic homepage
apps/admin: Back-Office Management Portal (Port 3001) with role-based access control, listing editor, CRM pipeline, and Enterprise Security Center
13 Domain Packages: @workspace/ui (Base UI + Tailwind v4), @workspace/maps (MapLibre GL), @workspace/branding (Dynamic theming), @workspace/i18n (Trilingual RTL), @workspace/lib (Queries & Auth), @workspace/database (Supabase schema), @workspace/types, @workspace/constants, @workspace/config, @workspace/utils, @workspace/hooks, @workspace/eslint-config, @workspace/typescript-config
The backend is structured through 25 sequential, idempotent SQL migrations delivering comprehensive data integrity and Row-Level Security (RLS):
Core Schema & Taxonomy: Languages, user roles (owner, admin, editor), categories, locations, amenities, properties, and full-text tsvector search
Dynamic CMS & Versioned Settings: Translations table, site sections, JSONB branding/theme/SEO settings, navigation menus, and testimonials
Row-Level Security (RLS): Public read access for published/visible listings; staff-only write access; Supabase Realtime publications
Storage Buckets & Media Deduplication: Buckets for site assets, property images, and documents with transactional deduplication procedures
Audit Logging & Soft Deletion: Complete audit trails logging user IDs, IP addresses, User-Agents, and JSON diffs, with soft-delete trash recovery
A multi-layered security architecture protects administrative operations, staff credentials, and user data:
Cryptographic Password Reuse Checks: Zero-plaintext password history using pgcrypto crypt() with Blowfish salts inside PostgreSQL
Brute-Force Account Lockout Engine: Automatic lockout after configurable failed attempts with owner-only unlock privileges
Session Revocation & Versioning: Immediate multi-device session invalidation upon password reset by incrementing profile session_version
Role-Based Server Action Guards: Strict authorization gates (requireStaff, requireAdmin, requireOwner) enforcing principle of least privilege
Native multilingual infrastructure supporting English, Arabic (RTL), and Turkish with zero layout anomalies:
Dynamic Locale Routing: Handled via next-intl with URL prefixes (/en, /ar, /tr) and automatic RTL direction switching
Arabic Typography: Automatic subset loading of Google's Cairo font for crisp Arabic readability and balanced vertical metrics
Component Mirroring: Base UI DirectionProvider dynamically mirrors navigation drawers, modal controls, and card layouts
RTL Vector Map Rendering: MapLibre integration with @mapbox/mapbox-gl-rtl-text plugin ensuring proper Arabic script shaping and joining on map labels
Real-time communication and offline resilience guarantee seamless operation under all network conditions:
Supabase Realtime Broadcast: Public portal subscribes to PostgreSQL change events, updating visitor screens in ~250–1000ms without page reloads
Debounced Router Invalidation: Background RealtimeRefresher triggers router.refresh() with 250ms debouncing to prevent re-render cascades
Resilient Offline Fallback Mode: Over 260 lines of realistic mock data allowing complete site navigation, testing, and staging without active database credentials