Создание интеграции с API заказчика и повышение юзабилити с помощью UI-Kit
Срок реализации – восемь месяцев.
Задачи
- Создание интеграции с API заказчика.
- Редизайн страниц по ТЗ заказчика, настройка юзабилити и фронтенда.
- Создание и настройка виджетов.
- Оптимизация работы всех составляющих сайта.
Стэк
NodeJS, PostgreSQL, NestJS, TypeORM, React, NextJS, SCSS, React-Query, Material-UI, Jest, e2e тестирование
Решение
Интегрировались с API заказчика
Наш клиент – LEGENDA Intelligent Development. Было 3 сайта — коммерческая недвижимость, жилая недвижимость, корпоративный сайт. У заказчика был сторонний API, который давал информацию по планировкам, с ней нам необходимо было работать. Для упрощения мы сделали интеграцию нашего бэкенда с API заказчика, настроили синхронизацию планировок, тем самым обеспечили себе постоянно актуальную информацию. Всю “внутреннюю” составляющую сайта разработали на NodeJS, PostgreSQL, NestJS, TypeORM.
После реализации бэкенда мы провели тестирование в два этапа – e2e и Unit тестирование при помощи Jest. А затем перешли к самому важному в любом редизайне – фронтенду.
Повысили юзабилити сайта
Нам хотелось сделать красивый и удобный сайт. Для этого в самом начале мы разработали полноценный UI-Kit. Он включал в себя элементы для всех трех сайтов, над которыми нам предстояло работать. В качестве основы были взяты React, NextJS и SCSS, являющиеся сегодня стандартом быстрой и качественной разработки SSR приложений. Было решено не использовать Redux, а вместо него взять React-Query, так как полноценный стор сайтам был не нужен.
Создали и настроили виджеты
Следующим шагом стало выполнение требования заказчика о том, чтобы каждая страница состояла из отдельных виджетов. Это удобно для дальнейшей работы по наполнению сайта, ведь при наличии разных виджетов, страницы можно собирать из них самостоятельно, как конструктор. В это же время шел процесс разработки административной части сайта. Для того, чтобы быстро и качественно разработать административную панель, была выбрана библиотека Material-UI, которая позволила в кратчайшие сроки реализовать собственную админ-панель и использовать ее между тремя сайтами.
Оптимизировали работу сайта
Благодаря наличию UI-Kit и уже настроенной административной панели с виджетами, процесс работы над двумя последующими страницами заказчика прошел без подготовительных этапов. Хотим отметить, что этап подвязывания виджетов к админке прошел очень успешно благодаря использованию декораторов.
У разработчиков, недавно вошедших в проект, не было необходимости разбираться, как писать админку. Им нужно было лишь понять, какие декораторы есть на проекте и использовать их. Совсем небольшой кусок кода формирует полноценный элемент в админке. По итогу структура виджетов получилась однотипной и понятной, и любой разработчик может добавить свой новый виджет на основе того, как сделаны остальные.
Редизайн сайтов получился лаконичным, функциональным и современным. Все выбранные стилевые решения помогают отразить главный принцип нашего заказчика – формирование трендов, которые становятся нормой рынка недвижимости. С технической точки зрения интересна архитектура созданных виджетов и наличие отдельных пакетов, которые позволяют использовать виджеты и другие компоненты сайта бесконечно и между разными страницами сайта.
Ян, frontend developer