Home > Projects > Clothing Store

Clothing Store

A React clothing store with a searchable catalog, product pages with size selection, a persistent cart, a mock account, and a masked payment form.

Screenshot of Clothing Store

About this project

BraySurfing, a single-page e-commerce store for a surf clothing brand built with React. It covers browsing, product details, cart, account, and payment, deployed on Netlify.

Key features:

  • Pages for home, product catalog, product details, account, cart, and payment, with React Router and a 404 page
  • Live search and sorting by latest, price, or rating
  • Product pages with size selection, quantity input, and related product suggestions
  • Cart managed with Redux Toolkit, merging items by product and size, saved to localStorage, with a cart badge in the navbar
  • Mock login and registration with Zustand, persisted across reloads
  • Payment form with masked card number, expiry, and CVV inputs
  • Star ratings with half stars, and a responsive navbar with a mobile menu

Engineering:

  • Redux Toolkit for the cart and Zustand for auth, side by side
  • Scroll-to-top on every route change, and SPA redirects for Netlify