Development of Shopping Cart in Mobile Application
Cart is not just list with "plus" and "minus" buttons. This synchronized state between local storage and server that must survive app switching, internet loss, logout and re-login. Cart losing products on app close or showing stale price at checkout — source of direct conversion loss.
Where everything goes wrong
Local and server state synchronization. Most common error — store cart only on client. User added product from one device, opened app on another — cart empty. Right scheme: optimistic UI update + async server synchronization. In React Native with Redux Toolkit — createAsyncThunk for each operation (add, remove, updateQuantity), extraReducers with pending/fulfilled/rejected. On error — rollback to previous state via immer.
Stale prices and availability. User added product three days ago, price changed. On cart open make validation request with current data — server returns actual prices and availability status. Unavailable products highlight visually and block checkout.
Swipe to delete. SwipeRow in React Native or ReorderableList often conflict with vertical scroll. On Android with Compose — SwipeToDismiss from Material 3 more stable. On iOS — UISwipeActionsConfiguration in native, Flutter — Dismissible widget. Everywhere need haptic feedback on threshold reach — UIImpactFeedbackGenerator.impactOccurred() / HapticFeedback.mediumImpact().
Cart architecture
CartItem {
productId: string
variantId: string // size, color
quantity: number
priceSnapshot: number // price at add time
currentPrice: number // actual price from server
}
variantId — mandatory field often forgotten. Same product in two sizes — two different CartItem. Without this sum recalculation breaks on mixed variants.
Persistence: AsyncStorage + JSON serialization in RN, Room database on Android, CoreData or UserDefaults for small carts on iOS. On next launch restore local state immediately, then do background server sync.
Case from practice: e-commerce app, Flutter + BLoC. Cart "forgot" products on force-close. Reason — HydratedBloc wasn't initialized before first storage access. Moved HydratedStorage initialization to main() before runApp() — problem gone.
Total sum and discounts
Sum recalculation only on server at checkout. Show preliminary sum on client (local calculation), when going to payment make final calculation with promo codes, loyalty discounts, shipping. Prevents sum mismatch.
Promo code field — separate UX element. On invalid code — shake animation on field + error text below, not toast.
What's included
- Product list in cart with image, name, variant, price
- Quantity change (input or +/– buttons) with min/max validation
- Swipe to delete with undo via snackbar (5 seconds)
- Total sum with breakdown (products, shipping, discount)
- Promo code field with validation
- Empty cart state with CTA
- Server sync + offline handling
- Go to checkout with product availability validation
Timeline
2–3 working days. If multi-device sync, loyalty program integration or complex discount logic needed — 3–5 days. Cost calculated individually.