Портфолио, проекты и кейсы Creative

Редизайн сайтов на React и не только

Backend QA и тестирование ReactJS NodeJS Frontend



Создание интеграции с API заказчика и повышение юзабилити с помощью UI-Kit


Срок реализации – восемь месяцев.


Задачи


  1. Создание интеграции с API заказчика.
  2. Редизайн страниц по ТЗ заказчика, настройка юзабилити и фронтенда.
  3. Создание и настройка виджетов.
  4. Оптимизация работы всех составляющих сайта.

Стэк


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