Головна / Статті / Lumora Clothing: повнофункціональна комерційна платформа, яка виходить за межі статичного інтерфейсу магазину

Lumora Clothing: повнофункціональна комерційна платформа, яка виходить за межі статичного інтерфейсу магазину

React, Node, MongoDB, процес оплати на основі скріпок, повторна відправка сповіщень та масові запити через WhatsApp для бізнесу з одягом, який потребує оперативної незалежності.

845 слів

Lumora Clothing — це платформа для електронної комерції та управління бізнес-процесами, створена для вирішення практичних проблем, з якими стикаються продавці одягу, а не ще один статичний каталог. Метою дизайну була створення системи, яка підтримує процеси купівлі клієнтами та щоденну роботу магазину, водночас зменшуючи кількість випадків, коли персоналу потрібен розробник для виконання рутинних змін.

Пряма робота платформи доступна за адресою https://lumora-clothing.vercel.app/.

Як виглядає інтерфейс магазину

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

Проблема, яку вона вирішує

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

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

Як платформа вирішує ці проблеми

Продукт поєднує вітрину клієнта з системою адміністрування, щоб бізнес міг самостійно виконувати щоденні обов’язки.

Панель адміністрування з можливістю самостійного обслуговування

Оператори керують товарами, зображеннями, категоріями, розмірами, цінами та запасами з панелі керування, не редагуючи код програми. Зображення можна вибрати у браузері за допомогою FileReader API, одразу переглянути та обробити за допомогою формату Base64, щоб співробітники без технічних знань могли підтримувати каталог.

Оплата за допомогою квитанції

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

Автоматичні сповіщення про замовлення

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

Масовий формат для B2B

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

Технічна архітектура

Архітектура є роз’єднаною повноцінною структурою.

Фронтенд

  • Інтерфейс React 18
  • Типи TypeScript
  • Стилізація Tailwind
  • HTTP-клієнт Axios
  • Набір ікон Lucide

Сервер

  • Середовище виконання Node.js
  • HTTP-фреймворк Express
  • Ендпоїнти REST, орієнтовані на ресурси
  • Сеанси з підписом на основі JWT
  • Перевірка ролей для обмеження дій адміністраторів та клієнтів

База даних

  • Кластер, розміщений у MongoDB Atlas
  • Моделювання документів за допомогою Mongoose

Інтеграції

  • Пересилання для транзакційних листів
  • Глибокі посилання для спілкування через WhatsApp
  • Використання FileReader браузера для локального перегляду

Розгортання

  • Vercel хостує SPA
  • Railway хостує API

Клієнт взаємодіє з сервером через REST. Сервер відповідає за автентифікацію, бізнес-правила, зберігання даних та зовнішні інтеграції.

Особливості інженерної реалізації

1. Зменшення залежності від розробників

Однією з головних мет була операційна незалежність. Зміни каталогу та запасів відбуваються у панелі керування, без необхідності розгортання коду після кожної зміни.

2. Адаптація до місцевих звичок покупок

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

3. Роздрібна та оптова торгівля одним продуктом

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

4. Автоматизація повторюваних завдань з контролем статусу

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

Ширші перспективи

Основний урок полягає у тому, що справжній продукт — це не лише вибір сучасних технологій. Це також розуміння бізнес-процесів, які має підтримувати програмне забезпечення. Три принципи, які сформували Lumora:

Створюйте з урахуванням операційної незалежності. Рутинні завдання не повинні залежати від інженерів.

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

Автоматизуйте там, де це корисно. Повторювані операційні кроки слід внести до системи, коли автоматизація робить процес швидшим та надійнішим.

Закінчення

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

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