Власна e-commerce платформа на Firebase

Я розробив власну e-commerce платформу з нуля. Я не використовував готові платформи. Замість цього я використав Firebase Realtime Database та Netlify.

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

Ось як я вирішив основні технічні завдання.

Розділення даних Я тримав базу даних e-commerce окремо від бази даних внутрішнього управління. Це запобігає змішуванню комерційних даних із конфіденційними файлами, такими як зарплати працівників або бюджети.

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

  • Я створив глобальний архів для всіх планів.
  • Кожен товар містить лише масив ID планів.
  • Це пришвидшує оновлення та запобігає помилкам у даних.

Атомарна нумерація замовлень Коли кілька людей оформлюють замовлення одночасно, виникає стан гонитви (race condition). Якщо два користувачі прочитають один і той самий номер останнього замовлення, одне замовлення буде перезаписане.

  • Я використав транзакції Firebase для вирішення цієї проблеми.
  • Функція runTransaction гарантує правильне інкрементування номера навіть за умови великої кількості одночасних користувачів.
  • Це гарантує, що кожне замовлення матиме унікальний номер.

Безпечний доступ адміністратора Я не хотів зберігати паролі в сирцевому коді. Також я уникав простих хешів, таких як MD5.

  • Я використав PBKDF2 через Web Crypto API.
  • Це застосовує тисячі ітерацій до хешу.
  • Це робить атаки методом перебору (brute-force) занадто дорогими для хакерів.
  • У коді я зберігаю лише сіль (salt) та хеш.

Виправлення помилки з «нулем» Я виявив баг, через який товари з ціною 0 відображалися як "ціна буде визначена".

  • Це сталося тому, що JavaScript сприймає 0 як "falsy".
  • Я виправив це, змінивши логіку.
  • Замість використання "price || null", я використав "price != null".
  • Це гарантує, що система розпізнає 0 як коректне число.

Конфігурація CSP Firebase використовує динамічні піддомени. Стандартний HTML-тег meta для Content Security Policy (CSP) не може обробляти такі wildcards.

  • Я переніс CSP з HTML до HTTP-заголовків Netlify.
  • Це дозволило мені використовувати wildcards, щоб сервіси Firebase працювали коректно.

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

Джерело: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec