Storefront в MedusaStore называется StudioPro. Это shopper-facing приложение на Next.js 15.3.9, React 19, Medusa SDK/UI и Tailwind — та часть проекта, где покупатель уже не думает о backend, SDK и CMS, а просто выбирает предложение, читает детали, кладёт товар в корзину и доходит до checkout. Его задача — показать магазин не как абстрактный starter, а как бизнес-витрину с каталогом, офферами, checkout, аккаунтом, отзывами и контентными страницами.
Брендовая формула StudioPro звучит спокойно: «Премиальные сайты для бизнеса. Без лишних переплат». Она задаёт тон интерфейса: не маркетплейс с шумной сеткой, а сервисная витрина для бизнеса, где интерфейс должен объяснять продукт, не перегружая человека лишним шумом.
Визуальный язык
Дизайн строится вокруг premium-business подачи:
- тёплый фон вместо холодной SaaS-белизны;
- графитовая типографика;
- глубокий синий как основной акцент доверия;
- teal-акцент для действий и выделений;
- карточки предложений;
- заметные CTA;
- блоки процесса работы;
- спокойная плотность интерфейса без ощущения demo-template.
Для портфельного проекта это важнее, чем кажется. Storefront показывает не только умение подключиться к Medusa, но и способность собрать коммерческую подачу: объяснить продукт, провести пользователя по маршруту и не утонуть в стандартных storefront-компонентах. Витрина здесь работает как «лицо» всей системы: backend отвечает за данные и операции, а UI превращает их в понятный для покупателя сценарий.
Routes и покупательский путь
Если смотреть глазами покупателя, витрина — это не набор страниц, а маршрут: сначала понять, что предлагает магазин, затем сравнить варианты, открыть детали, собрать корзину, оформить заказ и при необходимости вернуться в аккаунт. Поэтому StudioPro включает основные зоны:
- catalog routes;
- product details;
- cart;
- checkout;
- account;
- reviews;
- news/content pages;
- static contacts.
Catalog и product details обращаются к Medusa как commerce source of truth: именно там витрина берёт товары и коммерческие данные, которые покупатель видит в карточках и деталях. Cart и checkout используют прямые Store API endpoints, потому что на этих шагах интерфейс уже работает не с «контентом о магазине», а с заказом. Content routes могут читать Payload, но только если включён PAYLOAD_ENABLED; иначе они должны корректно уходить в fallback или not-found.
Checkout и аккаунт
Checkout — центральная проверка зрелости storefront. До него можно красиво показать каталог и контент, но именно оформление заказа показывает, насколько UI связан с backend-контрактами и насколько аккуратно обработаны реальные пользовательские состояния. В MedusaStore checkout не должен зависеть от CMS и не должен считать optional-интеграции обязательными. Базовый checkout работает через Store API, а платежи и доставка подключаются opt-in.
VK ID onboarding добавляет отдельный крайний случай: если вход через VK ID не даёт обычный email, появляется placeholder email. Поэтому checkout gate должен честно проверять, хватает ли данных для заказа, а не считать OAuth-login полноценным покупательским профилем автоматически.
Account routes нужны для post-purchase сценариев и пользовательской зоны: покупатель должен иметь место, куда можно вернуться после заказа. Их ценность становится выше, когда рядом есть отзывы, уведомления и маркетинговые preferences — то есть не только факт покупки, но и дальнейшее взаимодействие с магазином.
Reviews как часть доверия
В проекте есть полноценная зона отзывов:
- публичные reviews;
- rating summary;
- helpful votes;
- image uploads;
- moderation;
- admin widgets/routes;
- transactional moderation emails.
Это хороший пример функции, которая выглядит «маленькой» в UI, но требует backend-процессов и операционной поддержки. Для покупателя отзыв — часть доверия к карточке и магазину; для системы — цепочка состояний. Его нужно принять, проверить, показать, дать пользователям голосовать за полезность и уведомить участников процесса.
Presets atelier и market
Storefront поддерживает presets atelier и market, которые выбираются через NEXT_PUBLIC_STOREFRONT_PRESET. Это делает основу гибче: один и тот же runtime можно подстраивать под более сервисную или более торговую подачу, не перепридумывая заново покупательский путь и связь с backend.
Важно, что presets не должны превращаться в хаотичную тему «всё обо всём». Хороший preset меняет акценты и композицию, но сохраняет общий контракт routes, checkout, CMS и commerce API.
Production-readiness gap
У storefront есть честный риск: build сейчас игнорирует ESLint и TypeScript build errors. Для staging это может быть терпимым временным решением, если нужно быстро проверить runtime, но для production это gap. В интерфейсном слое такие ошибки особенно неприятны: внешне страница может выглядеть готовой, а проблема проявится только на конкретном шаге маршрута покупателя.
Перед production нужно вернуть строгую сборку или как минимум разделить временный staging bypass и production gate. Иначе типовая ошибка в checkout, account или API client может пройти в релиз как «зелёный build».
В этом MedusaStore похож на другие широкие проекты сайта: как и в Audio Scribe, production-readiness определяется не только наличием экранов, но и качеством runtime-контракта, проверок и отказоустойчивости. Главная мысль простая: StudioPro ценен не как набор красивых страниц, а как слой, который соединяет товары, контент, checkout и пользовательский маршрут в одну понятную витрину.