DJ-M Shop

Задача

Нужен был каталог-магазин для продажи оригинальных и б/у запчастей к DJ-оборудованию (пэды, слайдеры, платы, приводы и т.д.) с гибкой фильтрацией по брендам, категориям и состоянию товара, удобной карточкой товара и корзиной — при этом с редактируемым каталогом, который менеджер мог бы пополнять без участия разработчика.

Результат

• —Полностью рабочий магазин с редактируемым через Strapi каталогом — новые товары, бренды и категории добавляются без деплоя фронта.
• —Корзина с сохранением состояния между визитами и корректной работой при возврате пользователя на сайт.
• —Гибкая система фильтров и категоризации, которая масштабируется на новые бренды и типы запчастей без изменения кода.

Решение

• —Frontend на Next.js (Pages Router) + TypeScript + Tailwind: каталог с фильтрацией и пагинацией (FilterBar, MultiSelect, Dropdown, Pagination), карточки товаров, страницы брендов, наборов (sets) и отдельная страница товара с роутингом по slug.
• —CMS-интеграция со Strapi: контент и каталог (бренды, категории, товары, офферы с ценой/состоянием/остатком) управляются через Strapi Admin; собственный API-прокси (/api/strapi/[...path]) скрывает токены Strapi от клиента и упрощает запросы с фронта.
• —Серверная логика и архитектура: PostgreSQL как хранилище данных Strapi, отдельные API-роуты для брендов и категорий, состояние корзины на Zustand с persist-хранением в localStorage (гидратация с флагом hasHydrated для корректного SSR/CSR), кэширование и загрузка данных через React Query.
• —UI-кит на Radix UI + shadcn/ui (диалоги, аккордеоны, dropdown-меню, попапы) и слайдеры на Embla/Swiper для витрины популярных товаров.