MLZ-Advanced
Комплексная платформа для продаж земли и недвижимости: сбор лидов, интерактивный путь клиента на базе карты и масштабная внутренняя консоль для каталога, продаж, платежей и согласований.
Next.js 16
React 19
TypeScript
Prisma + MongoDB
Mapbox GL
SCSS
Recharts
Обзор
MLZ-Advanced — это операционная платформа для бизнеса по продаже недвижимости. Одна её часть ориентирована на клиентов и публику: лендинги, интерактивный просмотр проектов и участков на карте, а также процесс оформления интереса к покупке с подтверждением по телефону. Другая часть представляет собой масштабную внутреннюю консоль, где сотрудники управляют всеми процессами продаж: каталогом объектов, клиентами, заявками на покупку, платежами, согласованиями, отчетностью и коммуникацией. Это долгосрочное комплексное приложение, поставляемое как прогрессивное веб-приложение (PWA) с двуязычной поддержкой арабского и английского языков.
Проблема
Продажи земли и участков связаны с огромным объемом постоянно меняющихся данных, за которыми трудно уследить. У каждого участка есть цена, размеры, ориентация, форма собственности, коммуникации и статус, меняющийся по мере приближения к сделке. Клиенты проходят путь от лида к потенциальному покупателю и далее к сделке, платежи поступают по разным схемам и требуют подтверждения, а многие действия нуждаются в согласовании — включая перепродажи, отмены и смену разрешений. Вести такие процессы через электронные таблицы и разрозненные инструменты невозможно при масштабировании. Бизнесу требовалась единая система, объединяющая публичный клиентский путь и внутренние операционные процессы, с надежным аудиторским следом и согласованиями, без которых не может функционировать сфера недвижимости.
Моя роль и подход
Это крупный командный проект, который развивался на протяжении длительного времени, и я работал в нем фронтенд-инженером. Кодовая база организована таким образом, что совершенно разные аудитории — посетители, клиенты и сотрудники компании — используют единое развертывание, оставаясь четко разделенными по группам маршрутов и правам доступа. Большая часть моей работы над фронтендом была сосредоточена на экранах с высокой плотностью взаимодействий: картах, редакторах массовых правок, графиках и детальных представлениях с большим объемом данных, где непосредственно работают сотрудники; все они были реализованы как клиентские компоненты поверх данных, отрендеренных на сервере с контролем доступа.
Стек технологий
Ключевые особенности
Галерея
Сложности и решения
Платформа обслуживает три разные аудитории в рамках одного приложения, где легко допустить архитектурные ошибки. Структура опирается на группы маршрутов Next.js (route groups), что позволяет изолировать публичный сайт, клиентский путь и внутреннюю панель управления по функциям и правам доступа, сохраняя при этом единый деплой. Сам макет дашборда загружает текущего пользователя, определяет доступные его отделу модули и динамически фильтрует навигацию.
Производительность при реальном объеме данных была еще одним постоянным вызовом. Каталог земельных участков — это огромные списки, тяжелые карты и насыщенные данными страницы с подробностями. Поэтому приложение выполняет выборку данных и авторизацию на сервере, оставляя клиентские компоненты для действительно интерактивных частей: карт, табличных редакторов массовых изменений, графиков и модальных окон. Виртуализированные списки сохраняют отзывчивость больших таблиц, а картографические данные конвертируются в GeoJSON, поэтому участки отрисовываются как настоящие пространственные объекты, а не статичные изображения.
Результат
MLZ-Advanced — это комплексная система, которая ведет бизнес в сфере недвижимости от первого визита посетителя до завершенной, утвержденной и оплаченной сделки, обеспечивая детальный учет инвентаря, глубину CRM и журналы согласований, необходимые для таких операций. Долговечность и масштаб этой кодовой базы, развивающейся годами в условиях высокой активности, подтверждают, что перед нами полноценная платформа, которая реально управляет бизнесом, а не просто прототип.
Столкнулись с похожей продуктовой задачей?
Расскажите о текущем состоянии продукта, необходимом результате и имеющихся ограничениях. На основе этого я сформулирую понятный первый этап.
Нанять full stack разработчика