🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🏗️ Setup (part 1/7)
Tags: react, graphql, tutorial, beginners
Published: 2019-02-04 02:43:43

---
title: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🏗️ Setup (part 1/7)
published: true
description: Part 1/1 for tutorial using Next.js, GraphQL, Strapi to create a delivery service mock clone of Deliveroo
tags: #react #graphql #tutorial #beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d0llou78vh8qc9jzynpd.png
series: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🏗️ Setup (part 1/7)
---


This tutorial will be adapted to use **Next.js** (React) over Nuxt (Vue) on the front end, complete with **GraphQL, Stripe, Strapi and React Context**. 

Get ready to develop a **Deliveroo clone, using amazing technologies: [Next.js](https://nextjs.org) ([React](https://reactjs.org)), [GraphQL](https://graphql.org), [Stripe](http://stripe.com/) and [Strapi](https://strapi.io/)**! From signup to order, you are going to let users discover restaurants, dishes and select their happy meal.

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

The **demo of the final result** should make you hungry:

![Final Walk Through 3](https://thepracticaldev.s3.amazonaws.com/i/tbmklb7jcsr2766gba0p.gif)

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

Screenshots of final product:
![first](https://thepracticaldev.s3.amazonaws.com/i/gtjlxaou10zxlw8ym9t8.png)
![second](https://thepracticaldev.s3.amazonaws.com/i/hduqy4dqy6zg4w0ause7.png)
![third](https://thepracticaldev.s3.amazonaws.com/i/6v35vzh4kf97um3z266u.png)

### Strapi:
 [**Strapi** ](https://github.com/strapi/strapi) is the most advanced open-source **Node.js Headless Content Management System** used to build scalable, secure, production ready API's quickly and efficiently saving developers countless hours of development.

 With its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. Unlike online CMS, **Strapi is 100% open-source** (take a look at the [GitHub repository](https://github.com/strapi/strapi)), which means:

 * Strapi is **completely free**.
 * You can **host it on your own servers**, so you own the data.
 * It is entirely **customizable and extensible**, thanks to the plugin system.

### Next.js:
[ **Next** ](https://github.com/zeit/next.js/ ) is a lightweight development framework to create static, server rendered applications in **React**. Next.js will take care of the heavy lifting of the application such as *code splitting, HMR (hot module replacement) and SSR (server side rendering)* and allow us to focus on the application.

### React:  
[**React**](https://github.com/facebook/react) is one of the most popular front end Javascript frameworks, developed by facebook and used by countless tech companies including *Netflix, Airbnb and Github* to build applications. React is a declarative library that makes it easy to create interactive user interfaces, keeping the code base organized through its *component based architecture*.  

### GraphQL:
[**GraphQL**](https://github.com/graphql) is a query language also developed by Facebook to allow the front end of an application to easily query an application's API. Each query requests only the data needed to be rendered by the current view. This allows the developer to craft a great user experience across *multiple devices and screen sizes*.

### Stripe:
[**Stripe**](https://github.com/stripe) is one of (if not the largest) payment processor's for application today. Stripe has developed the tools and SDKs to allow developers to craft and integrate *secure, compliant payment processing* into any app with easy.

## 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) **-current**
- 🏠 [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)
- 💵 [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) 
## 🏗️ Setup

### Next
To setup Next.js we will need an empty directory to install the library and host our project root.

We will split our project into two parts, one for the front end (Next.js code) and one for the backend (Strapi code).

```bash
mkdir strapi-deliveroo
cd strapi-deliveroo
mkdir frontend
cd frontend

yarn add next react react-dom
```

*Note: I am using yarn as my package manager, you can also use npm and execute `npm install --save next react react-dom `*.

Add the following to your `package.json` file:

```javascript
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
```

So that your file looks like this (your package dependencies may have different versions depending on the time of install):

```javascript
{
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
```

Next.js uses any JavaScript file in the `/pages` directory as the routes for the application. To setup simply create the `/pages` directory and add an `index.js` file with:

```
mkdir pages
cd pages
touch index.js
```
Now that we have our main route (index.js), this will be loaded each time the browser URL is at the root (i.e. www.yourapp.com). To test this you can insert the following into the index.js file:

```javascript
export default () => <div>Welcome to next.js!</div>
```

To view the application running, start the local dev server using:

```
yarn dev
```

Your application should now be visible at http://localhost:3000.

Be sure to create a `.gitignore` in the project root and add `.next` and `node_modules` directories to it:
```
cd ..
touch .gitignore
```
```
/* .gitignore */
node_modules
.next
```

**Adding Bootstrap**

For this tutorial, we will use [react-strap](https://reactstrap.github.io/) to implement Bootstrap 4 into our application. For the CSS styling we will import directly from a CDN.

First install Reactstrap:
```
yarn add reactstrap bootstrap
```

**reactstrap** is simply a front end library to easily create Bootstrap components and styling.

To import the CSS and share a Layout component across all our pages we will use a custom `_app.js` file inside the **pages directory**.

This file will serve to override the default App.js used by Next and be rendered on each page, allowing us to set global styles/shared components in one place.

You can read more about the `_app.js` handling here: https://nextjs.org/docs/#custom-app.


This will allow us the ability to import a `<Head>` component and globally set the stylesheet inside the header.

```
cd pages
touch _app.js
```

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

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


Now if we add in some reactstrap components inside of `index.js` we should see the bootstrap styling applied once we restart our server.

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

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


**Restart your server to apply the new changes.**

![picture](https://thepracticaldev.s3.amazonaws.com/i/l585ewkp9fikh7scnm46.png)
-----------
#### Designing the page
Now that we have Bootstrap running inside of our Next.js project, we can begin to style the basic shared front end components like the navbar.


First create a folder to store our components and create our layout component:

```
cd ..
mkdir components
cd components
touch Layout.js
```

Nextjs uses the `<Link>` component to perform the client side routing between pages. The Link component is just a Higher Order Component and can accept any html tag that can handle an onClick handler (`<a>`,`<button>`,`<div>` etc.).

This will cause us to have to make a few modifications outside of the reactstrap documentation. To style our navbar we can use  the built in CSS in JS `<style jsx>` shipped by default with nextjs.

Inserting CSS in JS as: 
```javascript
<style jsx> {`
  a { color: yellow }
`}
</style>
```

Allows us to scope CSS to the components the style tag is rendered in, you can also pass in the global option to set a global style: `<style jsx global>`

You can read more on CSS in JS in the Next documents [here]( https://nextjs.org/docs/#css-in-js).

Open the `Layout.js` file and create the shared layout components and insert the Stripe script (for later) as follows:

Path: `/frontend/components/Layout.js`

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

Edit the `index.js` file to use the new Layout component:

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

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

You should now have a shared header bar across all your pages:

![Bootstrap](https://thepracticaldev.s3.amazonaws.com/i/1gencefjkukmrf0kre60.png)

We will create two additional pages to allow users to sign in and sign up at `/signin` and `/signup` respectively. 

You will need to create the corresponding files inside the `/pages` directory for next to recognize the routes.

```
cd ..
cd pages

touch signin.js
touch signup.js
```

Populate the files with the following code that we will come back to once our Strapi server is setup.

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

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

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

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

----------------------

You should now see the routes at http://localhost:3000.

### Strapi

Having a frontend is good, but your app obviously needs a backend to manage users, restaurants, dishes and orders. To make the magic happen, let's create a Strapi API.

#### Install Strapi

*Requirements: please make sure to use [Node 9](https://nodejs.org/en/download) (or more) and have either [MongoDB](https://docs.mongodb.com/manual/installation/), Postgres or MySQL installed and running on your machine.*

Install Strapi using npm:

```
npm i strapi@alpha -g
```

*Note: Strapi v3 is still an alpha version, but it will be fine for this tutorial.*

#### Generate a Strapi project
Scaffold your API inside the `strapi-deliveroo` through a single command line:

Install a strapi server in a directory called `backend`:
```
cd ..
cd ..
strapi new backend
```

The CLI will ask you to choose your database: select MongoDB, Postgres or MySQL. Then, fill the database information in (if you choose a DB other than mongo you will need to alter the _id field to id in the preceding GraphQL queries). The default values should work if you correctly installed the database system on your machine.

Note: This tutorial uses MongoDB, once you create the strapi project you will be asked to start the Mongo instance before you can start your strapi server.

Navigate to the installation of your MongoDB (default on MacOS)

```
cd ~./data/db
mongod 
```

This will start you MongoDB server on your local machine and you can now start your Strapi Server.


#### Start the server
Launch the Node.js server:

```
cd backend
strapi start
```

![Strapi start](https://thepracticaldev.s3.amazonaws.com/i/49ebo3pzn35jah8gnrop.png)

Starting now, you should be able to visit the admin panel of your project: http://localhost:1337/admin.

#### Create your first User

Add your first user from the [registration page](http://localhost:1337/admin/plugins/users-permissions/auth/register).

![Strapi register](https://thepracticaldev.s3.amazonaws.com/i/n9pei9osfx7e7cas23jp.gif)

Good job, you successfully setup both Next.js and Strapi projects! 🎉

🏠 In the next section, you will learn how to display the **list of restaurants**: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----restaurants-list-part-27-10ce