Створити функціональний Shopify магазин з інтеграціями основних e-commerce сервісів. Завдання демонструє реальний робочий процес нашої компанії.
Час виконання: 4-6 годин
Дедлайн: 3-5 робочих днів від отримання
Мета Завдання
Оцінити твої навички в:
Роботі з Shopify платформою
Frontend розробці (JavaScript, верстка)
Backend розробці (Node.js, API)
Інтеграціях з третіми сервісами
Документуванні коду
Частина 1: Shopify Магазин (Frontend)
Завдання:
Створити базовий Shopify магазин для продажу одягу (тестовий).
Що потрібно зробити:
1. Налаштування магазину
Зареєструвати безкоштовний Shopify Trial (14 днів)
Обрати та встановити будь-який безкоштовний theme
Налаштувати базову інформацію магазину
2. Додати товари
3. Кастомізація Theme
Внести зміни в обраний шаблон:
a) Головна сторінка:
Додати custom banner з текстом "Welcome to Our Store"
Секція з featured products (3-4 товари)
Newsletter signup форма (поки без backend)
b) Картка товару:
Додати кнопку "Add to Wishlist" (тільки UI, функціонал не обов'язковий)
Показувати індикатор наявності товару ("In Stock" / "Low Stock" / "Out of Stock")
c) Кошик:
4. JavaScript функціонал
Реалізувати одну з цих функцій (на вибір):
Варіант A - Quick View:
При кліку на кнопку "Quick View" на картці товару:
- Відкрити modal з інформацією про товар
- Показати назву, ціну, головне фото
- Кнопка "Add to Cart" в modal
Варіант B - Dynamic Cart:
Оновлювати кошик без перезавантаження сторінки:
- Після додавання товару показати mini-cart sidebar
- Відобразити кількість товарів та загальну суму
- Можливість видалити товар з mini-cart
Очікуваний результат:
Робочий Shopify магазин (посилання на preview)
Кастомізований theme з вашими змінами
Працюючий JavaScript функціонал
Чистий, коментований код
Частина 2: Backend Інтеграція (Node.js)
Завдання:
Створити Node.js застосунок для інтеграції Shopify з зовнішнім сервісом.
Сценарій:
Коли в магазині створюється нове замовлення, потрібно:
Отримати webhook від Shopify
Обробити дані замовлення
Відправити інформацію в зовнішню систему (mock API)
Залогувати результат
Технічні вимоги:
1. Налаштування проєкту
Структура:
shopify-integration/
├── server.js (або index.js)
├── config/
│ └── shopify.js
├── routes/
│ └── webhooks.js
├── services/
│ └── orderService.js
├── utils/
│ └── logger.js
├── package.json
└── README.md
2. Реалізувати webhook endpoint
POST /webhooks/orders/create
Що має робити:
javascript
1. Приймати webhook від Shopify
2. Верифікувати HMAC signature (безпека)
3. Парсити дані замовлення
4. Валідувати структуру даних
5. Викликати orderService для обробки
6. Повертати 200 OK response
3. Order Service
Створити сервіс, який:
javascript
// Приклад структури
async function processOrder(orderData) {
// 1. Витягнути важливі дані:
const orderInfo = {
orderId: orderData.id,
customerEmail: orderData.email,
totalPrice: orderData.total_price,
items: orderData.line_items.map(item => ({
name: item.name,
quantity: item.quantity,
price: item.price
}))
};
// 2. Відправити в "Klaviyo" (mock)
await sendToKlaviyo(orderInfo);
// 3. Відправити в "Gorgias" (mock)
await sendToGorgias(orderInfo);
// 4. Залогувати успіх
logger.info('Order processed successfully');
}
4. Mock інтеграції
Створити функції-заглушки для API calls:
javascript
// Не потрібно реальне підключення до Klaviyo/Gorgias
// Достатньо імітувати HTTP request
async function sendToKlaviyo(data) {
// Mock POST request
console.log('Sending to Klaviyo:', data);
// Симулювати затримку
await new Promise(resolve => setTimeout(resolve, 100));
// Повернути mock response
return { success: true, service: 'Klaviyo' };
}
async function sendToGorgias(data) {
// Аналогічно для Gorgias
console.log('Sending to Gorgias:', data);
await new Promise(resolve => setTimeout(resolve, 100));
return { success: true, service: 'Gorgias' };
}
5. Error Handling
Обробити можливі помилки:
6. Логування
Використати будь-який logger (Winston, Pino, або console):
javascript
// Логувати:
- Отримання webhook
- Успішну обробку
- Помилки з деталями
- Час обробки
Очікуваний результат:
Node.js застосунок з коментарями
Працюючий webhook endpoint
Mock інтеграції з Klaviyo та Gorgias
Error handling
README з інструкціями запуску
Частина 3: Демонстрація Integration Flow (опціонально, але великий плюс)
Завдання:
Показати, як би використав Gadget.dev для реальної інтеграції.
Що зробити:
Варіант A - Документація: Написати покроковий план (без коду):
1. Як би налаштував з'єднання Shopify → Gadget
2. Які тригери використав би (наприклад, "New Order")
3. Які дії виконував би в Klaviyo
4. Як обробляв би помилки
5. Які дані синхронізував би
Варіант B - Скріншоти/Відео:
Зареєструватися на Gadget.dev (безкоштовний trial)
Створити просту інтеграцію (хоча б початок)
Зробити скріншоти налаштувань
Пояснити логіку в README
Що здати?
1. Shopify Магазин:
Посилання на preview магазину (публічне)
Код кастомізацій (JavaScript, Liquid files)
Скріншоти основних сторінок
2. Node.js Backend:
3. Документація:
4. Опціонально:
Відео (2-3 хв) з демонстрацією
Gadget.dev plan/screenshots
Unit tests для Node.js коду
Критерії Оцінювання
Frontend (Shopify):
Магазин виглядає професійно
Кастомізації інтегровані в theme
JavaScript код чистий та працює
Responsive design
Увага до деталей (UX)
Вага: 30%
Backend (Node.js):
Код структурований та читабельний
Правильна обробка webhooks
Error handling присутній
Асинхронність реалізована правильно
Логування налаштоване
Вага: 40%
Документація:
Вага: 20%
Додатково:
Вага: 10%
Технічні Вимоги
Обов'язково:
Node.js: v16+ або v18+
JavaScript: ES6+ (async/await, arrow functions)
Framework: Express.js (рекомендовано) або будь-який інший
Package manager: npm або yarn
Дозволено використати:
Будь-які npm пакети (але обґрунтуй вибір в README)
TypeScript (якщо зручно)
Будь-які testing frameworks
Environment variables (.env файл)
Заборонено:
Підказки
Shopify Development:
Webhooks:
Node.js:
Express guide: https://expressjs.com/
Обробка webhooks: body-parser middleware
Environment variables: dotenv package
Gadget.dev:
Якщо Виникли Питання
Немає доступу до Shopify? → Можна створити безкоштовний Development Store
Не можу налаштувати webhooks локально? → Використай ngrok: ngrok http 3000
Не знайомий з Gadget.dev? → Ця частина опціональна, зроби хоча б план на папері
Щось не працює? → Задокументуй проблему в SOLUTION.md
Не вистачає часу на все? → Зроби мінімум з Частини 1 та 2, але якісно