🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🛒 Shopping cart (part 5/7)
Tags: react, graphql, beginners, tutorial
Published: 2019-02-04 02:48:01

---
title: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🛒 Shopping cart (part 5/7)
published: true
description: Part 5/7 - Creating a Deliveroo clone with React, GraphQL, Nextjs and Strapi
tags: #react #graphql #beginner #tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g0ojkm8suwb37zgc0rbm.png
series: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🛒 Shopping cart (part 5/7)
---

![Strapi Next.js tutorial](https://thepracticaldev.s3.amazonaws.com/i/g0ojkm8suwb37zgc0rbm.png)

*This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.*

**Table of contents**

- 🏗️ [Setup](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----setup-part-17-ked) (part 1) 
- 🏠 [Restaurants](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----restaurants-list-part-27-10ce) (part 2)
- 🍔 [Dishes](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/) (part 3)
- 🔐 [Authentication](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho) (part 4)
- 🛒 [Shopping Cart](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----shopping-cart-part-57-2h1e) (part 5) **-current**
- 💵 [Order and Checkout](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----order-and-checkout-part-67-fph) (part 6)
- 🚀 [Bonus: Deploy](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----bonus-deploy---part-77-1i8e) (part 7) 

*Note: the **source code** is **available on GitHub**: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*

## 🛒 Shopping Cart

All of these dishes look so tasty! What if we could add some of them in a shopping card?

![Shopping card](https://thepracticaldev.s3.amazonaws.com/i/l2susfttjxih2o0nr370.gif)

Next, we create a new component named `Cart.js`:
```
cd ..
cd components
mkdir Cart
cd Cart
touch Cart.js
```
*Path: `/frontend/components/Cart/Cart.js`*

 {% gist https://gist.github.com/ryanbelke/9498869aa3b4d59f90fa7a205084c5a2.js %}

## React Context
To keep track of our items added to our cart across pages we will use the React Context API. Context will allow us to manage the state of items in a provider component that will be re-used on the checkout page. The only thing React Context will not take care of for us is saving items on a page refresh, for that you would want to save the items to a cookie and restore the items from the cookie. I will work to implement this soon if requested. 

The items are currently saved to a cookie called items, but the items are not restored on refresh.


Create a new directory inside our components folder:

Note: you can name your AppProvider anything related to the context you are storing (i.e. ItemsContextProvder). This would allow you to use and keep track of multiple providers/consumers throughout the app if your needs grow.

```
cd ..
mkdir Context
cd Context
touch AppProvider.js
```

Path: `/frontend/components/Context/AppProvider.js`

 {% gist https://gist.github.com/ryanbelke/bdd97cc6ad5ceb5a0c59dc0a24f4d6e9.js %}

Now we will need to make some changes to use our Context throughout the application and on the dishes page. 

Update the `_app.js` and `/pages/restaurants.js` files to use the AppProvider/Consumer components:

Path: `/frontend/pages/_app.js`

 {% gist  https://gist.github.com/ryanbelke/7a2343d578014a918d55e45e7a33ae2d.js %}

Path: `/frontend/pages/restaurants.js`

 {% gist https://gist.github.com/ryanbelke/fefdcd1e61eea4c89ab8ee51961d9d80.js %}

Now if you refresh the page you should see the Cart component to the right of the dishes.

Your Layout header should also update with the username of the logged in user and show a logout button if you are logged in.

To actually place an order the `isAuthenticated` prop must pass to true, in a real world app you would want to secure these routes on the server side rather than on the client side. Any props/state on the client can be altered and therefore should not expose real world data without server validation. 

For the sake of the tutorial we are not currently implementing this.


Good job!

💵 In the next section, you will learn how to **setup Stripe for checkout and create orders**: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----order-and-checkout-part-67-fph