Редизайн трех сайтов для LEGENDA Intelligent Development

1. Вводная задача от заказчика, проблематика, цели

Все пользователи любят красивые и понятные сайты. И чем красивее и понятнее сайт - тем выше вероятность того, что посетитель не уйдет с вашего ресурса, правильно поймет всю информацию и станет вашим клиентом. Для упрощения работы над этой задачей можно и нужно использовать UI-Kit. Хотим рассказать о своем опыте на примере кейса по редизайну сайтов известного девелопера LEGENDA Intelligent Development.

Перед началом работ перед нами стояли следующие задачи:

1) редизайн предыдущих страниц по ТЗ заказчика, настройка юзабилити и фронта.

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

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

4) создание и настройка виджетов, с помощью которых заказчик сможет самостоятельно создавать новые страницы сайтов.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Вся “внутренняя” составляющая сайта была выполнена на NodeJS, PostgreSQL, NestJS, TypeORM. Это позволило создать хорошую интеграцию с API заказчика. После того, как backend часть была закончена, мы провели два этапа тестирования – e2e и Unit, при помощи Jest. А затем перешли к самому важному в любом редизайне – фронтенду.

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

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

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

3. Результаты сотрудничества

Работы по проекту для LEGENDA Intelligent Development позволили реализовать такие интересные решения, как создание полноценного UI-Kit, работа с CSS-фреймворк Material-UI для подготовки административной панели, работа с виджетами и декораторами.