Release R3State & Async• Advanced
FL05: Shopping Cart State & Race Protection
Optimistic updates, monotonic sequence tokens, stock clamping, rollback on failure, and undoable removal
Screen Condition Presets
Simulation Boundaries
The interactive demo uses `MockCartRepository` with controllable latency (default 80ms) and synthetic catalog items (Flutter Dash Plush, Dart RGB Keyboard, M3 Hoodie). A live "Simulate 500 Network Error" toggle injects server failures to demonstrate automatic rollback, and a "Rapid +3 Clicks Stress" action tests out-of-order race rejection in real time.
Interactive Controls:
• [+] & [-] Stepper: Immediate optimistic update with server ACK.
• Stock Bound Guard: Reaching max stock disables [+] and warns user.
• Remove & Undo: Tap trash icon; observe undo banner with instant recovery.
• Fault Injection: Flip "Simulate 500 Network Error" chip to watch rollback.
• Race Stress: Tap "Rapid +3 Clicks" to verify out-of-order drop.
Key Problems Solved
Shopping cart implementations frequently suffer from five insidious bugs in production e-commerce apps:
1. **Floating Point Rounding Errors**: Storing monetary amounts as `double` (e.g., `0.1 + 0.2 = 0.30000000000000004`) causes 1-cent discrepancies between line items, sales taxes, and order totals. Currency must be stored as integer minor units (cents).
2. **Out-of-Order Network Races**: When a user rapidly taps `+` on an item (e.g., 3 quick taps), asynchronous HTTP requests resolve out of order. A delayed response for quantity 2 arriving after quantity 3 can clobber newer state, dropping the user's intended count.
3. **Unbounded Quantities Beyond Inventory**: Failing to enforce stock limits on both client and server causes inventory exhaustion and checkout failures. Stepper buttons must disable when bounds are reached.
4. **No Rollback on Server Rejection**: If the server rejects a quantity update (e.g. 500 error or out of stock), failing to restore the previous quantity leaves the UI out of sync with backend reality.
5. **Accidental Item Deletion Without Undo**: Removing an item without a quick-recovery action forces users to re-search the catalog, leading to cart abandonment.
Rendered inside CanvasKit Flutter Web engine via
?mode=fl05-cart