Интернет-магазин errorBrand

Сделать витрину для бренда одежды, которая не хранит данные сама, а берёт их из админ-панели: каталог, остатки, аккаунты покупателей. Сотрудники меняют товар в админке — и через полминуты он обновляется на сайте.

Собрал свой набор базовых компонентов — кнопки, карточки, поля, модальные окна — и из них все страницы: главная, каталог, карточка товара, корзина, личный кабинет, лукбук и блог. Отдельно продумал состояния загрузки, пустых списков и ошибок, а также вёрстку под телефоны.

1. /01

   Секретный ключ не попадает в браузер

   Запросы к админке идут только с сервера сайта. Браузер покупателя обращается к своему API, поэтому ключ доступа к админке нельзя увидеть в коде страницы.

2. /02

   Покупатели живут в админке

   Регистрация и вход покупателей проходят через API админ-панели, поэтому магазин не хранит пароли сам, а сотрудники видят клиентов в одном месте.

3. /03

   Защита от кривых данных

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

// размеры и цвета приходят в свободном объекте атрибутов —
// берём значение, только если это точно список строк
function getStringArray(
  attributes: Record<string, unknown>,
  key: string,
): string[] {
  const value = attributes[key]
  return Array.isArray(value) &&
    value.every((entry): entry is string => typeof entry === 'string')
    ? value
    : []
}

Витрина готова: все страницы, состояния и адаптивная вёрстка. Сейчас перевожу её на новую версию API админ-панели.