Nouradin
Preparing my portfolio...
Nouradin
Preparing my portfolio...
Architected an enterprise Turborepo monorepo encompassing two Next.js 16 applications (public portal on port 3000 and admin panel on port 3001) powered by 13 domain-driven internal packages. Features zero-hardcoded dynamic content where every page section, listing, amenity, and dictionary label is stored in PostgreSQL and editable in real time; sub-second live synchronization via Supabase Realtime broadcast channels; interactive MapLibre GL spatial map exploration with Supercluster clustering; native trilingual (English, Arabic RTL with Cairo font, Turkish) layout parity; an offline fallback layer with realistic demo data; and an Enterprise Security Center with password aging, pgcrypto bcrypt reuse checks, and account lockout engines.
Modern real estate portals face critical architectural challenges: rigid hardcoded layouts requiring developer intervention for every property or banner update; slow data propagation causing discrepancies between agent listings and public searches; fragmented monorepo structures separating customer portals from back-office management; poor multilingual and right-to-left (RTL) Arabic typography support; and weak administrative security lacking brute-force protection and forensic audit logs.
Architected an enterprise Turborepo monorepo encompassing two Next.js 16 applications (public portal on port 3000 and admin panel on port 3001) powered by 13 domain-driven internal packages. Features zero-hardcoded dynamic content where every page section, listing, amenity, and dictionary label is stored in PostgreSQL and editable in real time; sub-second live synchronization via Supabase Realtime broadcast channels; interactive MapLibre GL spatial map exploration with Supercluster clustering; native trilingual (English, Arabic RTL with Cairo font, Turkish) layout parity; an offline fallback layer with realistic demo data; and an Enterprise Security Center with password aging, pgcrypto bcrypt reuse checks, and account lockout engines.
Delivered a production-ready real estate ecosystem achieving sub-second content updates across client sessions (~250–1000ms), 100% trilingual RTL layout stability without text clipping, fluid 60fps vector map clustering, zero crashes via offline fallback mode, and military-grade administrative security with automated audit tracking.
Dual-Application Architecture: High-performance public portal (apps/website) and comprehensive back-office command center (apps/admin) in a unified Turborepo monorepo
13 Shared Domain Packages: Clean separation of concerns for @workspace/ui, maps, branding, i18n, lib, database, types, constants, config, hooks, and utils
100% Dynamic CMS Engine: Zero hardcoded text or assets; visual drag-and-drop homepage section builder with @dnd-kit and instant visibility toggles
Sub-Second Realtime Synchronization: Supabase Realtime Postgres change listeners with a 250ms debounced auto-refresher keeping public visitor screens live
Interactive Spatial Map Explorer (/explore): Fullscreen MapLibre GL engine with Supercluster clustering, custom price-pill markers, and synchronized split-screen listings
True Trilingual & Bi-Directional (RTL) Parity: Seamless routing across English, Arabic (RTL with Google Cairo font), and Turkish with Base UI DirectionProvider mirroring
Financial Calculators & Purchase Costs: Interactive mortgage amortization calculator with interest/term sliders and detailed acquisition expense breakdowns
Enterprise Security Center: Singleton security parameters, pgcrypto bcrypt password reuse prevention, brute-force account lockouts, and session version invalidation
Comprehensive CRM Inquiries Pipeline: Multi-stage lead management (new → viewed → contacted → follow_up → negotiating → completed) with assignment and notes
Hierarchical Digital Asset Manager: Multi-folder media manager with MIME validation, 10MB/50MB size guardrails, and SHA-256 byte deduplication
Resilient Offline Fallback Layer: Over 260 lines of realistic mock data allowing complete site navigation, testing, and staging without active database credentials
Constructed as an enterprise Turborepo monorepo containing Next.js 16.2.6 (App Router + Turbopack) and React 19.2.4 applications styled with Tailwind CSS v4 and Base UI / Shadcn. The data layer is powered by Supabase (PostgreSQL 15+) across 25 sequential SQL migrations, strict Row-Level Security (RLS) policies, and SECURITY DEFINER RPC functions. Map rendering utilizes MapLibre GL with MapTiler vectors, client state is synchronized across tabs via custom events and localStorage, and security is enforced through PostgreSQL pgcrypto hashing and Zod validation.
Designing a 13-package Turborepo architecture with clean boundaries and zero circular dependencies across Next.js 16 applications
Implementing sub-second Supabase Realtime synchronization with debounced client invalidation to prevent cascading re-renders during rapid admin edits
Building a bi-directional RTL map interface combining MapLibre GL with the @mapbox/mapbox-gl-rtl-text plugin to render properly shaped Arabic street names and labels
Engineering a zero-plaintext password history and lockout mechanism entirely within PostgreSQL using pgcrypto bcrypt hashing and SECURITY DEFINER functions
Creating a robust offline fallback architecture that transparently simulates all dynamic queries when running without live Supabase credentials
Enterprise Monorepo Topologies: Orchestrating multi-app Turborepo builds, shared workspace packages, and unified Tailwind v4 design tokens
Advanced PostgreSQL Security & RLS: Implementing automated audit trails, password aging triggers, and defense-in-depth role-based access control (Owner/Admin/Editor)
Spatial Web Applications: MapLibre GL integration, Supercluster algorithm tuning, and responsive coordinate picker UX with reverse geocoding
Real-Time State Synchronization: Harmonizing server-rendered Next.js pages with client-side Supabase Realtime web socket events
Deep Internationalization & RTL Engineering: Handling dynamic font subset switching, layout direction mirroring, and multilingual taxonomy trees
Created an enterprise-grade digital real estate platform uniting public property discovery with an advanced administrative back-office, establishing sub-second content agility and fortified security standards.
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