Маркетплейс автомобилей

Маркетплейс авто — Vue 3 SPA с realtime-поиском, внешними аукционными источниками и алертами о снижении цены.

Vue 3webedge-dbSearch

Dev-story

Задача

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

Что делали

Одна Vue 3 + Vite SPA (без Nuxt/SSG) с webedge-db для базы, realtime-запросов, полнотекстового поиска и файлового хранилища; зоны покупателя, продавца и админки в том же приложении, плюс конфигурируемые адаптеры, тянущие внешние аукционные источники, VIN-сигналы доверия, историю цен с алертами о снижении и переписку покупатель–продавец.

Результат

Это стало базой, из которой построены другие маркетплейсы WebEdge (house, service, classifieds).

Dev-story статья

Маркетплейс автомобилей: как создавался проект

У площадки подержанных авто три аудитории, под которые обычно делают три отдельных приложения: покупатели, листающие объявления, продавцы, управляющие своим товаром, и админы, модерирующие всё. Мы хотели собрать их в одном SPA с одним реактивным бэкендом, чтобы смена цены или новая ставка появлялись вживую, без опроса и без второй кодовой базы. Сложность была в том, чтобы сделать это на обычной статической сборке Vue + Vite, без SSR, сохранив позицию прокрутки листинга, фильтры и быстрый поиск при реальном трафике.

Разделы

Модули

Стек

Vue 3 + webedge-db

Почему появился проект

Что было создано

Это одностраничное приложение на Vue 3 + Vite поверх webedge-db (нашего реактивного бэкенда) для базы, realtime-запросов, полнотекстового поиска и хранения файлов, а аутентификацию ведёт BetterAuth. Одно и то же приложение обслуживает публичную площадку, зону продавца /dashboard и зону модерации /admin как SPA с per-route оболочками, генерируемыми на этапе сборки. Помимо классических объявлений оно ведёт и внутренний аукционный поток с realtime-обратным отсчётом, ставками и buy-now.

Основные модули и путь пользователя

M01

Адаптеры внешних источников аукционов, управляемые конфигом: три пути чтения (партнёрский JSON API, ToS-ограниченный read-only парсинг публичного HTML, mock-фикстуры), чтобы новый источник требовал конфига, а не кода, плюс реестр ADAPTERS для источников со своей пагинацией или ставками

M02

Вежливый к rate-limit read-only адаптер, который парсит schema.org JSON-LD со статических страниц деталей, уважает правила robots и останавливается на первом сигнале троттлинга, а не обходит анти-бот проверки

M03

VIN-сигналы доверия, история цен и оповещения о снижении цены с фильтрами по VIN и падению цены в списке объявлений

M04

Переписка покупатель-продавец с ответами продавца и Telegram-бот, подключённый через webhook с проверкой секретного токена и cron каждые 5 минут для аукционных оповещений

M05

Переход от прямых запросов к реактивному бэкенду на TanStack Vue Query для кэширования и постраничной загрузки листингов, с отключением запросов при HMR и снижением нагрузки запросов, чтобы убрать рывки при обновлении фильтров

Архитектура и технологические решения

Сделано на Vue 3, webedge-db, Search.

Vue 3 + Vite SPA (без Nuxt и SSG) на Cloudflare Pages, где webedge-db даёт realtime-запросы, поиск и хранилище, BetterAuth ведёт сессии, TanStack Vue Query работает на клиенте, а шаг сборки пишет лёгкие per-route HTML-оболочки, чтобы SPA-маршруты резолвились на статическом хостинге. Агрегацию внешних аукционов в итоге сузили до только локальных объявлений; код адаптеров остаётся спящим за конфигом.

Результат и выводы

Это стало базой, из которой построены другие маркетплейсы WebEdge (house, service, classifieds).

Одно приложение, которое держит покупателя, продавца и админа синхронно в realtime, и стало движком, от которого отпочковались остальные площадки WebEdge.