Идея и задача
MERA — интернет-магазин одежды. Задача: спроектировать и собрать на современном стеке e-commerce — от дизайн-концепции и архитектуры до деплоя: коммерческое ядро, управляемый контент, российские платёжные и логистические интеграции. Каталог — около 1 000 товаров, 5 000 SKU.
Как работает магазин
Умный поиск
Поиск отвечает прямо по мере ввода и понимает опечатки: «пальто альпка» находит пальто из альпаки, «кашимир» — джемпер из кашемира. Ищет по цвету и материалу, знает синонимы (пиджак ↔ жакет) и показывает в выдаче не только товары, но и статьи журнала.
Технически: Meilisearch с настроенными весами полей, стоп-словами и словарём синонимов. Товары и статьи ищутся одним запросом, цены и наличие подтягиваются из Medusa в момент показа, индекс обновляется вебхуками. Если поисковый движок недоступен, витрина автоматически переключается на поиск Medusa.
Каталог с фильтрами
Фильтры по цене, материалу, посадке, размеру и цвету со счётчиком товаров у каждого значения. Выбранные параметры видны плашками, а отфильтрованную подборку можно отправить ссылкой.
Технически: Store API Medusa не умеет фасеты и фильтр по цене, поэтому витрина держит компактный снимок каталога с инвертированным индексом. Архитектура рассчитана на каталог до 50 000 SKU, для фильтрованных страниц настроена отдельная SEO-политика.
Карточка товара и варианты
Цветные свотчи с заменой фото, недоступные размеры перечёркнуты, размеры с последним экземпляром отмечены, таблица размеров открывается в окне.
Технически: размер и цвет — опции товара в Medusa, остатки берутся из складского учёта Medusa в реальном времени.
Образы: весь комплект одной кнопкой
Готовые комплекты из нескольких вещей с ценой «Образ целиком». Покупатель выбирает размер для каждой вещи и добавляет весь образ в корзину одним действием — это работает на средний чек.
Технически: образы собирает контент-менеджер в Payload; CMS проверяет, что каждый товар существует в Medusa, а корзина добавляет позиции пакетом и сообщает, если какой-то вещи нет в наличии.
Корзина, промокоды и бесплатная доставка
Полоса «До бесплатной доставки осталось …» подталкивает добрать до порога 15 000 ₽, промокоды применяются прямо в корзине.
Технически: порог и промокоды — акции в модуле промо Medusa, без доработок ядра: маркетолог меняет условия в админке.
На телефоне
Фильтры, карточка товара и поиск адаптированы под мобильный сценарий покупки.
И ещё
- Личный кабинет: адреса, история заказов; гостевая покупка без регистрации.
- Журнал на Payload с живым предпросмотром, статьи участвуют в поиске.
- SEO: sitemap товаров, категорий и статей, микроразметка товаров, правила индексации фильтров.
- Нагрузочные сценарии k6 и деплой одной командой.
Админка: как магазином управляют
Два понятных интерфейса вместо одного перегруженного: коммерция — в Medusa, контент — в Payload. Менеджер работает с товарами, акциями и текстами сам, без разработчика.
Товары, варианты и остатки
Карточка товара с опциями «Цвет» и «Размер», тегами для фильтров каталога и коллекциями. У каждого варианта свой SKU и остаток на складе — витрина сама показывает, каких размеров нет и где остался последний экземпляр.
Акции и промокоды
Бесплатная доставка от порога — это автоматическая акция Medusa: условия и сроки меняются в админке, без правок кода.
Образы, журнал и главная
Образ собирается из товаров каталога, CMS проверяет, что каждый товар существует. Статьи журнала — с живым предпросмотром, историей версий и SEO-вкладкой. Тексты главной редактируются построчно.
Архитектура и стек
Монорепозиторий (pnpm + Turborepo, TypeScript) из двух приложений. Medusa 2 отвечает за товары, цены, остатки, заказы и акции. Next.js 16 с Payload CMS 3 отвечает за витрину и контент. Правило границы: коммерческие данные принадлежат Medusa, контент — Payload, связь только по handle товара. Для фасетных фильтров, которых нет в Store API, витрина держит компактный снимок каталога в памяти с инвертированным индексом; кэш сбрасывается вебхуками при изменении товаров. Прод: Docker, nginx с TLS и rate limit, две PostgreSQL, Redis, Meilisearch, деплой одной командой со скриптом.
Интеграции
- ЮKassa: собственный платёжный провайдер Medusa без сторонних SDK. Статусу из вебхука не доверяю на слово: провайдер перечитывает платёж через API ЮKassa и по нему определяет результат.
- СДЭК: собственный провайдер доставки. Расчёт по тарифам маршрута, доставка в ПВЗ, постамат или курьером, выбор пункта на Яндекс.Картах.
- МойСклад: синхронизация каталога, вариантов и остатков в Medusa. Идемпотентный upsert: повторный запуск не создаёт дублей, а при ошибке в данных импорт останавливается целиком, чтобы на витрину не попали частичные данные.
Производительность
Google PageSpeed Insights, десктоп: производительность, доступность, рекомендации и SEO — 100/100/100/100.
Мобильная версия: 92/100/100/100.
Моя роль
Проект сделан мной целиком: дизайн-концепция, архитектура, витрина, бэкенд, интеграции и деплой. Ключевые технические решения — разделение коммерческих данных и контента между Medusa и Payload, собственные провайдеры оплаты и доставки, индекс для фасетных фильтров, схема синхронизации со складом — принимал и реализовывал сам. AI-инструменты использую как ускоритель рутины: шаблонный код, проверка гипотез, тесты. Проектирование, архитектура и контроль качества остаются за мной.
Результат
Магазин с полным циклом: каталог, корзина, оплата через ЮKassa, расчёт доставки СДЭК с выбором пункта на карте, личный кабинет, админки контента и commerce.
