Cart

Difficulty: Medium

In this challenge, you'll build a shopping cart app that fetches item data from an API, allows users to adjust item quantities, and dynamically calculates the total cost. This exercise focuses on API integration, state management, and real-time data updates.

Requirements

Fetch Item Data

• Fetch a list of items from a mock API.
• Each item contains:
  • Item id
  • Name
  • Price per unit

{
  "items": [
    { "id": 1, "name": "Milk", "price": 3.50 },
    { "id": 2, "name": "Bread", "price": 2.00 }
  ]
}

Items List

Display the fetched items in a scrollable list, where each row includes:

• Item name
• Price per unit
• Quantity selector with "+" and "–" buttons. The total cost should update in real-time as the user adjusts item quantities.

Additional Requirements

• Show a loading state while fetching items.
• Display an error message if the API request fails.
• If the API contains no items, display an empty state message.
• Prevent the user from setting negative quantities.

API Documentation

Path: https://breakpoint-ghost-io.github.io/ghost-web/cart/items.json

{
  "items": [
    { "id": 1, "name": "Milk", "price": 3.50 },
    { "id": 2, "name": "Bread", "price": 2.00 }
  ]
}

Item Object