DJ-M Shop

Task

The goal was a catalog store selling original and used DJ equipment parts (pads, sliders, PCBs, drives, and more) with flexible filtering by brand, category, and condition, a clean product page and cart — with a catalog the manager could update without a developer.

Result

• —A fully working store with a catalog editable through Strapi — new products, brands, and categories go live without a frontend deploy.
• —A cart that persists across visits and works correctly when a user returns to the site.
• —A flexible filtering and categorization system that scales to new brands and part types without code changes.

Solution

• —Frontend on Next.js (Pages Router) + TypeScript + Tailwind: a filterable, paginated catalog (FilterBar, MultiSelect, Dropdown, Pagination), product cards, brand and set pages, and a dedicated product page with slug-based routing.
• —CMS integration with Strapi: content and catalog data (brands, categories, products, offers with price/condition/stock) are managed through Strapi Admin; a custom API proxy (/api/strapi/[...path]) hides Strapi tokens from the client and simplifies frontend requests.
• —Server-side logic and architecture: PostgreSQL as Strapi's datastore, dedicated API routes for brands and categories, cart state in Zustand persisted to localStorage (hydrated behind a hasHydrated flag for correct SSR/CSR behavior), with data fetching and caching via React Query.
• —A UI kit built on Radix UI + shadcn/ui (dialogs, accordions, dropdown menus, popovers) and Embla/Swiper carousels for the popular-products showcase.