Skip to main content

System Design

Shopping Cart

Design the Shopping Cart experience for a grocery delivery app. Users browse and select items from a local store, then review and modify their cart before proceeding to checkout. The core flow includes:

  1. Item Selection: Users add products to the cart while shopping.
  2. Shopping Cart: Users review items, edit quantities, apply coupons, and confirm their order.
Wireframe

While this flow may seem straightforward, it introduces several complexities for mobile client design:

  • Dynamic Discounts: Apply and update item-level (e.g., 10% off milk) and total-level (e.g., $20 off $100) discounts in real time as the cart changes.
  • Session Continuity: Persist cart state across app restarts to ensure users never lose their progress.
  • Real-Time Calculations: Instantly reflect price changes, including discounts, delivery fees, and taxes, as users modify the cart.
  • Smart Suggestions: Recommend relevant products based on the current cart to help users complete their shopping.

In addition to these challenges, consider how your design supports scalability, architecture patterns, and robust error handling.

Prompts to Consider

  • What are the key technical challenges in managing a dynamic, real-time cart on the client side?
  • How should the client handle frequent updates to cart data (such as discounts and totals)?
  • How should the client and server communicate? What does an ideal client-server contract look like?
  • How can the client ensure smooth, responsive interactions during rapid cart edits?
  • How does your design scale as the number of promotions, product types, and cart rules increase?
  • What failure scenarios should the system anticipate, and how should the client handle them gracefully?