X-Commerce is a customer-facing e-commerce storefront built with Next.js and Redux Toolkit. It covers the core shopping experience — browse a product catalog, open a detailed product page with a gallery, colour/size selection, and reviews, then build a cart that persists across sessions. The UI is responsive and SCSS-styled with a BEM convention.
Data is served from mock Next.js API routes rather than a database, and the auth and checkout flows are built as complete UI ready to drop a real backend behind — the storefront and state layer are the focus.
Architecture
Pages read from mock API routes via SWR and server-side props; cart and favourites live in Redux and persist to localStorage through redux-persist.
Data Model
Products carry variants, an aggregate rating, and reviews; the cart holds chosen-variant line items, and users keep a favourites list.
Highlights
- Product discovery — catalog grid with a filter UI (type, price, size, colour) and a featured-product carousel (Swiper).
- Product detail — image gallery with lightbox, colour/size selection, and star-rated reviews.
- Persistent cart — add/update/remove variant-aware line items that survive refresh via redux-persist.
- Wishlist — toggle favourites, also persisted client-side.
- Backend-ready stubs — mock
/apiroutes and complete auth/checkout forms set up to swap in a real database and payment gateway.
Tech
Next.js 15 · React 18 · TypeScript · Redux Toolkit + redux-persist · SWR · SCSS (BEM) · React Hook Form · Swiper. Deployed on Vercel.