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

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

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

Ассортимент включает:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

Для повышения видимости платформы в поисковых системах была реализована комплексная 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, но и проблемы интеграции между модулями.

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

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

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

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

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

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

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

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