Как я собрал каталог на 2000 авто из Китая в одиночку

Расскажу про проект, которым я занимался от начала и до запуска в одиночку. Называется он WeToCar — это витрина автомобилей из Китая. Меня зовут Чимитдоржи Дарижапов, я делаю сайты и сервисы под задачи бизнеса, и этот кейс хорошо показывает, как обычную «нам нужен сайт с машинами» превращают в работающий инструмент, который не сжирает всё время владельца на ручное обновление данных. Здесь я честно опишу задачу, решение, стек, сложности и то, что сделал бы иначе. Никаких выдуманных цифр про выручку и продажи — только то, что реально было в работе.

Задача заказчика

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

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

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

Что я сделал

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

Автоматическая подгрузка данных. Вместо ручного ведения позиций каталог обращается к внешнему API поставщика данных об автомобилях (auto-api). Оттуда приходят марки, модели, характеристики, изображения и базовые цены. Задача сайта — забрать эти данные, привести их к единому виду, сохранить в свою базу и показать пользователю. Когда у источника что-то меняется, каталог обновляется без того, чтобы кто-то руками правил тысячи строк.

Расчёт итоговой стоимости. Это, пожалуй, самая ценная для бизнеса часть. Цена авто у поставщика — это ещё не то, что заплатит клиент. К ней добавляются расходы на логистику и таможенные платежи. Я сделал так, чтобы для каждой машины считалась финальная цифра: стоимость авто плюс доставка плюс таможня. Человек не гадает и не пишет менеджеру «а сколько выйдет с растаможкой» — он сразу видит итог в карточке.

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

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

Ниже — короткая сводка, как задачи заказчика легли на конкретные решения в каталоге.

Стек и архитектура

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

Next.js 15. Это фреймворк для сайтов на JavaScript. Мне он нужен по двум причинам. Первая — скорость страниц: Next.js умеет отдавать готовую HTML-страницу, а не заставлять браузер собирать её с нуля, поэтому каталог открывается быстро даже на большом количестве машин. Вторая — SEO, то есть видимость в поисковиках. Для витрины, куда клиенты приходят по запросам вроде «купить такую-то марку из Китая», важно, чтобы страницы хорошо индексировались. Next.js отдаёт поисковику полноценную страницу с содержимым, а не пустой каркас, и это напрямую влияет на то, найдут вас люди или нет.

Prisma 6. Это инструмент для работы с базой данных, так называемый ORM. База нужна, чтобы хранить у себя все машины, их характеристики и посчитанные цены, а не дёргать внешний API на каждый чих. Prisma позволяет описывать структуру данных понятным образом и обращаться к базе из кода без ручного написания сложных запросов. Проще говоря, Prisma — это прослойка, которая делает работу с базой предсказуемой и аккуратной, а значит, меньше ошибок и меньше сюрпризов на проде.

Интеграция с внешним API. Источник данных об авто — внешний сервис auto-api. Схема такая: каталог обращается к этому API, получает данные, обрабатывает их и складывает в собственную базу через Prisma. То есть внешний API — это первоисточник, а моя база — актуальная копия, из которой быстро строятся страницы. Такой подход даёт устойчивость: если у источника временные проблемы, сайт всё равно показывает последние сохранённые данные, а не падает.

Хостинг Beget. Запущено всё на Beget. Это рабочий вариант размещения для проекта такого масштаба — предсказуемо и без лишней возни с инфраструктурой.

Архитектурно получается связка: внешний API как источник, база данных как хранилище, Prisma как слой доступа к данным, Next.js как то, что превращает данные в быстрые страницы с фильтрами и карточками. Всё это я собрал и связал сам. Тем, кому интересно, как подобные проекты доводятся до запуска, я отдельно разбирал путь от MVP до продакшена.

Что было сложно

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

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

Неполные данные. Внешний источник — это всегда лотерея по качеству. У одной машины нет части характеристик, у другой странно оформлены фотографии, у третьей чего-то не хватает в описании. Каталог не должен из-за этого ломаться или показывать пустые дыры. Пришлось закладывать обработку таких случаев: где-то подставлять разумные значения по умолчанию, где-то аккуратно скрывать пустые поля, чтобы карточка выглядела прилично при любых входных данных.

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

Производительность каталога. Две тысячи машин с фотографиями и фильтрами — это нагрузка. Нужно, чтобы список открывался быстро, фильтры срабатывали без задержек, а страницы не тормозили. Здесь помогло то, что данные лежат в собственной базе и отдаются через быстрый серверный рендеринг Next.js, а не собираются на лету из внешнего API.

Что получилось

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

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

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

Что бы сделал иначе

Здесь без прикрас, чисто технические рефлексии — то, о чём думаешь уже после запуска.

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

Обработка ошибок API. Внешний источник живёт своей жизнью: может отвечать медленно, отдавать неполный ответ или временно быть недоступным. Стоит с первого дня относиться к этому как к норме, а не как к исключению — предусматривать повторные попытки, аккуратные таймауты и понятное поведение, когда данные не пришли. Это делает синхронизацию надёжнее и избавляет от неприятных сюрпризов.

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

Ни одна из этих вещей не мешает проекту работать сейчас — это скорее заметки на будущее, которые сделали бы систему ещё крепче при росте ассортимента. Кстати, вопрос «во сколько обходятся такие доработки» я разбирал отдельно в материале о том, сколько стоит сайт.

Частые вопросы

Сколько времени занимает такой каталог? Зависит от объёма и того, насколько «чистые» данные отдаёт источник. Основное время уходит не на витрину, а на стабильную синхронизацию с внешним API и обработку неполных данных. По срокам под вашу задачу отвечу после короткого разговора.

Можно ли подключить другой источник данных, не auto-api? Да, архитектура не привязана к одному поставщику. Если у выбранного источника есть API или структурированная выгрузка, интеграцию можно настроить под него.

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

Коротко о главном

WeToCar — это пример того, как задача «продавать авто из Китая» решается не ещё одной ручной таблицей, а живой витриной с автоподгрузкой. Каталог примерно на две тысячи машин сам тянет данные из внешнего API, считает итоговую стоимость с логистикой и таможней, даёт фильтры по марке, модели, цене и характеристикам и показывает карточки с галереями. Под капотом — Next.js 15 ради скорости и SEO, Prisma 6 для аккуратной работы с базой, интеграция с auto-api как источником данных и запуск на Beget. Всё это я собрал один, от архитектуры до деплоя.

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