О клиенте
Компания «Арктические технологии» специализируется на производстве датчиков и программного обеспечения для мониторинга коррозии трубопроводов (нефть, газ, биоотходы и др.). Одно из направлений — создание купонов мониторинга коррозии — изделий из того же материала, что и труба, позволяющих прогнозировать срок ее службы.
Задача
Мы давно работаем с клиентом — ранее разрабатывали сайт для их холдинга. В этот раз поступила нестандартная задача: создать уникальный для России продукт — интерактивный конфигуратор купонов мониторинга.
Клиенту нужен был инновационный инструмент, которого нет на российском рынке. Изначально планировался блок на существующем сайте, но в процессе обсуждения мы решили сделать отдельный продукт.
Мы провели встречу с клиентом, собрали референсы, проработали возможные проблемы. Затем сформировали ТЗ и визуализировали будущий сайт.
Этапы работ
1
Оценка макета и выбор инструментов
2
Верстка квиза
3
Доработки и релиз
Этап 1
Оценка макета и выбор инструментов
Изначально мы рассматривали чистый JS или React. Но по итогам оценки решили, что за счет большого количество уже готовых решений, скорости работы приложения при использовании этой технологии и с учётом крайне сжатых сроков, будем использовать React, TypeScript и Zustand.
Этап 2
Верстка квиза
За 2 дня нам удалось сверстать и частично реализовать весь квиз-цикл. При этом код получился чистым и легко поддерживаемым благодаря TypeScript.
Для быстрой и гибкой настройки темы сайта мы использовали библиотеку Mantine UI.
Этап 3
Доработки и релиз
На завершающем этапе клиент вносил много правок, но благодаря гибкости кода все доработки выполнялись быстро.
Мы разработали реал-тайм конфигуратор, который рисует схему изделия на основе введенных данных. За 1 день создали админ-панель на WordPress для управления контентом. Также настроили редиректы, метатеги и сервер.
Фишки сайта
1. Необычный стек технологий: Frontend на React + TypeScript + Zustand, а Backend на WordPress (админка).
2. Реал-тайм визуализация: чертежи рисуются в реальном времени, по указанным пользователем параметрам. Это кастомный конфигуратор, который разрабатывался с нуля, без какой-либо базы.
Пример работы конфигуратора
3. Генерация уникального артикула: каждое изделие имеет свой артикул (из-за индивидуальных параметров).
4. Самостоятельное управление контентом: клиент может добавлять новые параметры без участия разработчика.
Результат
Несмотря на сложность проекта, мы смогли создать уникальный продукт: кастомный конфигуратор без аналогов в России, который решает задачи клиента и дает ему конкурентное преимущество на рынке.
Нам удалось быстро реализовать всё, что задумал заказчик без ущерба качеству.
Итоговый конфигуратор подстраивается под установленные из админки значения и все фигуры внутри работают корректно относительно друг друга.
Сайт: https://ruskupon.ru/
