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

1. Вводная задача от заказчика, проблематика, цели

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

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

Задача

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

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

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

О проекте

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

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

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

что позволяет привлекать новых клиентов и расширять охват.

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

1. Реализация раздела авторизации, регистрации и восстановления пароля, “Профиль”, “Заявки” и “Склад”

2. Реализация разделов “Заказы”, “Корзина”, “Уведомления” и “Чаты

3. Реализация разделов “Главная”, “Страница общедоступной части” и “Работа с SEO”

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

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

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

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

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

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

Заявки

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

на покупку товаров для покупателей и продавцов.

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

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

Действия по ролям:

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

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

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

Склад

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

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

• Листинг товаров: отображение доступных товаров для покупателей и продавцов с фильтрацией, поиском и сортировкой.
• Детальная карточка товара: возможность просмотра информации о товаре и добавления его в корзину для покупателей.
• Управление товарами: продавцы могут добавлять новые позиции, редактировать существующие карточки и выполнять массовые действия (перемещение в архив/папку, удаление).
• Массовая загрузка товаров: поддержка импорта множества позиций через Excel-файл с валидацией данных и возможностью добавления ссылок на изображения с Яндекс.Диска или Google Диска.
• Контроль остатков: автоматическое уменьшение количества товара на складе после оформления заказа; товары с нулевым остатком остаются активными 30 дней, затем переходят в архив с пометкой «Нет в наличии» для покупателей.
• Организация данных: покупатели создают подборки, продавцы — папки для удобного управления товарами.

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

Для упрощения первичного наполнения склада и ускорения работы продавцов с большим объёмом позиций была реализована функция массовой загрузки товаров. Этот механизм позволял загружать сразу множество товарных позиций на склад через заранее подготовленный файл Excel.

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

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

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

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

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

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

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

Особенности реализации раздела:

• Интерфейс требовал высокой отзывчивости и понятной навигации — была реализована система табов и фильтрации для удобной работы с большим количеством позиций.
• Раздел строился как модульная система с возможностью переиспользования компонентов;
• Данные сегментировались по активному аккаунту и автоматически сбрасывались при переключении профиля.

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

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

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

• Добавление позиций: покупатель может добавлять товары в корзину и изменять количество добавляемого товара перед добавлением, товары из предложения добавляются в том количестве, которое было указано продавцом при создании предложения.
• Редактирование содержимого: можно менять количество товаров со склада и удалять добавленные заказы.
• Проверка актуальности: при каждом изменении система автоматически сверяет остатки и статус товаров, блокируя недоступные позиции и информируя пользователя о внесённых изменениях.
• Просмотр заказа: покупатель может просмотреть список товаров, которые были добавлены из предложения, перед оформлением заказа.
• Оформление заказа: при переходе к оформлению система подтягивает данные профиля, позволяет выбрать способ доставки («Самовывоз» или «Доставка до ПВЗ») и рассчитывает итоговую сумму.
• Сохранение состояния: данные корзины сохраняются локально и на сервере, что позволяет пользователю продолжать оформление даже после выхода из аккаунта или переключения между ролями.
• Контроль остатков
• Веб-версия поддерживает автоматическую синхронизацию остатков. После оформления заказа количество товара на складе продавца уменьшается автоматически.
• Если товар заканчивается, он остаётся активным в течение 30 дней, после чего переносится в архив и помечается как «Нет в наличии». Это исключает возможность добавления таких позиций в корзину или оформление заказа.
• Если предложение по заявке было снято продавцом, товар в корзине помечается как недоступный и может быть только удалён покупателем из корзины.
• Особенности реализации:

Корзина синхронизируется с backend и хранением в браузере, обеспечивая единое состояние между вкладками;

Реализована автоматическая проверка доступности при каждом обновлении страницы;

Используется кэширование и оптимизация рендеринга списков для мгновенного отклика интерфейса;

Применено ленивое обновление данных (lazy refresh), позволяющее не перезагружать весь список при изменении одной позиции.

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

Просмотр активных, завершённых и отменённых заказов для покупателя и продавца;

Детальная карточка заказа со статусом, суммой, списком позиций и действиями по ролям;

Подтверждение получения товара при самовывозе и загрузка ТТН при доставке для Продавца;

Автоматическое обновление статусов через интеграцию с API транспортных компаний;

Уведомления о ключевых изменениях и изменении этапов выполнения заказа.

• Реализованы два способа доставки:

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

Доставка до ПВЗ — продавец указывает транспортную компанию, трек-номер и стоимость доставки. При изменении статуса на стороне перевозчика система автоматически обновляет данные на платформе без участия пользователя.

• Для предотвращения зависших заказов реализована система автоотмены. Заказ переходит в статус «Отменён», если:

продавец не загрузил данные об отправке в срок;

покупатель не оплатил заказ по счёту в течение 3 дней;

товар не забран при самовывозе — в течение 5 дней;

заказ не получен при доставке — в течение 7 дней.

• Особенности веб-реализации:

Гибкая логика группировки заказов по продавцам и ролям пользователей;

Автоматическая синхронизация с разделами «Корзина», «Склад» и «Заявки» — резервирование и списание остатков выполняются в реальном времени;

Обновление статусов и уведомлений через WebSocket без перезагрузки страницы;

Реализована визуальная шкала прогресса заказа с отображением этапов (оформление → оплата → отгрузка → получение);

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

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

Информация: просмотр и редактирование данных профиля — название организации, ИНН, реквизиты, контактная информация.

Техника: управление карточками техники, добавление новых, редактирование и удаление существующих.

Мой рейтинг: отображение рейтинга и отзывов других пользователей по завершенным заказам.

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

Техническая поддержка: создание обращений в службу поддержки с возможностью прикрепления файлов. Запрос отправляется на почту технической поддержки.

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

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

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

• Разделение по типам пользователя:

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

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

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

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

• Партнёрская программа
• Пользователь получает уникальный промокод, который может передавать новым участникам. После регистрации по этому коду и оформления первого заказа рефералом пригласившему пользователю начисляется 1% от суммы заказа на внутренний баланс. Начисления видны в разделе «Баланс» и могут быть выведены на карту для ФЛ или на расчетный счет для ЮЛ и ИП.
• Запросы на вывод направляются в административную панель и обрабатываются сотрудником поддержки.
• Чаты
• Раздел «Чаты» в веб-версии служит для прямого общения между продавцами и покупателями, обеспечивая быстрый обмен сообщениями по заявкам, товарам и заказам. Это помогает ускорить согласование условий и повысить прозрачность взаимодействия.
• Основной функционал:

Диалоги, привязанные к конкретным заявкам, товарам или заказам;

Просмотр полной истории переписки, включая завершённые сделки;

Уведомления о новых сообщениях и непрочитанных диалогах;

Переход в чат напрямую из карточки заявки или заказа.

• Особенности веб-реализации:

Реализация через WebSocket для обновления сообщений в реальном времени;

Чаты интегрированы в общую систему аккаунтов и ролей — при переключении контекста загружаются соответствующие переписки;

при разработке пришлось учитывать сложность идентификации участников: сообщения формируются с учётом активного аккаунта и его роли (продавец или покупатель);

Кэширование истории чатов и оптимизация рендеринга длинных переписок;

Реализация защиты от повторной отправки сообщений и обработки ошибок соединения.

• Уведомления
• Раздел «Уведомления» в веб-версии обеспечивает оперативное информирование пользователей о действиях, связанных с заказами, заявками, товарами и сообщениями. Он помогает не пропускать важные события и быстро реагировать на изменения.
• Основной функционал:

Уведомления о ключевых событиях: новые заявки, отклики, обновления заказов, сообщения в чатах, изменения по товарам;

Разделение уведомлений по ролям (покупатель / продавец);

Индикатор новых уведомлений в шапке сайта;

Просмотр и фильтрация уведомлений по типам событий;

Статусы «прочитано / непрочитано» и возможность очистки списка.

• Особенности веб-реализации:

Обновление уведомлений в реальном времени через WebSocket;

Автоматическая группировка и сортировка по времени и типу;

Синхронизация между вкладками и устройствами.

• Общедоступная часть
• Общедоступная часть платформы предназначена для неавторизованных пользователей и выполняет роль витрины маркетплейса, предоставляя открытый доступ к основному контенту. Она позволяет любому посетителю ознакомиться с ассортиментом товаров и заявок, изучить предложения и перейти на детальные страницы, что стимулирует регистрацию новых пользователей и рост вовлечённости.
• В этой секции реализован полный каталог товаров и активных заявок, размещённых на платформе, с возможностью перехода на отдельные страницы для получения детальной информации. Для удобства пользователей внедрены инструменты фильтрации и поиска, которые помогают быстро находить нужные позиции по различным параметрам — категории, цене, региону и другим характеристикам.
• Работа с SEO
• Для повышения видимости платформы в поисковых системах была реализована комплексная SEO-оптимизация, охватывающая товары, заявки и главную страницу. Основной задачей стало упрощение процесса настройки метаданных для продавцов и обеспечение единообразной оптимизации всего контента.
• Мы внедрили автоматизированные SEO-шаблоны, которые формируют метатеги title, description и keywords на основе данных о товаре: названия и города. При создании карточки продавцу достаточно заполнить базовую информацию — система сама генерирует релевантные метаданные.
• Такой же подход применён и при импорте товаров через Excel: информация подставляется автоматически, что позволяет оптимизировать сотни позиций за один раз без ручной работы.
• В то же время пользователь может при необходимости вручную задать собственные заголовки, описания и ключевые слова, как при создании товара, так и при заполнении данных в Excel-таблице перед импортом.
• Для улучшения индексации каждая карточка товара получает уникальный URL с названием и категорией, а также дополняется разметкой schema.org, включающей название, описание и цену товара. Это повышает видимость карточек в поисковой выдаче и делает сниппеты более привлекательными. Страницы заявок также оптимизированы за счёт динамически генерируемых метатегов и структурированных данных, повышающих их релевантность. Главная страница сайта для неавторизованных пользователей получила уникальные метатеги, корректные H1-заголовки, ключевые слова, связанные с автозапчастями и техникой, а также оптимизированный контент для быстрой загрузки.
• Использование Server-Side Rendering (SSR) обеспечило генерацию готового HTML на сервере, что улучшило индексацию страниц поисковыми системами и сократило время первой отрисовки. Клиентский рендеринг применялся для динамических интерфейсных элементов и обновления данных в реальном времени без полной перезагрузки страницы.
• Автоматизация SEO-процессов позволила сократить ручной труд продавцов, обеспечить единообразие и актуальность метаданных, улучшить индексацию страниц и повысить видимость платформы в поисковых системах, что способствовало росту органического трафика и привлечению новых клиентов.
• Внедрение тестирования для обеспечения надежности
• В условиях постоянных итераций и регулярных доработок по запросам заказчика критически важно было обеспечить стабильность и предсказуемость работы приложения. Любая ошибка могла затронуть ключевые сценарии пользователей, поэтому мы внедрили многоуровневую стратегию тестирования, охватывающую UI, бизнес-логику и интеграционные сценарии.
• 1. Мы начали с внедрения Storybook для изолированной разработки и документирования компонентов. Это позволило:

Разрабатывать и тестировать UI-элементы в отрыве от всего приложения;

Быстро находить и фиксировать визуальные дефекты;

Упростить процесс согласования компонентов с командой и заказчиком.

• 2. Основным инструментом визуального тестирования стал Creevey. После каждого коммита система автоматически делала скриншоты всех ключевых компонентов и сравнивала их с эталонными.

Любые отличия фиксировались мгновенно;

Визуальные баги, которые легко пропустить при ручном тестировании, стали заметны сразу;

Это особенно важно в проекте с динамично меняющейся версткой и частыми изменениями функционала.

• 3. Для проверки критически важной бизнес-логики мы внедрили юнит-тестирование с использованием Jest.

Тестировались хелперы и утилиты, отвечающие за валидацию данных, работу с ролями, преобразование форматов;

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

• 4. Чтобы гарантировать работоспособность приложения в реальных условиях, мы настроили E2E-тесты на Cypress.

Тесты имитировали действия пользователя в полном цикле — от авторизации до завершения бизнес-процесса;

Такой подход позволял выявлять не только баги на уровне UI, но и проблемы интеграции между модулями.

• Внедрение этого комплекса тестов позволило быстро вносить правки, не боясь сломать уже работающих функционал.
• Возникшие трудности
• Несмотря на готовность API, на стороне фронтенда типизация была слабой и зачастую не соответствовала реальным данным, возвращаемым с сервера. Это приводило к runtime-ошибкам и необходимости писать избыточные проверки.
• Функциональные требования часто менялись и расширялись уже в процессе разработки. Ключевой пример — идея с поддержкой нескольких аккаунтов, которую пришлось реализовывать "поверх" уже готовой логики, что потребовало масштабных правок практически во всех модулях приложения (синхронизация между вкладками, управление кэшем, ролевая модель).
• Внедрение нового функционала, такого как поиск в выпадающих селекторах, часто затрагивало фундаментальные компоненты и требовало непропорционально больших усилий из-за изначальной жесткой связанности кода.

3. Результаты сотрудничества

В результате наша команда успешно разработала и запустила полноценное веб-приложение. Проект был реализован в сжатые сроки благодаря повторному использованию готового и стабильного backend-API.

Ключевые достижения:

• Полная функциональная идентичность с мобильным приложением: все сложные сценарии работы с аккаунтами, ролями, заявками и складом реализованы в вебе.
• Высокая производительность: внедренные оптимизации (кэширование, декомпозиция, адаптеры списков) обеспечили плавную работу интерфейса даже с большими объемами данных.
• Готовность к SEO-продвижению: все ключевые страницы оптимизированы для поисковых систем, что открыло для клиента новый канал привлечения трафика.
• Масштабируемая архитектура: проведенный рефакторинг и выстроенные процессы разработки заложили основу для будущего развития проекта без накопления технического долга.

Уже после запуска платформы на ней начали активно работать продавцы и покупатели. Многие продавцы загрузили на склад тысячи товарных позиций (некоторые — более 3000), что подтвердило надежность и удобство реализованного механизма массового импорта и управления каталогом.

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

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

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