LEGENDA

Три сайта девелопера на одной платформе с конструктором страниц

LEGENDA Intelligent Development — холдинг из топ-20 застройщиков Северо-Запада. Мы объединили его корпоративный сайт и сайты жилой и коммерческой недвижимости в одну платформу с конструктором страниц.

Девелопмент
Разработка
Интеграции
Аутстаффинг
2020–2022

+47%продаж к концу 2021 года

65+виджетов в конструкторе страниц

3 → 1три сайта на одной платформе

Премия «Золотой сайт»
Бэкенд, фронтенд и QA в продуктовой команде клиента
3 года сотрудничества
6 специалистов

LEGENDA

платформа девелопера2020–2022

3 → 1

Три сайта — одна платформакорпоративный, жилая и коммерческая недвижимость в единой базе

65+виджетов

Конструктор странициз 65+ виджетов клиент сам собирает любую страницу

«Резиновая вёрстка»анимация не мельчит на 4K и не громоздится на телефоне

Админка на Material-UIинформация обновляется в реальном времени

+47%продаж к концу 2021 года

Премия «Золотой сайт»
65+ виджетов в конструкторе
бэкенд, фронтенд и QA в команде клиента

3 → 1сайта на платформе
65+виджетов
6специалистов

LEGENDA×crt

Главное о проекте

На стороне заказчика

Большая продуктовая команда проекта и визуал для редизайна.

На стороне CRT

Бэкенд- и фронтенд-разработка и QA: этой экспертизой мы дополнили и усилили команду клиента.

задача

Объединить три разрозненных сайта — корпоративный, жилой и коммерческой недвижимости — в один удобный сервис. Главный запрос — конструктор, чтобы клиент сам собирал новые страницы.

Интеграция данных — данные трёх сайтов из стороннего API собрали в единую базу, они обновляются в реальном времени
Конструктор страниц — создали с нуля, в нём больше 65 виджетов. Новостной блок и раздел вакансий тоже собираются в конструкторе
Общая админ-панель — одна на все три сайта, сделали на Material-UI
Редизайн — собрали библиотеку компонентов всех трёх сайтов и придумали «резиновую вёрстку», чтобы интерфейс одинаково смотрелся на 4K, планшетах и телефонах
Тестирование — бэкенд проверили в два этапа, провели сквозное и ручное тестирование

подробности

Как устроен проект

Создание единого сервиса

01
В работу пришли три разных сайта — коммерческой недвижимости, жилой недвижимости и корпоративный — и сторонний API заказчика, из которого брались данные
02
Бэкенд-команда интегрировала информацию трёх сайтов в единую базу: пользователи получают актуальные данные о каждом объекте недвижимости в реальном времени
03
Бэкенд протестировали в два этапа
04
Перешли к самому важному в любом редизайне — фронтенду
05
Выполнили требование заказчика: каждая страница состоит из отдельных виджетов. Параллельно разрабатывали административную часть сайта

Конструктор страниц

Страницы из отдельных виджетов удобно наполнять дальше: их можно собирать самостоятельно, как конструктор.

Для административной части выбрали библиотеку Material-UI — она позволила в кратчайшие сроки сделать собственную административную панель и использовать её на трёх сайтах
Из 65+ виджетов заказчик собирает любую страницу в административной панели
Новостной блок о спецпредложениях, проектах и жизни компании и блок актуальных вакансий тоже собираются в конструкторе

Редизайн и «резиновая вёрстка»

Визуал создали на стороне заказчика: минималистичный, он подчёркивает современность подхода LEGENDA Intelligent Development — трендсеттера рынка недвижимости.

Для редизайна разработали полноценную библиотеку компонентов (UI-кит), из которых состоят все три сайта
У эффектных сайтов с динамической анимацией частая проблема: на экранах 4K отдельные элементы выглядят слишком мелко, а на телефонах и планшетах — чересчур громоздко
Чтобы этого избежать, разработали инструмент, который внутри команды назвали scaling, или «резиновая вёрстка»

Команда и технологии

БэкендNode.js, NestJS, TypeORM, PostgreSQL
ФронтендReact, Next.js, SCSS, React Query, Material-UI, Jest
QAсквозное (e2e) и ручное тестирование

команда

Комментарии команды

Редизайн сайтов получился лаконичным, функциональным и современным. Все выбранные стилевые решения помогают отразить главный принцип нашего заказчика — формирование трендов, которые становятся нормой рынка недвижимости. С технической точки зрения интересна архитектура созданных виджетов и наличие отдельных пакетов, которые позволяют использовать виджеты и другие компоненты сайта бесконечно и между разными страницами сайта.