Feetvo — Footwear E-Commerce Store

Project Overview

My Responsibilities

• Frontend Architecture: Built the storefront with Next.js 15 App Router, React 19, and Tailwind CSS, structuring routes for home, shop, product detail, cart, checkout, wishlist, account, and auth pages.
• Backend Integration: Designed the Supabase Postgres schema for products, categories, genders, sizes, and orders, and wrote all client-side queries using the Supabase JS SDK.
• Data Fetching Layer: Implemented TanStack Query hooks for product listing, filtering, pagination, and detail fetching, including per-filter product counts for the sidebar.
• State Management: Built a Zustand store for cart and wishlist with localStorage persistence, quantity handling, and derived totals.
• Authentication & Session Handling: Implemented Supabase email/password auth, a React Context provider for auth state, and Next.js middleware for session refresh across requests.
• Checkout Flow: Implemented order creation logic that validates cart items against live stock before writing orders to the database.
• Account Management: Built the customer account dashboard for updating profile metadata and viewing order history joined with product data.
• UI Components: Developed reusable components including the shop filter sidebar, product cards (grid/list), cart sidebar modal, quick view modal, and loading skeletons.

Key Features

• Dynamic Product Catalog: Products, categories, genders, and sizes are stored in Supabase and rendered dynamically across the home, shop, and product detail pages.
• Advanced Shop Filtering: Multi-select filtering by category, gender, and size, plus price range filtering, combined with server-side pagination (18 products per page) and grid/list view toggle.
• Product Detail Page: Image gallery with thumbnail switching, live stock display, quantity selector, and add-to-cart/wishlist actions driven by real product data.
• Cart & Wishlist: Global cart and wishlist state managed with Zustand and persisted to localStorage, with quantity updates, item removal, and running totals.
• Supabase Authentication: Email/password sign-up and sign-in with session handling via React Context and Next.js middleware for session refresh.
• Checkout with Stock Validation: Order submission validates product availability and stock levels against the database before creating one order record per product, preventing orders on out-of-stock items.
• Customer Account Dashboard: Tabbed account area for editing profile details (name, phone, shipping address, city) stored in Supabase user metadata, and viewing order history.
• Order History: Displays each customer's past orders joined with live product data (title and price) for accurate order totals.
• Responsive Storefront UI: Home page with hero carousel, new arrivals, promotional banner, and testimonials; responsive header with cart drawer, user menu, and mobile navigation; contact and FAQ pages.
• Loading Skeletons: Dedicated skeleton components for the shop grid, product details, and filter sidebar to keep perceived performance smooth during data fetching.