MLZ-Advanced

Role: Front-end engineer (multi-developer team)Timeline: 2024-2026Type: Enterprise web app (PWA)

Next.js 16

React 19

TypeScript

Prisma + MongoDB

Mapbox GL

SCSS

Recharts

MLZ-Advanced hero image

MLZ-Advanced is the operations platform behind a real estate sales business. One side faces the public and customers: landing pages, a map-based browser for projects and plots, and a purchase-interest flow with phone verification. The other side is a deep internal console where staff manage the entire sales operation, including inventory, customers, purchase requests, payments, approvals, reporting, and communication. It's a long-running, large-scale application that ships as a progressive web app and runs bilingually in Arabic and English.

Land and plot sales involve a lot of state that's hard to keep straight. Each plot carries pricing, dimensions, orientation, ownership, utilities, and a status that changes as it moves toward a sale. Customers progress from lead to opportunity to buyer, payments arrive in different structures and need approval, and many actions need sign-off, including resales, cancellations, and permission changes. Doing this across spreadsheets and disconnected tools doesn't scale. The business needed one system that handled the public-facing journey and the internal machinery, with the audit trail and approvals a real estate operation depends on.

This is a large team project that has grown over a long period, and I worked as a front-end engineer within it. The codebase is organised so that very different audiences, the public, customers, and internal staff, share one deployment while staying cleanly separated by route group and permission. Much of my front-end work centred on the interaction-heavy surfaces: maps, bulk editors, charts, and the dense detail views where staff actually do their jobs, built as client components on top of server-rendered, access-controlled data.

FrameworkNext.js 16 (App Router) with React 19 and TypeScript

DataPrisma ORM over MongoDB, with server actions and API routes

MapsMapbox GL and react-map-gl, with GeoJSON/KML conversion for plot data

VisualisationRecharts and Chart.js for dashboards and reporting

StylingSCSS, global and per-page

State / dataJotai, SWR, and nuqs for URL state

IntegrationsResend (email), Azure MSAL (Microsoft identity), PostHog and Vercel analytics

SupportingZod validation, bcrypt, sharp, JSZip, react-window for virtualised lists

Public lead capturelanding, contact, and policy pages that funnel visitors toward the project and map experience and collect contact data for follow-up.

Map-based customer journeybrowse projects and plots on an interactive map, view plot detail, and submit purchase interest, with OTP phone verification and automated confirmation email and SMS.

Inventory managementprojects, locations, and individual plots, each with rich spatial and sales metadata and a status (available, on hold, sold, hidden).

Customer CRMprofiles, lead-to-customer status progression, documents, notes, communication history, and reminders.

Purchase request workflowthe gateway from interest to sale, with assignment, status tracking, and lifecycle handling.

Payments and financepayment records tied to purchases, multiple structures (one-stop, installment, bank), proof documents, and approve or decline actions with reporting.

Approval workflowsconfigurable templates and multi-step approvals for sensitive actions like resale, cancellation, and permission changes, with a full audit trail.

Operational toolingbulk editing, backup and restore, analytics dashboards, and a bilingual Arabic/English UI with RTL support.

MLZ-Advanced screen 1

MLZ-Advanced screen 2

Performance under real data volume was the other constant pressure. Land inventory means large lists, heavy maps, and data-dense detail pages, so the app keeps data fetching and authorisation on the server and reserves client components for the genuinely interactive parts: maps, bulk grid editors, charts, and modals. Virtualised lists keep long tables responsive, and map data goes through GeoJSON conversion so plots render as real spatial objects rather than static images.

All projects Next projectPayment Gateway

Overview

TheProblem

MyRole&Approach

TechStack

KeyFeatures

Gallery

Challenges&Solutions

Outcome