веб приложение для маркетплейса запчастей

Вводные данные

Клиент

ООО «Сервис» — компания, специализирующаяся на продаже легковых автомобилей и коммерческого транспорта малой грузоподъёмности.

В дополнение к основному ассортименту компания также занимается торговлей автозапчастями и комплектующими на специализированную технику.

Задача

Задача стояла в создании web-приложения (маркетплейса автозапчастей и техники) с нуля с учётом:

• сложной бизнес-логики;
• SEO-оптимизации;
• масштабируемой архитектуры;
• кросс-ролевого взаимодействия (один аккаунт = несколько ролей и профилей).

Стоит отметить, перед этим, мы уже успешно завершили релиз мобильного приложения для данного заказчика. После чего, он принял решение продолжить работу с нашей командой и доверил нам разработку web-приложения на той же базе.

О проекте

Проект представляет собой веб-платформу маркетплейс для торговли автомобилями, автозапчастями и комплектующими. Сервис объединяет покупателей и продавцов, обеспечивая полный цикл операций: от просмотра товарных позиций и создания заявок до оформления заказов и управления складом.

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

Также предусмотрена общедоступная витрина для неавторизованных пользователей, SEO-оптимизированная под поисковые системы, что позволяет привлекать новых клиентов и расширять охват.

Выбор стека разработки

Для разработки фронтенд-части платформы был выбран Next.js как основной фреймворк. Он обеспечил оптимальное сочетание серверного и клиентского рендеринга, что позволило ускорить загрузку страниц, улучшить пользовательский опыт и повысить эффективность SEO.

Процесс работы

1. Проектирование

В работе над проектом с нашей стороны участвовала команда из восьми человек: два backend-разработчика и четыре frontend-разработчика, менеджер проекта и тестировщик.

Backend-часть проекта была уже полностью готова и стабильно работала после реализации мобильного приложения, поэтому основные усилия были сосредоточены на frontend-разработке и интеграции.

Были выполнены следующие этапы:

• Анализ готового API и его адаптация под требования веб-версии;
• Проектирование архитектуры веб-приложения с учётом специфики работы в браузере;
• Разработка компонентной структуры для обеспечения повторного использования кода;
• Настройка среды разработки и инструментов для сборки и деплоя.

2. Разработка

Для web-приложения разработка была разделена на три этапа:

1. Реализация раздела авторизации, регистрации и восстановления пароля, «Профиль», «Заявки» и «Склад».
2. Реализация разделов «Заказы», «Корзина», «Уведомления» и «Чаты».
3. Реализация разделов «Главная», «Страница общедоступной части» и «Работа с SEO».

Роли продавца и покупателя

Одной из основных особенностей проекта стала работа с несколькими аккаунтами и ролями в рамках одной сессии. Эта функциональность обеспечивает мгновенное переключение между ролями покупателя и продавца, поддерживая до восьми уникальных состояний профиля (4 аккаунта × 2 роли) без необходимости повторной авторизации.

Это потребовало реализации сложной логики управления состоянием:

• хранение и очистка данных при переключении между аккаунтами и ролями;
• синхронизация состояния между вкладками браузера и мобильным клиентом через WebSocket;
• динамическое изменение интерфейса в зависимости от активной роли.

Для этого использовался централизованный state manager на Redux Toolkit. При переключении сбрасывались кэшированные списки и пересоздавалась сессия, чтобы гарантировать чистое состояние интерфейса. При смене контекста в одном окне остальные устройства автоматически обновляли отображаемые данные.

Заявки

Раздел «Заявки» — один из ключевых модулей веб-приложения, обеспечивающий управление входящими и исходящими запросами на покупку товаров для покупателей и продавцов.

Основной функционал:

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

Кэширование данных ускорило загрузку страниц и минимизировало повторные запросы. Для предотвращения лишних перерисовок внедрили адаптеры Redux для управления списками.

Склад

Раздел предназначен для управления товарными позициями продавцов и просмотра товаров покупателями. Он тесно интегрирован с заявками и заказами, обеспечивая управление складскими данными.

Основной функционал для покупателя и продавца:

• листинг товаров с фильтрацией, поиском и сортировкой;
• детальная карточка товара и добавление в корзину;
• создание и редактирование карточек, массовые действия и перемещение в архив;
• массовая загрузка позиций из Excel с валидацией, а также ссылками на изображения из Яндекс Диска и Google Диска;
• подборки для покупателей и папки для продавцов.

Массовая загрузка товаров

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

Массовые действия с товарами

Продавец может выделить несколько или все товары. Для активных позиций доступны перенос в архив и папку; для архивных — возврат в актуальные и удаление. Это ускорило работу с широким ассортиментом.

Корзина и оформление заказа

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

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

Контроль остатков

После оформления заказа количество товара на складе продавца уменьшается автоматически. Товар с нулевым остатком остаётся активным 30 дней, затем переносится в архив и помечается как «Нет в наличии». Корзина синхронизируется с backend и хранением в браузере, а доступность проверяется при каждом обновлении страницы.

Заказы

Раздел «Заказы» объединяет процессы покупки и продажи — от оформления до подтверждения получения товара. Он обеспечивает контроль статусов и автоматическую синхронизацию с другими разделами системы.

• просмотр активных, завершённых и отменённых заказов для обеих ролей;
• детальная карточка заказа со статусом, суммой, позициями и действиями по ролям;
• подтверждение получения при самовывозе и загрузка ТТН при доставке;
• обновление статусов через интеграцию с API транспортных компаний;
• уведомления о ключевых изменениях.

Реализованы самовывоз и доставка до ПВЗ. Для предотвращения зависших заказов настроена автоотмена, если продавец не передал данные об отправке, покупатель не оплатил счёт или заказ не был получен в установленный срок.

Профиль

Раздел «Профиль» — единый центр управления учётной записью, объединяющий персональные данные, баланс, карточки техники, партнёрскую программу, поддержку и документы. Интерфейс адаптирован под роли покупателя и продавца, а также под физическое или юридическое лицо и ИП.

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

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

Чаты

Раздел «Чаты» обеспечивает прямое общение между продавцами и покупателями по заявкам, товарам и заказам. Это ускоряет согласование условий и повышает прозрачность взаимодействия.

• диалоги, привязанные к конкретным заявкам, товарам или заказам;
• полная история переписки, включая завершённые сделки;
• уведомления о новых сообщениях и непрочитанных диалогах;
• переход в чат напрямую из карточки заявки или заказа.

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

Уведомления

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

• новые заявки, отклики, обновления заказов, сообщения в чатах и изменения по товарам;
• разделение уведомлений по ролям покупателя и продавца;
• индикатор новых уведомлений в шапке;
• фильтрация по типам событий, статусы «прочитано / непрочитано» и очистка списка.

Обновления приходят через WebSocket, группируются и сортируются по времени и типу, синхронизируются между вкладками и устройствами.

Общедоступная часть

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

Работа с SEO

Для повышения видимости в поисковых системах реализована комплексная SEO-оптимизация товаров, заявок и главной страницы. Автоматизированные шаблоны формируют title, description и keywords на основе названия товара и города; тот же подход применяется при импорте из Excel. При необходимости продавец задаёт метаданные вручную.

Карточки получили уникальные URL с названием и категорией, schema.org-разметку с названием, описанием и ценой. SSR формирует готовый HTML для индексации, а клиентский рендеринг оставлен для динамических интерфейсных элементов.

Внедрение тестирования для обеспечения надёжности

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

1. Storybook для изолированной разработки и документирования компонентов, быстрого поиска визуальных дефектов и согласования UI.
2. Creevey для визуальных регрессий: после каждого коммита система делает скриншоты ключевых компонентов и сравнивает их с эталоном.
3. Jest для unit-тестов хелперов, валидации, ролей и преобразования данных.
4. Cypress для E2E-тестов полного пользовательского цикла — от авторизации до завершения бизнес-процесса.

Этот комплекс позволил быстро вносить правки без риска сломать ключевые сценарии.

Возникшие трудности

• Готовый API имел слабую типизацию и не всегда соответствовал реальным данным, что приводило к runtime-ошибкам и требовало дополнительных проверок.
• Требования расширялись в ходе разработки: поддержку нескольких аккаунтов пришлось реализовывать поверх готовой логики во всех модулях, включая синхронизацию вкладок, кэш и ролевую модель.
• Новый функционал затрагивал фундаментальные компоненты из-за изначальной жёсткой связанности кода.

Результаты

• Полная функциональная идентичность с мобильным приложением: сложные сценарии аккаунтов, ролей, заявок и склада реализованы в web-версии.
• Кэширование, декомпозиция и адаптеры списков обеспечили плавную работу интерфейса даже с большими объёмами данных.
• Ключевые страницы подготовлены к SEO-продвижению.
• Рефакторинг и процессы разработки заложили масштабируемую архитектуру без накопления технического долга.
• Полноценное web-приложение запущено в сжатые сроки на готовом стабильном backend-API.

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

Похожие проекты

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

• react