Problem
Footwear shoppers compare several pairs at once. If moving between the listing, a product page, and the cart drops their selection or their filter, they leave.
SoleFlow Footwear Store
Goals
- Let a shopper move between category, product, wishlist, and cart without losing their place.
- Make filtered views shareable and refresh-safe.
- Keep the product grid fast even with large imagery.
Solution
A Next.js App Router storefront. Category is a URL search parameter, product pages are dynamic routes, and cart and wishlist live in a small global store that persists across navigation.
Key features
- Men / women / kids catalogue with URL-driven filtering
- Dynamic product detail routes
- Persistent cart and wishlist with quick-add
- Price, discount, rating, and review count on the card
- Responsive grid from 320px up
Architecture
App Router pages for the catalogue and product detail; a client-side store for cart and wishlist; next/image with per-breakpoint sizes for the grid; product data in typed modules so the card and detail views share one shape.
Technical decisions
- Category lives in the URL (?category=men) instead of component state, so filtered views can be shared and survive a reload.
- Cart and wishlist are global and persistent so a quick-add never forces a context switch away from the grid.
- Price, discount, rating, and review count sit on the card itself. Comparison happens in the grid, not by opening each product.
- Identical card anatomy across the whole catalogue so the browser reuses layout instead of reflowing.
Tech stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Vercel
Hardest part
Product imagery dominates a footwear store, and loading full-resolution shots for a whole grid made first paint heavy.
What I learned
In commerce the grid is the product. Most of the engineering effort belongs to the listing view, not the checkout.
Result
A deployed storefront where filtering, product detail, and cart state all work together and hold up on mobile.