Кейс: E-commerce

Інтернет-магазин Atlas

Повноцінний e-commerce за 4 дні для нішевого ринку, де заблоковані всі рекламні канали. Headless архітектура, Нова Пошта, накладений платіж.

Atlas — інтернет-магазин машинок для набивки гільз
4
дні розробки
31+
сторінок
10K+
рядків коду
119
тестів

Задача

Клієнт — ФОП, продавав товари через Prom.ua. Акаунт заблокували через обмеження платформи для цієї ніші. Google Ads, Facebook, Instagram — теж заблоковані. Єдиний стабільний канал залучення клієнтів — SEO.

Потрібен був повноцінний інтернет-магазин з каталогом 15+ товарів, кошиком, оформленням замовлення через Нову Пошту, оплатою накладеним платежем та передоплатою на картку. І все це — якнайшвидше.

Обмеження: жодної реклами. Сайт має продавати через органічний пошук — тому SEO-оптимізація була не «бонусом», а ключовою вимогою з першого дня.

Рішення

Headless e-commerce: Next.js 16 (фронтенд) + Medusa.js 2 (бекенд). Це не Shopify і не WooCommerce — повний контроль над кодом, дизайном і SEO. Жодних обмежень платформи.

🛒

Каталог і кошик

Категорії з фільтрами, сортування, картки товарів з фото, старою/новою ціною, бейджами наявності. Zustand для кліентського кошика.

📦

Нова Пошта

Інтеграція з API: автокомпліт міст, вибір відділення/поштомату/адреси. 3 варіанти доставки.

💳

Оплата

Накладений платіж (НП) або передоплата на картку (IBAN). Кастомні payment-провайдери в Medusa.

📱

Telegram-нотифікації

Замовлення миттєво падає в Telegram власнику: товари, сума, контакти клієнта, спосіб оплати.

🔍

SEO з першого дня

JSON-LD (Product, Organization, FAQ), динамічний sitemap, ISR кешування, мета-теги на кожній сторінці.

⭐

Відгуки з модерацією

Гостьові відгуки без реєстрації. Rate-limiting 5/год. Адмін-панель модерації для власника.

📊

Калькулятор економії

Інтерактивний віджет на головній: показує місячну/річну економію в реальному часі.

🔞

Вікова перевірка

Age gate 18+ на вході. Не блокує SEO-краулери — Google індексує контент нормально.

Технічний стек

  • Frontend: Next.js 16, TypeScript, Tailwind CSS v4, shadcn/ui, Zustand
  • Backend: Medusa.js 2.13, PostgreSQL 15, Redis 7
  • Кастомні модулі: Nova Poshta fulfillment, COD payment, Card prepayment
  • Інтеграції: Telegram Bot API, GA4, Microsoft Clarity, Cloudflare R2
  • Тести: Vitest + Testing Library (119 assertions)
  • Деплой: Vercel (фронтенд, безкоштовно) + Hetzner VPS (бекенд, €4.51/міс)

Конверсійна стратегія

Кожна секція головної побудована за моделлю AIDA:

A

Attention — біль клієнта

Hero з конкретною проблемою: «Чому платити 85 грн за пачку, коли можна 15?»

I

Interest — калькулятор

Інтерактивний калькулятор економії. Клієнт бачить цифру — скільки зекономить за місяць і рік.

D

Desire — довіра

Trust-блоки: Нова Пошта, гарантія повернення, відгуки, покрокова інструкція для новачків.

A

Action — CTA

Кнопки «Додати в кошик», стартові набори, cross-sell на сторінках товарів.

Чому не Shopify

Shopify — це чудово для звичайних магазинів. Але тут інша ситуація:

  • Ніша з обмеженнями — Shopify може заблокувати акаунт за порушення їхніх Terms of Service
  • Нова Пошта — кастомна інтеграція, а не плагін з обмеженнями
  • SEO-контроль — повний контроль над meta-тегами, structured data, sitemap, robots.txt
  • Вартість — €4.51/міс проти $29+/міс за Shopify, без комісії з транзакцій
  • Власність — код 100% клієнта, не залежить від платформи
Результат: повноцінний інтернет-магазин за 4 дні розробки. 31+ сторінка, мобільна адаптація, SEO-оптимізація, тести — все готове до запуску.