Розробка e-commerce платформи для Buy

Buy — національна e-commerce платформа Вірменії, яка поєднує в собі онлайн-замовлення з ресторанів, магазинів, аптек та інших партнерів. Клієнти можуть оформити доставку їжі, щоденних товарів і техніки в кілька кліків, а бізнеси — отримати зручний канал онлайн-продажів. Для промоакцій активно залучаються банківські партнери (наприклад, VISA) та кешбек-програми, що додатково стимулює лояльність користувачів.

На момент звернення до Promodex у Buy вже був базовий онлайн-магазин, але він не витримував зростаючого навантаження і не відповідав сучасним очікуванням користувачів: повільний рендерінг, обмежені можливості аналітики, складна авторизація та неідеальна мобільна версія. Завданням команди стала повна переосмислена розробка фронтенду й архітектури з нуля на сучасному стеку React + Next.js із фокусом на швидкість, стабільність і масштабованість.

Вихідні дані та цілі проєкту

Платформа Buy працює з великою кількістю партнерів: мережеві ресторани, локальні кафе, продуктові магазини, аптеки та retail-бренди. Щодня на сайті відбуваються тисячі пошуків, переглядів меню, додавань у кошик і оформлень замовлень. Попереднє технічне рішення ускладнювало розвиток:

• сторінки вантажилися повільно, особливо на мобільних пристроях та при пікових навантаженнях;
• каталоги ресторанів і акцій було важко масштабувати та підтримувати;
• авторизація та кабінет користувача не відповідали сучасним вимогам безпеки;
• інструменти аналітики були розрізненими й не давали цілісної картини поведінки користувачів;
• бракувало SEO-підготовки: Open Graph, canonical, schema.org, коректних sitemap-структур.

Разом із командою клієнта ми сформулювали ключові цілі:

• розробити високопродуктивний інтернет-магазин на Next.js 15.2.4 з SSR/ISR-рендерінгом;
• створити адаптивний UI на базі MUI з єдиною дизайн-системою та кастомними компонентами;
• впровадити безпечну авторизацію NextAuth.js з підтримкою email/соцмереж і двофакторного входу;
• налаштувати комплексну аналітику: Google Analytics 4, Microsoft Clarity, Facebook Pixel, GTM;
• інтегрувати Cloudflare CDN і HTTP/3 для прискорення завантаження та захисту платформи;
• оптимізувати SEO й соціальний шейрінг за допомогою Open Graph, schema.org, canonical;
• реалізувати гнучку систему категорій, ресторанів і товарів із можливістю швидкого масштабування.

У результаті нова версія Buy мала стати не просто онлайн-магазином, а повноцінною e-commerce екосистемою для вірменського ринку з акцентом на швидкість, надійність і зручність.

Рішення від Promodex

Для проєкту Buy ми обрали підхід Jamstack на базі Next.js, поєднавши SSR/ISR-рендерінг, CDN-оптимізацію та потужні інструменти аналітики. Архітектура була спроєктована так, щоб сайт однаково швидко працював і на десктопах, і на мобільних пристроях, а модулі легко масштабувалися разом із кількістю партнерів і трафіком.

• Фронтенд і UI. Інтерфейс реалізовано на React + MUI із власною дизайн-системою: картки ресторанів, брендів і страв, слайдери акцій, фільтри й модальні вікна. Для динамічних каруселей використано Keen-Slider, що забезпечує плавну анімацію та чутливість до свайпів на мобільних пристроях.
• Архітектура сторінок. Ми розробили окремі шаблони для головної сторінки, каталогів, ресторанних вітрин, модальних карток товарів, промо-лендінгів та форм реєстрації кур’єрів/клієнтів. Це дозволяє швидко запускати нові промокампанії та партнерські проєкти без зміни ядра.
• Авторизація та акаунти. Для входу й управління сесіями використано NextAuth.js з підтримкою входу через email та інтеграцію з соцмережами. Додатково реалізовано двофакторну автентифікацію, токенізацію сесій і безпечне зберігання даних користувачів.
• Продуктивність і DevOps. SSR/ISR-рендерінг на Next.js 15.2.4 у поєднанні з Cloudflare CDN, HTTP/3 та оптимізованою збіркою Webpack значно знизили TTFB і час завантаження сторінок. Кешування на рівні CDN та lazy-loading зображень дозволили платформі витримувати високі пікові навантаження.
• Аналітика та трекінг. Паралельно працюють GA4, Microsoft Clarity, Facebook Pixel, GTM — команда Buy бачить повну картину воронки: від перегляду категорій до оплати замовлення, а також теплові карти й записи сесій.
• SEO та безпека. Впроваджено Open Graph, schema.org, коректні canonical-теги, sitemap.xml і robots.txt. Безпеку підсилюють HTTPS, HSTS та захист на рівні Cloudflare.

Такий підхід дозволив створити сучасну, швидку й гнучку платформу, готову до агресивного зростання як за кількістю користувачів, так і за кількістю партнерів.

Ключові екрани та сценарії

На головній сторінці користувача зустрічають великі банери з акціями — наприклад, кешбек від VISA — та промо-блоки локальних партнерів. Нижче розміщені «обрані бренди» у форматі круглих логотипів: популярні магазини, кав’ярні та мережі fast-food. Через верхнє меню можна швидко перейти до розділів «Ресторани», «Магазини», «Аптеки» тощо. Цей екран працює як вітрина всього маркетплейсу та стартова точка для більшості сценаріїв.

Каталог партнерів побудований у вигляді плиток-карток із логотипами брендів та короткою інформацією: рейтинг, наявність кешбеку, підтримка Apple Pay, відсоток знижки тощо. Користувач може швидко обрати потрібний магазин або сервіс, орієнтуючись на категорію, бренд і промо-позначки. Така структура особливо важлива для роботи з великими мережами й банківськими акціями.

У розділі ресторанів користувач бачить плитки із зображеннями страв, рівнем знижки, рейтингом, режимом роботи та іншими параметрами. Праворуч розміщено рекламний банер із акцією, що працює як додатковий канал монетизації. Карточки оптимізовані під мобільні пристрої, а фільтри дозволяють швидко обрати заклад за кухнею, відстанню чи умовами доставки.

Сторінка конкретного ресторану містить великий хедер із фото, логотипом, рейтингом і часом роботи. Нижче відображається меню, розбитe на категорії: шашлик, шаурма, піца, напої тощо. Кожна страва показана у вигляді картки з фото, ціною, розміром знижки та кнопкою додавання в кошик. Цей екран зручний як для перегляду з десктопа, так і з мобільного, скорочуючи шлях до замовлення до кількох натискань.

При натисканні на страву відкривається модальне вікно з великим фото, описом, кодом товару та кнопками «Додати в кошик» і вибору кількості. Окремий блок займає інформація про знижку, склад та додаткові опції. Завдяки такому підходу користувач не залишає сторінку меню, але отримує всю необхідну інформацію для прийняття рішення.

Окремий екран присвячений набору кур’єрів. Лендінг поєднує великий lifestyle-візуал і просту форму з полями для контакту, вибору міста й підтвердження телефону. Це дозволяє Buy швидко масштабувати логістичну мережу та залучати нових партнерів-доставщиків без окремих сайтів чи форм сторонніх сервісів.

Результати для бізнесу

Запуск оновленої платформи Buy приніс помітні результати як з технічної, так і з бізнес-точки зору.

• Швидкість рендерінгу сторінок зросла приблизно на 52% завдяки SSR, Cloudflare CDN і HTTP/3.
• Конверсія в замовлення збільшилася на 36% завдяки покращеному UX і спрощеному checkout.
• Впровадження NextAuth.js забезпечило безпечний вхід і зручне управління акаунтами.
• Показник утримання користувачів виріс на 28% через персоналізовані рекомендації та збережені кошики.
• GA4 + Clarity надали повну аналітику поведінки користувачів, що дозволило оптимізувати кампанії та UX-сценарії.
• Оптимізація кешування скоротила середній час завантаження сторінок до ~0,9 секунди.

Нова версія Buy перетворилася на сучасну e-commerce платформу, яка впевнено витримує зростання трафіку, підтримує складні промокампанії та забезпечує зручний сервіс для користувачів по всій Вірменії.

Технології та інфраструктура

Платформа Buy побудована на сучасному JavaScript-стеку з фокусом на продуктивність, безпеку та масштабованість:

• Фреймворк: Next.js 15.2.4
• Front-end: React, MUI, Keen-Slider
• Back-end: SSR/ISR на Next.js, Node.js API
• Авторизація: NextAuth.js (email, соцмережі, 2FA)
• Аналітика: Google Analytics 4, Microsoft Clarity, Facebook Pixel, Google Tag Manager
• Оптимізація: Webpack, HTTP/3, Cloudflare CDN, lazy-loading, кешування
• SEO: schema.org, Open Graph, canonical, sitemap.xml, robots.txt
• Безпека: HTTPS, HSTS, токенізація сесій

Завдяки цьому стеку Buy отримав високопродуктивну, гнучку й безпечну e-commerce систему, яка готова до подальшого розвитку та виходу на нові сегменти ринку.