Cart and Checkout Flow
The full path from cart to confirmation, including everything that can go wrong.
IntermediateWeb appE-commerce12–26hAI-buildable 3/5no setupworth shipping
A complete checkout: cart with quantity editing, a multi-step form with validation, shipping options, discount codes, and a review step. No real payment — the value is in the state management and the error handling, which is exactly the part tutorials skip.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Cart with quantity editing, removal and a live total
- Multi-step checkout with per-step validation
- Steps can be navigated backwards without losing entered data
- Shipping options change the total
- Discount codes apply with clear success and failure feedback
- A review step summarises everything before confirmation
- Refreshing mid-checkout doesn't lose the cart
The interesting part
- Keeping totals correct as discounts, shipping and tax interact
- Validation that runs per step but blocks final submission on any error
- Persisting partial checkout state without storing anything sensitive
Once it works
- Add address autocomplete
- Add guest versus account checkout paths
- Add an abandoned-cart recovery prompt
Suggested stack
reacttypescripttailwindreact-hook-formzod