Сайт и PWA-админка тюнинг-ателье Elena Hango

Используемые навыки Docker Nest.js Next.js PostgreSQL Typescript

Описание

Разработка сайта и административной системы для тюнинг-ателье Elena Hango Atelier в Новосибирске.

Ателье занимается перетяжкой рулей и ручек КПП, изготовлением цветных ремней безопасности, готовыми дизайнами лент, индивидуальными заказами и подарочными сертификатами.

Заказчику требовался современный сайт в автомобильной стилистике, который одновременно выполняет функции витрины, каталога и системы приёма заявок. Посетитель должен иметь возможность изучить услуги и готовые дизайны, выбрать материалы и цвета, добавить позиции в корзину, приложить фотографии автомобиля и оформить заявку.

Полноценная онлайн-оплата в проекте не использовалась. После отправки заявки детали заказа, стоимость, доставка и оплата согласовываются с клиентом индивидуально.

Также требовалась удобная административная панель для управления:

услугами и готовыми дизайнами;
категориями и товарами;
вариантами и материалами;
остатками цветных лент;
фотографиями и медиатекой;
заказами и клиентами;
подарочными сертификатами;
отзывами и их модерацией;
уведомлениями о новых заявках.

Отдельное внимание уделялось мобильной работе. Административную панель можно установить на iPhone и Windows как PWA-приложение и получать push-уведомления.

Проект создавался на базе собственного Fullstack Shop Engine и стал его первым полноценным запуском для реального бизнеса.

Решение

Сначала была адаптирована архитектура универсального интернет-магазина под специфику тюнинг-ателье.

Услуги, готовые дизайны и материалы были разделены на самостоятельные сущности. Например, «Ремни безопасности» являются направлением услуги, а внутри него размещаются отдельные готовые дизайны с фотографиями, вариантами, цветами и ценами.

Был реализован индивидуальный сценарий оформления заказа:

для руля клиент загружает фотографии лицевой и обратной стороны, указывает наличие подогрева, материал, цвет и строчку;
для ручки и чехла КПП выбирает тип, материал и цвет;
для ремней выбирает готовый дизайн или индивидуальный вариант;
для доставки выбирает ПВЗ СДЭК на карте;
стоимость доставки и итоговая цена согласовываются после обработки заявки.

Для администратора создана адаптивная панель управления. Через неё можно редактировать каталог, публиковать и скрывать дизайны, управлять материалами, остатками, заявками и клиентами.

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

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

Для подарочных сертификатов создан отдельный редактор, похожий на упрощённую Canva. В нём можно перемещать и изменять текстовые блоки, выбирать шрифты, добавлять изображения, управлять QR-кодом, сохранять макет и экспортировать сертификат в PNG.

Административная система реализована как PWA. Настроены service worker, установка приложения на устройства и Web Push-уведомления о новых заказах, заявках на сертификаты, отзывах и изменениях остатков.

Проект развёрнут на отдельном сервере в Docker. Настроены PostgreSQL, системный Nginx, HTTPS, healthcheck-проверки, миграции Prisma, резервное копирование базы и файлов, безопасный deployment и возможность быстрого отката на предыдущие Docker-образы.

Результат

Заказчик получил готовую систему, которая объединяет сайт ателье, каталог услуг, оформление заявок и внутреннюю административную панель.

Посетители сайта могут:

изучать услуги и примеры работ;
выбирать готовые дизайны ремней;
смотреть фотографии доступных цветов лент;
оформлять индивидуальные заказы;
прикладывать фотографии автомобиля;
выбирать ПВЗ СДЭК;
заказывать подарочные сертификаты;
оставлять отзывы.

Администратор может самостоятельно управлять контентом без участия разработчика:

добавлять и редактировать услуги;
публиковать готовые дизайны;
управлять фотографиями и вариантами;
контролировать материалы и остатки;
обрабатывать заявки;
вести базу клиентов;
выпускать и погашать сертификаты;
модерировать отзывы;
получать push-уведомления о новых событиях.

Система адаптирована под мобильные устройства. Елена может установить административную панель на телефон как отдельное приложение и работать с заказами непосредственно из мастерской.

Проект запущен на домене khangoatelie.ru и используется как основной сайт и рабочий инструмент ателье. Архитектура допускает дальнейшее развитие: подключение онлайн-оплаты, расчёта доставки, новых типов услуг, дополнительных витрин и интеграций.

В результате был создан не просто рекламный сайт, а полноценная цифровая система для приёма и сопровождения заказов малого бизнеса.