Розробка fashion-платформи для Sourcez

Sourcez — преміальний fashion-ритейлер, що спеціалізується на продажу жіночих та чоловічих колекцій від провідних світових дизайнерів. Компанія працює на Кіпрі та орієнтується на міжнародну аудиторію, яка звикла до сервісу рівня luxury-бутиків і прозорого онлайн-шопінгу.

На момент старту співпраці в Sourcez вже був сформований бренд і асортимент, однак онлайн-платформа не відповідала сучасним вимогам до швидкості, UX та e-commerce-можливостей. Клієнт звернувся до Promodex із запитом створити високопродуктивну JAMstack-платформу, яка стане базою для повноцінного інтернет-магазину з єдиною дизайн-системою, каталожною логікою та готовністю до глобального трафіку.

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

Основне завдання — вивести онлайн-присутність Sourcez на рівень провідних міжнародних fashion-ритейлерів, зберігши мінімалістичну естетику бренду й забезпечивши технічну гнучкість для подальшого масштабування.

• Побудувати JAMstack-ядро на Next.js 14.2.32 із SSR/ISR для швидкого завантаження каталогу, сторінок брендів і колекцій.
• Розгорнути єдину дизайн-систему на базі Radix UI, Tailwind CSS і shadcn/ui з адаптивом від 360 до 1920 px.
• Під’єднати Supabase + PostgreSQL для зберігання даних про товари, бренди, профілі користувачів і wish-list.
• Опрацювати PWA-можливості (offline-режим, installable, кешування) та Priority Hints для ключових ресурсів.
• Імплементувати аналітику GA4 + GTM та SEO-каркас (Open Graph, sitemap, canonical, schema.org, robots.txt).
• Підготувати ідентичний UI-kit для другої версії на React із повним e-commerce-функціоналом (кошик, checkout, оплатa).

У підсумку платформа Sourcez мала стати гібридом онлайн-бутика та технологічного каталогу: естетичний, максимально легкий для користувача та готовий до швидкого переходу в режим повноцінного e-commerce.

Рішення від Promodex

Проєкт реалізували у два паралельні треки: live-платформа на Next.js і e-commerce-ядро на React, яке використовує ті самі дизайн-компоненти. Це дозволило вже на першому етапі запустити продуктивний каталог, а на другому — додати повну логіку покупки без переробки інтерфейсів.

• Інформаційна архітектура та UX. Спроєктовано карту розділів (New, Women, Men, Re.Sourcez, Designers), сценарії переходу від вітрини до кошика, логіку сортувань, фільтрів та пошуку. Особливу увагу приділили швидким поверненням до попереднього списку й роботі з wishlist.
• Дизайн-система. Створено UI-kit на базі Radix UI та shadcn/ui з використанням Tailwind CSS і Goober для стилів та Framer Motion для мікроанімацій. Компоненти спроєктовано як design tokens + layout-патерни, що легко перенесені між Next.js та React-проєктами.
• Next.js-реалізація. Впроваджено SSR/ISR, маршрутизацію під розділи каталогу й брендів, кеш-контроль для списків товарів. Дані зберігаються у PostgreSQL через Supabase (DB, Auth, Storage), що забезпечує масштабованість і централізоване керування контентом.
• Продуктивність та PWA. Реалізовано service worker, manifest, пріоритети завантаження медіа, HTTP/3 та використання edge-мережі Vercel. Критичні ресурси потрапляють у пріоритетні черги, другорядні — вантажаться ліниво (lazy-loading).
• SEO та аналітика. Налаштовано Open Graph, schema.org, sitemap.xml, robots.txt, canonical-теги. GA4 + GTM фіксують перегляди списків, карток товарів, динаміку фільтрації та взаємодію з wishlist.
• React-ядро e-commerce. Паралельно з Next.js-вітриною перенесено UI-компоненти у окремий React-проєкт, де реалізуються кошик, багатокроковий checkout, промокоди, мультивалютність і інтеграція платіжних/доставних сервісів.

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

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

Головна сторінка демонструє мінімалістичну естетику luxury-ритейлу: великі промо-банери з жіночими та чоловічими колекціями, чітка типографіка та лаконічний верхній хедер з основними розділами (New, Women, Men, Re.Sourcez, Designers). Візуальні блоки «For Women» та «For Men» працюють як основні точки входу в каталог і швидко ведуть користувача до релевантних добірок.

На сторінці Women реалізовано універсальний шаблон для всіх категорій: ліворуч — фільтри за типом товару, дизайнером, кольором, праворуч — стрічка продуктів. Над списком розташовано сортування (Latest arrivals, Price: Low to high / High to low). Така конструкція дозволяє швидко комбінувати фільтри й знайти потрібну річ без перезавантаження сторінки.

Окремий шаблон присвячений брендам: на прикладі Acne Studios видно фільтри за категоріями, кольором і розміром, а нижче — стрічка товарів із коротким описом, ціною та можливістю швидкого додавання в кошик або wishlist. Це підкреслює колаборації Sourcez із топ-дизайнерами й працює як «бутик усередині бутика» для фанатів конкретних брендів.

На сторінці продукту, як у прикладі з Dolce&Gabbana, користувач бачить велику галерею, опис стану (Condition), детальні характеристики (матеріали, фурнітура, підошва), ціну та наявність. Блок із вибором розміру синхронізований з таблицею Size Guide, а Fit Predictor допомагає підібрати розмір на основі параметрів моделі. У нижній частині — додаткові фото й рекомендації, що стимулюють крос-продажі.

Кошик побудовано як таблицю з товарами, кольором, розміром, кількістю та ціною. Реалізовано блок Shipping cost calculation з інформацією про доставку та перерахунок у GBP. У нижній частині — поле для промокоду та фінальний підрахунок суми (Unit total, Shipping, Total). Користувач може змінювати кількість товарів, видаляти позиції або переходити назад до каталогу.

Checkout реалізовано як послідовність із шести кроків: Checkout Options, Payment information, Shipping Address, Shipping Method, Payment Method, Order confirmation. На останньому екрані користувач бачить підсумок замовлення, вартість доставки та фінальний Total. Такий сценарій звичний для міжнародного fashion-ритейлу й мінімізує помилки під час оформлення.

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

Запуск оновленої платформи на Next.js уже на першій черзі показав відчутні покращення продуктивності та користувацького досвіду, заклавши фундамент для повного e-commerce-релізу.

• +49% швидший TTFB завдяки SSR/ISR на Vercel, HTTP/3 та оптимізованому кешуванню.
• PageSpeed 95+ балів на ключових шаблонах (каталог, бренд, картка товару).
• Збільшення кількості переглянутих сторінок за сесію завдяки швидкій навігації, фільтрам і чистому UI.
• PWA-функції (installable, offline-fallback) підвищили зручність мобільних користувачів.
• Єдина дизайн-система дозволяє запускати нові функції e-commerce без переробки інтерфейсів.
• Платформа готова масштабуватися під міжнародний трафік, нові ринки та запуск додаткових брендів.

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

Технологічний стек: Next.js 14.2.32, React, TypeScript, Tailwind CSS, Radix UI, shadcn/ui, Goober, Framer Motion, PostgreSQL, Supabase (DB/Auth/Storage), Vercel (edge/CDN, HTTP/3), PWA (service worker, manifest), Open Graph, schema.org, sitemap.xml, robots.txt, Google Analytics 4, Google Tag Manager.