Кейс: Детейлинг-центр СПб. Как собрать комплексный digital-проект с нуля за 7 дней в условиях импортозамещения

🛠 Технологический стек

Чтобы обеспечить максимальную скорость разработки, мгновенный отклик интерфейса и стабильность в РФ, мы выбрали современный и легковесный стек:

• Frontend: Next.js 16 (с компилятором Turbopack), TypeScript, Tailwind CSS v4.
• Backend: Next.js API Routes (Node.js).
• Автоматизация (боты): Пакет Telegraf (Node.js) — развернуты 2 раздельных бота (клиентский для записи и админский для управления заявками).
• Хостинг: Распределенная гео-архитектура: TimeWeb (РФ) для фронтенда и API + IONOS (США) для бесперебойной работы Telegram-ботов.
• Интеграции: Яндекс.Метрика, SMTP (TimeWeb), REST API для связи между серверами.

📐 Архитектура решения: Географическое распределение

Главная архитектурная особенность проекта — гибридный гео-распределенный хостинг. Из-за сетевых особенностей и блокировок Telegram API на территории РФ, стандартное размещение «всё на одном сервере» привело бы либо к недоступности сайта, либо к падению ботов.

Мы разделили инфраструктуру:

🛑 Ключевые проблемы и их инженерные решения

Проблема 1: Блокировки и сетевой тупик

Проблема 2: Медленный калькулятор (Speed Index)

Проблема 3: 7 критических багов за 24 часа до релиза

Перед запуском контекстной рекламы мы провели стресс-тест по 47-пунктному QA-чеклисту и выявили пул критических уязвимостей:

• API бэкенда возвращал статус success: true даже при сбое отправки.
• Отсутствовала маска телефона (пользователи путались в форматах и вводили буквы).
• Не было чекбокса согласия на обработку персональных данных (риск по 152-ФЗ).
• При определенных комбинациях в калькуляторе вылетал NaN в итоговой стоимости.
• Отсутствовал сброс параметров и не была подключена аналитика.

Проблема 4: Риск потери лидов (Dual-Channel система)

// TypeScript
// 1. Моментальное уведомление в Telegram через API ботов
// 2. Гарантированный бэкап-канал через локальный SMTP TimeWeb

🧮 Интерактивный калькулятор — сердце конверсии

Калькулятор не просто считает сумму, он работает на основе динамической матрицы данных:

• Под капотом база из 25 автомобильных брендов и более 150 моделей.
• Все машины разделены на 4 класса (A/B/C/D) с повышающими коэффициентами: от ×1.0 до ×1.45.
• Предусмотрены кастомные исключения (например, за сложные кузова Range Rover или специфику материалов Tesla заложена автоматическая надбавка +25%).
• Охвачено 7 категорий услуг (керамика, полировка, химчистка, пленки и т.д.) — всего около 40 позиций.

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

Глубокая сквозная аналитика

Для отслеживания эффективности в Яндекс.Метрику передаются не просто факты кликов, а развернутые E-commerce-like параметры. Пример отправки цели при отправке расчета:

// JavaScript
ym(109284242, 'reachGoal', 'calculator_submit', {
  total_price: 65000,
  services_count: 2,
  car_class: 'D',
  car_brand: 'Porsche',
  car_model: 'Taycan'
});

С помощью Вебвизора и структуры этих целей мы точно видим, на каком этапе калькулятора пользователи сомневаются, какие услуги комбинируют чаще всего и каков средний чек на входе.

📈 Итоги и метрики проекта

Благодаря связке Next.js 16, TypeScript и плотной работе с CLI-агентом Claude Code, нам удалось показать рекордные темпы развертывания продакшн-системы.

Скорость разработки

• MVP (сайт + 2 работающих бота): 3 дня.
• Полировка, QA, закрытие 7 багов и аналитика: 2 дня.
• Итого от пустой папки до старта трафика: 7 дней.

Технические показатели

• Lighthouse Score: 95+ по всем фронтам.
• Время до полной отрисовки (LCP): < 1.5 секунды.
• Оптимизация веса ассетов: Снижение веса графики на 80%.

💡 Главные инсайты кейса

1. Разделяй и властвуй: В текущих реалиях гибридная архитектура (Фронтенд в РФ, API-боты за рубежом) — самый дешевый и стабильный способ подружить локальный веб-трафик с зарубежными сервисами без костылей с прокси.
2. Отказоустойчивость не стоит дорого: Написание резервного канала отправки через SMTP занимает 30 минут, но гарантирует бизнесу безопасность данных при любых сетевых штормах.
3. Современный стек решает: Next.js 16 в связке с Turbopack компилирует проект за 3 секунды вместо привычных 40. Это кратно увеличивает фокус разработчика и скорость итераций, позволяя собирать сложные экосистемы в одиночку за неделю.

Бизнес получил готовую независимую ИТ-инфраструктуру, которая генерирует лиды, автоматически распределяет их по менеджерам и предоставляет полную прозрачность для аналитики рекламы.