Разработка нового сайта для часового бренда «Ракета»

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

В данном проекте мне довелось работать совместно с диджитал-агенством Pena. Клиент пришел к нам с новым вариантом сайта, построенным на Gatsby. Сайт не удовлетворял требованиям клиента в части функционала и быстродействия.

Также клиент имел разработанный в Фигме UI Kit, который нужно было взять за основу для построения UI нового сайта. Дизайн сайта был разработан в студии Артемия Лебедева.

Проблемы текущего сайта заключались в следующем:

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

Клиенту было предложено сначала реализовать компоненты UI Kit на React и организовать их с помощью Storybook. Сам сайт было предложено переписать с Gatsby на NextJS, как более современный и развитый фреймворк. Для стилизации решено было использовать TailwindCSS, для основы интерактивных элементов — библиотеку HeadlessUI.

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

Сложности

Основные сложности заключались в нетривиальных дизайн-решениях (наличие вертикального выравнивания по сетке, "резиновая" верстка), сложной и длительной сборке Gatsby-проекта, сложности интеграции с API Битрикса, а также требования к мультиязычности и мультирегиональности сайта (разные цены и склады для разных регионов).

Результаты

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

• страницы и модули сайта реализованы согласно дизайну и требованиям, произведена интеграция с API 1С Битрикс
• осуществлен переход на более современный технологический стек
• улучшена производительность сайта
• в разы улучшена средняя скорость сборки проекта
• улучшены CI/CD-процессы
• упрощена работа с локализацией

Ниже привожу скриншоты некоторых страниц сайта: