Экосистема из 3 сайтов для девелопера года по версии Urban Awards-2020

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

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

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

1) Создание интеграции с API заказчика.

2) Редизайн страниц по ТЗ заказчика, настройка юзабилити и фронтенда.

3) Создание и настройка виджетов.

4) Оптимизация работы всех составляющих сайта.

У заказчика был сторонний API, который давал информацию по планировкам, с ней нам необходимо было работать. Для упрощения мы сделали интеграцию нашего бэкенда с API заказчика, настроили синхронизацию планировок, тем самым обеспечили себе постоянно актуальную информацию. Всю «внутреннюю» составляющую сайта разработали на NodeJS, PostgreSQL, NestJS, TypeORM.

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

Нам хотелось сделать красивый и удобный сайт. Для этого в самом начале мы разработали полноценный UI-Kit. Он включал в себя элементы для всех трех сайтов, над которыми нам предстояло работать. В качестве основы были взяты React, NextJS и SCSS, являющиеся сегодня стандартом быстрой и качественной разработки SSR приложений. Было решено не использовать Redux, а вместо него взять React-Query, так как полноценный стор сайтам был не нужен.

Благодаря наличию UI-Kit и уже настроенной административной панели с виджетами, процесс работы над двумя последующими страницами заказчика прошел без подготовительных этапов. Хотим отметить, что этап подвязывания виджетов к админке прошел очень успешно благодаря использованию декораторов.

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

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

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

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

Визуал был создан на стороне заказчика. Он получился очень минималистичным и здорово демонстрировал современность подхода компании LEGENDA Intelligent Development — трендсеттера рынка недвижимости.

Для реализации редизайна мы разработали полноценный UI-Kit. Он включал в себя компоненты, из которых состоят все три сайта.

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

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

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

По сути, это обычный миксин написанный на SASS. Основная цель миксина – адаптив сайта под практически любые разрешения устройства. Мы достигли этого благодаря высчитыванию пропорции от разрешения самого устройства. Scale переводит передаваемые ему значения из PX (пикселей) в VW (относительную единицу измерения), тем самым при любом ресайзе страницы, блоки на сайте пропорционально увеличиваются или уменьшаются.

Одним из главных достоинств нашего миксина – это сокращение кода в 3 раза, ведь вместо прописи 3-х и более медиа блоков, мы лишь импортируем миксин в нужный нам SASS файл стилей и передаем ему нужные нам свойства с 3-мя значениями в PX (пикселях) – мобильные, планшетные и десктопные устройства соответственно.

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

Оба раздела также легко собираются в конструкторе страниц.

Для работы над проектом была собрана большая продуктовая команда, которую мы дополнили и усилили экспертизой по backend и frontend-разработке, а также по QA.

1) реализовали единую экосистему проекта

2) создали с нуля конструктор страниц из 65+ виджетов

3) упростили навигацию на страницах

4) настроили интуитивно понятную административную панель

5) обеспечили процесс обновления информации в режиме реального времени.