Сервис по утилизации автомобилей

Разработка изоморфного приложения на Next.js и Drupal: автоматический расчёт стоимости утилизации авто, интеграции со сторонними API и CRM, устойчивость к высоким нагрузкам и удобный пользовательский путь.
О проекте
Scrapi — британский сервис по утилизации автомобилей. Пользователь заполняет форму на сайте, получает моментальную оценку стоимости, указывает адрес и дату вывоза. В назначенный день сотрудники компании приезжают, забирают машину и выплачивают согласованную сумму.
Задачи
— Настроить облачный хостинг Amazon;
— спроектировать архитектуру сайта;
— разработать изоморфное приложение на Next.js;
— построить REST API;
— интегрировать сервис со сторонними API;
— подключить CRM;
— настроить email-рассылки через Sendinblue.
Сбор заявок и работа с брошенными формами
Главная цель интерфейса — плавно проводить пользователя по четырёхшаговой форме-заявке на утилизацию автомобиля.

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

Если предложенные условия подходят, пользователь вносит персональные данные и выбирает дату вывоза. После отправки формы заявка попадает в CRM, а менеджеры получают уведомление по почте.

Понимая, что пользователь может прервать процесс на любом этапе, мы решили после каждого завершённого шага присваивать форме короткую ссылку. Если пользователь уходит с сайта недозаполнив форму, ссылка направляется ему на почту. Кликнув по ней, клиент возвращается на тот самый шаг, где остановился.
Влияние специфики бизнеса на архитектуру сайта
Поскольку пользователи получают деньги за металл, сервису важно быть прозрачным. Так как данные различаются по регионам Великобритании, мы реализовали импорт цен на металлолом из CSV-файлов. На стороне фронтенда графики изменения стоимости отображаются с помощью библиотеки Recharts.

Также сайт интегрирован со сторонними сервисами для поиска автомобиля по регистрационному номеру, поиска адреса по почтовому индексу клиента и др. Для редких случаев когда два автомобиля имеют одинаковый номер, мы предусмотрели дополнительную проверку VIN-номера машины.

Для работы со списками клиентов из CRM и автоматического запуска email-кампаний мы выбрали сервис Sendinblue — его API оказался проще, а цены выгоднее по сравнению с альтернативами.
Изоморфное приложение вместо SPA
Изначально Scrapi был SPA-приложением, что обеспечивало скорость, но мешало поисковому продвижению. В новой версии интерфейс частично рендерится на сервере с помощью Next.js. При запросе браузер получает уже сформированную страницу, а после загрузки она продолжает работать как полноценное React-приложение.

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

Drupal в проекте выполняет роль headless CMS: он хранит данные и взаимодействует с другими приложениями и сервисами через API, а за фронтенд полностью отвечает Next.js.
Подготовка сайта к высоким нагрузкам
Клиент уже сталкивался с ситуациями, когда рост трафика или DDoS-атаки приводили к падению сайта, поэтому требовалось решение, устойчивое к резким всплескам нагрузки. Мы использовали проверенный стек:

— хостинг: Amazon Web Services;
— CMS: Drupal 8;
— кэширование: Memcached и Varnish;
— бэкенд: REST API на базе дистрибутива Drupal Contenta CMS.
Результаты
Проект развивается и поддерживается новой командой.
Подпишитесь на рассылку
Мы регулярно выпускаем новые статьи и кейсы
Отправляя эту форму, вы даёте согласие на обработку персональных данных ООО “Дроп Софт”
в целях обработки заявки и обратной связи.