WEARCOLLECTIVE
A full-stack fashion e-commerce store built with Next.js, Supabase and Redux, with men’s, women’s and kids’ collections, user accounts, a cart and checkout, a newsletter and a store locator.
Overview
WEARCOLLECTIVE is an intuitive e-commerce platform built for clothing enthusiasts who enjoy discovering and shopping the latest fashion trends. Shoppers can browse a curated collection of modern apparel across men’s, women’s and kids’ categories, explore new arrivals and seasonal collections, create a personal account and add their favourite items to a shopping cart.
The goal was to build a store that feels like a real retail product: a minimalist, responsive design, a checkout flow that mimics Stripe payment processing (so the full purchase journey can be experienced without real transactions), and the supporting pages a real shop needs, such as sizing guides, returns and refund policies, FAQs and support.
Key Features
🛍️ Shopping
- Men’s, women’s and kids’ categories
- New arrivals and seasonal collections
- Product detail pages and a sizing guide
- Product search
- Cart and Stripe-style checkout
👤 Accounts
- Sign up and sign in with Supabase Auth
- Profile and account settings
- Saved addresses and payment methods
- Order history and returns
📬 Engagement
- Newsletter sign-up with a welcome email sent through Resend
- Store locator powered by the Google Maps API
- Promotions and brands pages
- Support, contact and FAQ pages
How It’s Built
- Frontend: Next.js App Router with React and Tailwind CSS. The layout and navigation use reusable UI components such as a sidebar, sheets, dropdown menus and breadcrumbs, and the design adapts to mobile screens.
- State management: Redux Toolkit, with separate slices for the user session, the product catalogue and the shopping cart. Async thunks handle sign-up, sign-in and data fetching.
- Backend: Supabase provides authentication and a Postgres database for products, items and user profiles.
- Email: A Next.js API route calls Resend to send a templated, personalised welcome email when someone subscribes.
- SEO and analytics: Page metadata, an auto-generated sitemap and robots.txt, plus Vercel Analytics.
- Hosting: Deployed on Vercel.
Tech Stack
Next.js · React · Tailwind CSS · Redux Toolkit · Supabase · Resend · Stripe · Google Maps API · Vercel
