Web · Beginner
Shopfront: Product Listing UI
Build a shoppable product grid with search, multi-filter, sort, and a persistent cart that survives page reloads.
You will build a fully functional e-commerce product listing page that fetches real product data from the Fake Store API and lets users search, filter by category, and sort by price or rating. A Zustand-powered cart persists to localStorage so items survive a browser refresh. This project covers the core frontend loop that every React developer needs: remote data fetching, derived UI state, and lightweight global state management.
What you build
- Fetches and displays a product grid from the Fake Store API with loading and error states
- Live search filters products by title as the user types
- Category filter chips let users narrow results to one or more product categories
- Sort dropdown orders results by price (low to high, high to low) or by rating
- Slide-out cart drawer shows selected items, quantities, and a running total
- Cart state is persisted to localStorage via Zustand middleware so it survives page reloads
- Item count badge on the cart icon updates reactively as products are added or removed
What it teaches
- Fetching remote data with fetch inside useEffect and handling loading and error states cleanly
- Deriving filtered and sorted UI lists from a single source of truth without duplicating state
- Managing global client state with Zustand including the persist middleware for localStorage
- Composing React components from a shared design system using Tailwind utility classes
- Lifting state decisions: knowing when local useState is enough versus when a store is warranted
How it works
- 1
Fake Store API
- GET /products
- GET /products/categories
↓ Fetched once on mount
- 2
useProducts hook
- Stores raw list
- Exposes loading + error
↓ Local state only
- 3
ProductGrid
- Search input
- Category chips
- Sort select
↓ Derived list, no extra store
- 4
Zustand Cart Store
- addItem / removeItem
- persist middleware
↓ Writes to localStorage
- 5
CartDrawer
- Reads store
- Shows total
Sign in to open the build guide
Free account. Get the step-by-step build and every resource link.
Take it further
- Add a product detail modal that appears when a user clicks a card, showing the full description, rating breakdown, and an Add to Cart button.
- Replace the fake API with a mock service worker (MSW) so the app works offline and you can simulate slow networks or error states during development.
- Implement a checkout flow with a simple form, client-side validation using React Hook Form, and a success confirmation screen.
