> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build a simple shopping cart
- URL: https://reactpractice.dev/exercise/build-a-simple-shopping-cart-using-react-query/
- Published: 2023-02-02T08:06:44.000Z
- Updated: 2026-06-01T01:58:09.000Z
- Author: Corina Udrescu
- Tags: Structuring components, #corina-2, Exercises, #Import 2026-06-09 12:07

Build a simple shopping cart using [react-query](https://react-query-v3.tanstack.com/quick-start?ref=reactpractice.dev) to fetch the data.

The app should have a simple layout, with the products available on the left side of the page and the shopping cart on the right side.

Users should be able to:

- see a list of products
- see their shopping cart
- add/remove products to the shopping cart
- increase or decrease the quantity of the products in the cart
- see the total price of their cart

If no product was added to the shopping cart, the page should say: “You haven’t added anything to your shopping cart yet.”

If the quantity of a product is greater than 3 items, add a 10% discount for that product.

The list of products can be retrieved from a mock API that is included in the [starter repo](https://github.com/reactpractice-dev/shopping-cart-react-query?ref=reactpractice.dev).

Fork the repo on Github and get started!

What you’ll practice:

- structuring the component tree
- sharing state across components
- combining server state with local state
- working with derived state

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-build-a-shopping-cart-using-react-query/) and the comments section for feedback and discussion.