All Projects
Intermediate~12 hours

E-Commerce Product Store

reactstate-managementapicssrouting

Project Brief

Build a fully functional e-commerce storefront. Products are fetched from the Fake Store API. Users can browse products by category, view product details, add items to a shopping cart, adjust quantities, and go through a checkout flow. Cart state persists across page reloads.

Requirements

  • Product listing page with grid/list view toggle
  • Filter by category and sort by price/rating
  • Product detail page with image, description, price, rating
  • Shopping cart: add/remove items, adjust quantities
  • Cart persists in localStorage
  • Checkout form with validation (name, email, address, card placeholder)
  • Order confirmation page
  • Search products by name
  • Responsive design (mobile-first)
  • Loading states and error handling throughout

Milestones

Set up React project with routing. Fetch products from Fake Store API (fakestoreapi.com). Build the product grid with category filtering and sorting.

Start the project to unlock hints and tracking