LEGENDA: создание удобного и современного сайта-сервиса для крупного девелопера

Главное о кейсе

Объединили три разных сайта в один.
Создали удобный сервис - конструктор, с помощью которого сотрудники заказчика самостоятельно могут легко и быстро публиковать новости и создавать страницы на сайте.

МЫ разработали более 65 виджетов, из которых заказчик может собрать любую страницу сайта самостоятельно через на административную панель.

Сайт на верстке получился эффектным за счет динамической анимации страниц. Чтобы избежать проблемы, когда отдельные элементы дизайна на экранах 4К выглядят слишком мелко, а на экранах мобильных устройств и планшетов – чересчур громоздко, мы разработали инструмент, который внутри команды назвали scaling или «резиновая вёрстка». Это наша уникальная разработка, которую сейчас мы успешно применяем в работе над другими проектами.

По запросу клиента мы создали и настроили новостной блок, в котором публикуются спецпредложения, новости проектов и события из жизни компании LEGENDA Intelligent Development, а также блок с актуальными вакансиями. Оба раздела сейчас собираются и наполняются клиентом в конструкторе страниц.

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

Бизнес-задача и ее решение

Задачи:
1) создать единую экосистему из трех разрозненных сайтов заказчика;
2) реализовать редизайн по визуальным материалам LEGENDA Intelligent Development;
3) разработать уникальную (с нуля) административную панель с возможностью самостоятельного создания и наполнения страниц сайта;
4) настроить юзабилити и frontend-составляющую сайта для повышения лояльности пользователей к сервису;
5) обеспечить процесс обновления информации в режиме реального времени.

Решения.

Первоначально к нам в работу поступило 3 разных сайта — коммерческая недвижимость, жилая недвижимость, корпоративный сайт. У заказчика был сторонний API, который давал информацию, с которой нам необходимо было работать.

Для упрощения всех последующих работ мы провели интеграцию всей информации внутри платформы. Это позволило пользователям сайта получать актуальные данные о каждом объекте недвижимости в режиме реального времени.

После реализации бэкенда мы провели тестирование в два этапа, а затем перешли к самому важному в любом редизайне – фронтенду.

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

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

Визуал был создан заказчиком. Он был минималистичным и демонстрировал современный подход компании LEGENDA Intelligent Development – быть трендсеттером на рынке недвижимости.
Для реализации редизайна мы разработали полноценный UI-Kit. Он включал в себя компоненты, из которых состоят все три сайта.

Прочая информация о кейсе

Legenda – платформа из трёх сайтов для крупного холдинга LEGENDA Intelligent Development, входящего в топ-20 застройщиков-лидеров Северо-Запада.

Заказчик обратился к нам с интересной задачей по редизайну и объединению трёх разрозненных страниц – корпоративной, жилой и коммерческой недвижимости – в один большой и удобный сайт.

Главным запросом стала реализация конструктора для самостоятельного создания будущих страниц сайта. Заказчик хотел, чтобы административная панель его сервиса была разработана с нуля специально под него, и не хотел использовать стандартные конструкторы сайтов.

Стек и технологии проекта.
Backend: NodeJS, PostgreSQL, NestJS, TypeORM.
Frontend: React, NextJS, SCSS, React-Query, Material-UI, Jest.
QA: e2e тестирование, manual testing.

Скриншоты