Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

_Updated April 2023_
This tutorial will walk you through how to use [Next.js](https://strapi.io/integrations/nextjs-cms) to power your UI, complete using **GraphQL, Stripe, Strapi, and Next** to developing a full-stack application complete with the powerful Strapi (Headless CMS) powering the backend.

Get ready to develop an **online food ordering app, more info on the tech stack here:** [**Next.js**](https://strapi.io/integrations/nextjs-cms)**,** [**GraphQL**](https://graphql.org/)**,** [**Stripe**](http://stripe.com/) **and** [**Strapi**](https://strapi.io/)!

From sign up to order, you are going to let users discover restaurants, dishes and order meals.

Your app will be complete with user login, registration, authentication, image upload, restaurant creation, dish creation, cart functionality, and stripe order integration.

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

![Final Walk-Through 3](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/full-app-preview.gif)

> Note: the source code is available on GitHub [here](https://github.com/divofred/food-ordering-app)

Screenshots of final product:

![First Screenshot](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/project-screen-1.png)

![First Screenshot](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/project-screen-1.png)

![First Screenshot](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/project-screen-3.png)

### Strapi:

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

With its extensible plugin system, it provides an enormous set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. **Strapi is 100% open-source,** which means:

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

### Next.js:

[**Next**](https://nextjs.org/) [](https://strapi.io/integrations/nextjs-cms)is a lightweight **React** framework to create server-rendered applications. Next.js will take care of the heavy lifting of the application build such as _code splitting, HMR (hot module replacement) SSR (server-side rendering)_ and allow us to focus on writing the code, not our build config.

### 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 payment processor for applications today. Stripe has developed the tools and SDKs to allow developers to craft and integrate _secure, compliant payment processing_ into any app with ease.

## Table of contents

- 🏗️ [Setup](https://strapi.io/blog/nextjs-react-hooks-strapi-food-app-1) (part 1) - **Current**
- 🏠 [Restaurants](https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2) (part 2)
- 🍔 [Dishes](https://strapi.io/blog/nextjs-react-hooks-strapi-dishes-3) (part 3)
- 🔐 [Authentication](https://strapi.io/blog/nextjs-react-hooks-strapi-auth-4) (part 4)
- 🛒 [Shopping Card](https://strapi.io/blog/nextjs-react-hooks-strapi-shopping-cart-5) (part 5)
- 💵 [Order and Checkout](https://strapi.io/blog/nextjs-react-hooks-strapi-checkout-6) (part 6)
- 🚀 [Bonus: Deploy](https://strapi.io/blog/nextjs-react-hooks-strapi-deploy) (part 7)

## 🏗️ Setup

### Next.js

To set up [Next.js](https://strapi.io/integrations/nextjs-cms) you will need an empty directory to install the dependencies and host our project root.

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

1. Run the code below in your terminal to create this project’s source folder.

```bash
  mkdir next-food-delivery
```

2. Next, Open the `next-food-delivery` folder in your favourite code editor, VS Code preferably and run the following code in the integrated terminal.

```bash
  npx create-next-app@latest frontend
```

You should see the following output.

```bash
  ➜ npx create-next-app@latest frontend
  Need to install the following packages:
  create-next-app@13.3.4
  Ok to proceed? (y) y
```

Here are the options I selected for this tutorial, make sure you chose the same ones to follow along:

```bash
➜ next-food-delivery npx create-frontend frontend
  Need to install the following packages:
  create-next-app@13.3.4
  Ok to proceed? (y) y
✔ Would you like to use TypeScript with this project? … No
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Would you like to use experimental `app/` directory with this project? … No
✔ What import alias would you like configured? … @/*
Creating a new Next.js app
```

The following code will create a folder named `frontend` and set up NextJS.

First things first, let's set up our environment variables to avoid hard coding the API URL and having to update it on every deployment.
Create a new file in the project’s directory and add the following code.

```bash
  cd frontend
  touch .env.development
```

Inside `/.env.development` development file add the following code:

```bash
    NEXT_PUBLIC_API_URL='http://localhost:1337'
```

### Adding Tailwind

This tutorial makes use of [Next And Tailwind](https://tailwindcss.com/docs/guides/nextjs) to implement Tailwind into the application.

**Tailwind** is a front-end library to easily style your application. This will take care of the heavy lifting on the front end.
Open your terminal in the `frontend` directory and run the following command:

> Note: if you selected to use tailwind in the previous option you can omit this step.

```bash
  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
```

**Configure your template paths**
Add the following code inside the `tailwind.config.js` file.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

**Add the Tailwind directives to your CSS**
Add the @tailwind directives by replacing your css inside the `styles/globals.css` file with the following.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

If the above was created for you automatically, you can remove all of the other css after the @tailwind directives.

We are importing our CSS in the `_app.js` file inside the **pages directory** . This will allow us to share our CSS and and Layout component across all pages.

> You can read more about the `_app.js` handling [here](https://nextjs.org/docs/advanced-features/custom-app)

1. Open the **pages** folder, select the `_app.js` to see where we are importing our CSS.

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

```javascript
import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

1. Now replace the code inside the **index.js** file with the following to test out **tailwind** CSS.

Path: `frontend/pages/index.js`

```jsx
import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="mx-auto container">
        <button className="inline-block py-3 px-7 w-full md:w-auto text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm">
          Primary button
        </button>
      </main>
    </>
  );
}
```

2. Next, open your terminal in the frontend directory and start the next application by running the command below.

```bash
   npm run dev
```

Open this URL, [localhost:3000](http://localhost:3000), in your favourite browser to view the next app. You should get an output similar to the one below.

![Homepage](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/testing-tailwind.png)

**Designing the page**
Now that we have Tailwind running inside of our Next project, we can style the shared frontend components like the nav bar.

3. Create a folder in the **frontend** directory named **components** to store all the components for the next application and create a file named **Layout.jsx.**

Add the following code bellow:

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

```jsx
import Head from "next/head";
import Link from "next/link";

function Navigation() {
  return (
    <nav className="container mx-auto flex justify-between p-6 px-4">
      <div className="flex justify-between items-center w-full">
        <div className="xl:w-1/3">
          <Link
            className="block text-lg max-w-max ext-coolGray-500 hover:text-coolGray-900 font-medium"
            href="/"
          >
            Food Order App
          </Link>
        </div>

        <div className="xl:block xl:w-1/3">
          <div className="flex items-center justify-end">
            <Link
              className="text-coolGray-500 hover:text-coolGray-900 font-medium"
              href="/"
            >
              Home
            </Link>
            <Link
              className="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md"
              href="/login"
            >
              Log In
            </Link>
            <Link
              className="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md"
              href="/register"
            >
              Sign Up
            </Link>
          </div>
        </div>
      </div>
    </nav>
  );
}

export default function Layout(props) {
  const title = "Welcome to Nextjs";

  return (
    <div>
      <Head>
        <title>{title}</title>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <Navigation />
      <div className="container mx-auto px-4">{props.children}</div>
    </div>
  );
}
```

4. Edit the `_app.js` file to use the new Layout component across the application:

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

```jsx
import "@/styles/globals.css";
import Layout from "@/components/Layout";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}
```

You should now have a shared header bar across all your pages, as shown in the output below:

![Homepage with the nav bar](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/nav-component.png)

### Creating the Login and Sign up page

1. Create two additional pages in the **pages** folder to allow users to sign in and sign up named **login.js** and **register.js,** respectively.
2. Populate the files with the following code.

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

```jsx
/* pages/register.js */
export default function RegisterRoute() {
  return <h1>Sign Up</h1>;
}
```

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

```jsx
/* pages/login.js */

export default function LoginRoute() {
  return <h1>Log In</h1>;
}
```

You should now see the routes at [http://localhost:3000/login](http://localhost:3000/login) and [http://localhost:3000/register](http://localhost:3000/register)

**Setting up the database**
This tutorial uses [PostgreSQL](https://www.postgresql.org/) as the database for this application.

1. Head on to the [download page](https://www.postgresql.org/download) for PostgreSQL and follow the prompts to install PostgreSQL on your local machine.
   > This tutorial uses Windows 10 as its operating system.
2. Search and open up _PgAdmin_ in the start menu of your computer. _PgAdmin_ will help create and manage your _Strapi database._
   > PgAdmin is installed when you install [PostgreSQL](https://www.postgresql.org/download/).
3. When PgAdmin opens, you will be prompted to put in the password entered during the installation as shown below.
   ![PyAdmin Screenshot](https://paper-attachments.dropbox.com/s_2AB6CD6238DB99E473ED13F1FBA90C2266A685066D162C9FB97895FCD9D8F400_1648245416520_PgAdmin+Password.jpg)

4. On the left navigation bar, click on **Servers** and click on **PostgreSQL** **14**.
   ![A Sample Screenshot](https://paper-attachments.dropbox.com/s_2AB6CD6238DB99E473ED13F1FBA90C2266A685066D162C9FB97895FCD9D8F400_1648257844042_PgAdmin+clicks.jpg)

5. Right-click on **Databases,** hover over **Create** and click on **Database**.
   ![A Sample Screenshot](https://paper-attachments.dropbox.com/s_2AB6CD6238DB99E473ED13F1FBA90C2266A685066D162C9FB97895FCD9D8F400_1648259457129_PgAdmin+Rightclick.jpg)

6. You can name the database anything you desire, but, in this tutorial, the name of the database is **nextapp**. Once you're done naming the database, hit save.
   ![nextapp database](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1660842285718_save+database.jpg)

The name of the database, **nextapp**, will be shown on the left navigation bar. Clicking on it will prompt a drop-down as shown below:

![](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1660842130259_nexapp+showing.jpg)

### Install Strapi

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

> Please use version >=[Node 9](https://nodejs.org/en/download) and have PostgreSQL installed and running on your machine.

**Create Strapi server**

1. Open your terminal in the `next-food-delivery`'s directory and run the following code to create a **Strapi** application.

```bash
  npx create-strapi-app@latest backend
```

2. Running the above command for the first time will prompt you with steps to install **Strapi** Choose **custom** settings and follow the installation steps. Make sure to provide your credential for the postgres database that we created earlier.

Here are my options:

```bash
➜  next-food-delivery npx create-strapi-app@latest backend
? Choose your installation type Custom (manual settings)
? Choose your preferred language JavaScript
? Choose your default database client postgres
? Database name: nextapp
? Host: 127.0.0.1
? Port: 5432
? Username: postgres
? Password: ***********
? Enable SSL connection: No

Creating a project with custom database options.
```

3. Once the installation is complete, you should see the following output.

```bash
Available commands in your project:

  yarn develop
  Start Strapi in watch mode. (Changes in Strapi project files will trigger a server restart)

  yarn start
  Start Strapi without watch mode.

  yarn build
  Build Strapi admin panel.

  yarn strapi
  Display all available commands.

You can start by doing:

```

You can start your project by running the following command:

```bash
  cd backend
  npm run develop
```

4. Once the application starts you should see the following.

![Admin sign up](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1661125603160_Strapi+Admin+-+Google+Chrome+2022-08-21+23-18-24.gif)

5. As shown in the output below, Strapi wants to know a bit about you. You can choose to answer or decide to skip this question.

![](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1661120392747_image.png)

6. Open the **Backend** folder, click on **backend**, and select **database.js** from the **config** folder to see your configuration file.

You should see the following code that was automatically setup for you when we created your Strapi project with your postgres credentials.

```javascript
//
 postgres: {
      connection: {
        connectionString: env('DATABASE_URL'),
        host: env('DATABASE_HOST', 'localhost'),
        port: env.int('DATABASE_PORT', 5432),
        database: env('DATABASE_NAME', 'strapi'),
        user: env('DATABASE_USERNAME', 'strapi'),
        password: env('DATABASE_PASSWORD', 'strapi'),
        ssl: env.bool('DATABASE_SSL', false) && {
          key: env('DATABASE_SSL_KEY', undefined),
          cert: env('DATABASE_SSL_CERT', undefined),
          ca: env('DATABASE_SSL_CA', undefined),
          capath: env('DATABASE_SSL_CAPATH', undefined),
          cipher: env('DATABASE_SSL_CIPHER', undefined),
          rejectUnauthorized: env.bool(
            'DATABASE_SSL_REJECT_UNAUTHORIZED',
            true
          ),
        },
        schema: env('DATABASE_SCHEMA', 'public'),
      },
      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
    },
//

```

You can find your database variables within your .env file.

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

🏠 In the next section, you will learn how to display the **list of restaurants**: [https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2](https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2).

Learn how to create a food ordering app with Strapi and Next.js using React Hooks. 

Create a Food Ordering App with Strapi and Next.js (1/7)

medium_7).png

small_7).png

thumbnail_7).png

Create a Food Ordering App with Strapi and Next.js (1/7).png

Create a Food Ordering App with Strapi and Next.js 1/7

Ryan is an active member of the Strapi community and he's been contributing at a very early stage by writing awesome tutorial series to help fellow Strapier grow and learn. 

**Tutorial updated by [Fredrick Emmanuel](https://strapi.io/user/fredrick-emmanuel) and [Paul Bratslavsky](https://strapi.io/user/paul-bratslavsky)** 

*This tutorial is part of the « Cooking a Deliveroo clone with Next.js (*[*React*](https://strapi.io/integrations/react-cms)*), GraphQL, Strapi and Stripe » tutorial series.*

**Table of contents**

- 🏗️ [Setup](https://strapi.io/blog/nextjs-react-hooks-strapi-food-app-1) (part 1)
- 🏠 [Restaurants](https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2) (part 2)
- 🍔 [Dishes](https://strapi.io/blog/nextjs-react-hooks-strapi-dishes-3) (part 3)
- 🔐 [Authentication](https://strapi.io/blog/nextjs-react-hooks-strapi-auth-4) (part 4)
- 🛒 [Shopping Cart](https://strapi.io/blog/nextjs-react-hooks-strapi-shopping-cart-5) (part 5)
- 💵 [Order and Checkout](https://strapi.io/blog/nextjs-react-hooks-strapi-checkout-6) (part 6)
- 🚀 [Bonus: Deploy](https://strapi.io/blog/nextjs-react-hooks-strapi-deploy) (part 7) - **Current**

**Note:** the source code is available on GitHub [here](https://github.com/divofred/food-ordering-app)

# 🚀 Bonus: deploy

At this point, you only need to deploy our API and the web app.
Strapi can be hosted on any major provider offering node deployments (Strapi Cloud, AWS, Heroku, DO, Railway, Render). Read further about the [deployment of Strapi](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment.html).

# Prerequisites
- [Nodejs v16+](https://nodejs.org/en/download/) installed
- A [GitHub account](https://github.com/signup)
- A [Vercel account](https://vercel.com/signup)

# Deploying the Backend

In this article, we will deploy our backend Strapi source code to Render. [Render](https://render.com/) is s a fully-managed cloud platform where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place. It is a fully-managed cloud platform where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.

## Getting Started

Let’s install the following packages that will help us to easily destructure our PostgreSQL database’s URL to obtain the PostgreSQL connection details.

```bash
    npm i pg pg-connection-string
```

Next, open the **database.js** file in the **config** folder and replace the code in it with the one below.

```jsx
    const path = require("path");
    
    const parse = require("pg-connection-string").parse;
    const config = parse(process.env.DATABASE_URL);//Getting the URL from the Environment
    
    module.exports = ({ env }) => {
      const client = env("DATABASE_CLIENT", "postgres");
    
      const connections = {
        mysql: {
          connection: {
            connectionString: env("DATABASE_URL"),
            host: env("DATABASE_HOST", "127.0.0.1"),
            port: env.int("DATABASE_PORT", 5432),
            database: env("DATABASE_NAME", "strapi"),
            user: env("DATABASE_USERNAME", "strapi"),
            password: env("DATABASE_PASSWORD", "strapi"),
            ssl: env.bool("DATABASE_SSL", false) && {
              key: env("DATABASE_SSL_KEY", undefined),
              cert: env("DATABASE_SSL_CERT", undefined),
              ca: env("DATABASE_SSL_CA", undefined),
              capath: env("DATABASE_SSL_CAPATH", undefined),
              cipher: env("DATABASE_SSL_CIPHER", undefined),
              rejectUnauthorized: env.bool(
                "DATABASE_SSL_REJECT_UNAUTHORIZED",
                true
              ),
            },
          },
          pool: {
            min: env.int("DATABASE_POOL_MIN", 2),
            max: env.int("DATABASE_POOL_MAX", 10),
          },
        },
        postgres: {
          connection: {
            connectionString: env("DATABASE_URL"),//DESTRUCTURING THE URL
            host: config.host,
            port: config.port,
            database: config.database,
            user: config.user,
            password: config.password,
            ssl: env.bool("DATABASE_SSL", false) && {
              key: env("DATABASE_SSL_KEY", undefined),
              cert: env("DATABASE_SSL_CERT", undefined),
              ca: env("DATABASE_SSL_CA", undefined),
              capath: env("DATABASE_SSL_CAPATH", undefined),
              cipher: env(
                "DATABASE_SSL_CIPHER",
                "TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256"
              ),
              rejectUnauthorized: env.bool(
                "DATABASE_SSL_REJECT_UNAUTHORIZED",
                true
              ),
            },
            schema: env("DATABASE_SCHEMA", "public"),
          },
          pool: {
            min: env.int("DATABASE_POOL_MIN", 2),
            max: env.int("DATABASE_POOL_MAX", 10),
          },
        },
        sqlite: {
          connection: {
            filename: path.join(
              __dirname,
              "..",
              env("DATABASE_FILENAME", "data.db")
            ),
          },
          useNullAsDefault: true,
        },
      };
    
      return {
        connection: {
          client,
          ...connections[client],
          acquireConnectionTimeout: env.int("DATABASE_CONNECTION_TIMEOUT", 60000),
        },
      };
    };
```
Now, create the following folders: **env** and **production,** and a file: **plugins.js**, in the **config** folder.

```js
    config
     ┣ env
     ┃ ┗ production
     ┃ ┃ ┗ plugins.js
```

Add the following to the **plugins.js** file that will help config the graphql plugin.

```js
    module.exports = {
      graphql: {
        config: {
          endpoint: "/graphql",
          shadowCRUD: true,
          playgroundAlways: true,
          depthLimit: 10,
          amountLimit: 100,
          apolloServer: {
            tracing: false,
            introspection: true,
          },
        },
      },
    };
```

> Source: https://github.com/strapi/strapi/issues/9105#issuecomment-1080073060

To deploy our Strapi’s source code to Render, we need to deploy the application to GitHub.

```bash
    git init
    git add .
    git commit -m "first commit"
    git branch -M main
    git remote add <repository url>
    git push -u origin main
```
 
## Setting up PostgreSQL

In this section, we will create a PostgreSQL database using the  Render services.

1. Navigate to [Render’s signup](https://dashboard.render.com/register) page to create an account if you don’t have one. You can choose to signup with your Google, GitHub or GitLab account.
2. Once the installation is successful, you’d be redirected to your [dashboard](https://dashboard.render.com/). Click on **New** and select **PostgreSQL.**
![Selecting PostgreSQL](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683316936470_image.png)

3. You’d be redirected to a screen where you’d be prompted to provide the name of the database and the user.

![name and user](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683317648824_image.png)

4. Lastly, select your desired plan and hit the **Create Database** button. This tutorial makes use of the free tier as seen in the output below.

Following all these steps will successfully create our PostgreSQL database. Render has two kinds of PostgreSQL URLs, Internal and External Database URLs. Internal URL is used when the application that is using the Postgres database is hosted in Render. External URL is used when the application is hosted somewhere else and this requires more configuration. Since we are hosting our Strapi application on Render, we would make use of the Internal URL.
Scroll to the **Connections** section and copy the I**nternal Database URL**.

![Internal Database URL](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683320529898_image.png)

## Deploying Strapi
1. Once the database has been created successfully, select **New** and click on **Web Services.**
![New web service](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683320761950_image.png)

2. Next, you’d be prompted to connect your GitHub account. Once you’re connected, select **All repository or** specify the Strapi repository.
![Selecting repository](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683280942906_image.png)

3. Search for the Strapi repository and click **Connect**.
![GitHub repository](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683284094785_image.png)

4. Next, give the project a name and set the Root Directory to the folder that contains Strapi’s source code.
![Name and Root Directory](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683284523830_image.png)

5. Set the **Build Command** to `npm install && npm run build` and the **Start Command** to `npm start`
![Build and Start command](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683284678396_image.png)

6. This tutorial selects the free tier in the **Select Plan** section. You can choose to select another plan according to your taste.
7. Scroll to the bottom, click on **Advanced,** and let’s add the following to the environment variable. Paste the Internal Database URL you copied from the previous section.

```bash
    DATABASE_URL: Internal Database URL
    APP_KEYS: s4RAEbsJAcvpmMgGdWkmMQ==,/yh3FHR2u3SHyaSH8v1IZw==,5TcP4sY0KOl5t7a3ycuBwg==,thCs474mxnaSVY1+fk3QtA==
    JWT_SECRET: S8n42b7XulDz0A2z+/xeZQ==
    API_TOKEN_SALT: Onwo9oDUUf294KJ8W25IbQ==
    ADMIN_JWT_SECRET: ZOnwo9oDUUf294KJ8W25IbQ==
```

![Environmental Variable](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683321608422_image.png)

9. Lastly, scroll down and click **Create Web Service** and watch the build logs for any errors.
![logs](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683323344515_image.png)

> Feel free to comment in the comment section on any errors encountered while deploying the code.

## Setting up Strapi Admin

Once your Strapi project is live, you’d be provided with a URL that will be used to access your Strapi admin panel. This URL can be found at the top of the page.

![Strapi URL](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683323785289_strapi+url.png)

Copy out the URL and append `/admin` to access your admin dashboard. If you are not registered, you’d be prompted to create an admin user.

![](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683323920949_image.png)


In your Strapi’s admin dashboard, click on the following to configure permissions for the various content types.

```bash
    ┣ Settings
    ┃ ┣ Roles
    ┃ ┃ ┗ public
```

![Permissions](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683324612652_dashboard.png)


Select the specific CRUD operations you need for the various content types and hit **Save.**

![](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683324892709_content+type.png)

# Deploying the Frontend

In this tutorial, we will make use of the [Vercel](https://vercel.com/) hosting platform to deploy our NextJS code.

1. Head to your [Vercel dashboard](https://vercel.com/dashboard), select **Add New** and click on **Project.**
![Vercel’s dashboard](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683325641495_image.png)

2. Search for the repository and hit **import.**
![Import](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683325863893_image.png)

3. Under **Root Directory**, click on **Edit** and select the **Frontend** folder.
![Frontend folder](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683325983786_image.png)

4. Click on **Environment Variables** and add the deployed Strapi URL.
![](https://paper-attachments.dropboxusercontent.com/s_E9F590A058ABF42FBC974F087DB3AA257EB223FF42B5C24AABC3AECAC0572749_1683326143860_image.png)

5. Lastly, hit Deploy and look at the various logs for any errors.
# Conclusion

Huge congrats, you have successfully achieved this tutorial. I hope you enjoyed it!

> Note: The source code is available on GitHub [here](https://github.com/divofred/food-ordering-app)

*Still hungry?*
Feel free to add additional features, adapt these projects to your own needs and give your feedback in the comments section.

*Share your meal!*
Did you enjoy this tutorial? Share it around you!

Learn how to create a food ordering app with Strapi and Next.js using React Hooks: Deploy.

Create a Food Ordering App with Strapi and Next.js (7/7)

medium_Create a Food Ordering App with Strapi and Next.js (7/7).png

small_Create a Food Ordering App with Strapi and Next.js (7/7).png

thumbnail_Create a Food Ordering App with Strapi and Next.js (7/7).png

Create a Food Ordering App with Strapi and Next.js (7/7).png

Create a Food Ordering App with Strapi and Next.js 7/7

**Tutorial updated by [Fredrick Emmanuel](https://strapi.io/user/fredrick-emmanuel) and [Paul Bratslavsky](https://strapi.io/user/paul-bratslavsky)** 

*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://strapi.io/blog/nextjs-react-hooks-strapi-food-app-1) (part 1)
- 🏠 [Restaurants](https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2) (part 2)
- 🍔 [Dishes](https://strapi.io/blog/nextjs-react-hooks-strapi-dishes-3) (part 3)
- 🔐 [Authentication](https://strapi.io/blog/nextjs-react-hooks-strapi-auth-4) (part 4)
- 🛒 [Shopping Cart](https://strapi.io/blog/nextjs-react-hooks-strapi-shopping-cart-5) (part 5)
    - 💵 [Order and Checkout](https://strapi.io/blog/nextjs-react-hooks-strapi-checkout-6) (part 6) - **Current**
- 🚀 [Bonus: Deploy](https://strapi.io/blog/nextjs-react-hooks-strapi-deploy) (part 7)

**Note:** the source code is available on GitHub [here](https://github.com/divofred/food-ordering-app)

## 💵 Order and Checkout

You must start starving... I am sure you want to be able to order!

![Order](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/shop-action.gif)

### Define Content Type

You need to store the orders in the database, so a new Content Type will be created in Strapi.
Same process as usual:

- Navigate to the Content-Type Builder (http://localhost:1337/admin/plugins/content-type-builder).
- Click on `+ Create new collection type`.
- Set `order` as a name.
- Click on `Add New Field` and create the followings fields:
  - `address` with type `Text`.
  - `city` with type `Text`.
  - `state` with type `Text`.
  - `amount` with type `Number` (Int).
  - `token` with type `Text`.
  - `dishes` with type `JSON`.
  - `user` relation with user.

![User Relation](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/user-realtion.png)

- Click on Finish then Save.

![Order Collection Type](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/order-content-type.png)

### Allow access

To create new orders from the client, you are going to hit the `create` endpoint of the `order` API. To allow access, navigate to the Roles section ([http://localhost:1337/admin/plugins/users-permissions](http://localhost:1337/admin/settings/users-permissions/roles)), select the `authenticated` role, tick the `order/create` checkbox, and save.

![Order roles permission](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/create-order.png)

### Stripe setup

In this section, you will need Stripe API keys.

To get them, [create a Stripe account](https://dashboard.stripe.com/register) or [log in to Stripe](https://dashboard.stripe.com/login) then navigate to [https://dashboard.stripe.com/account/apikeys](https://dashboard.stripe.com/account/apikeys).

### Add logic

If you have already used Stripe, you probably know the credit card information does not go through your backend server. Instead, the credit card information is sent to the Stripe API (ideally using their SDK).

Then, your front end receives a token that can be used to charge credit cards.

The `id` must be sent to your backend which will create the Stripe charge.

Not passing the credit card information through your server relieves you the responsibility to meet complicated data handling compliance, and is just far easier than worrying about securely storing sensitive data.

Install the `stripe` package in the **backend** directory:

```bash
    npm i stripe --save
```

To integrate the Stripe logic, you need to update the `create` charge endpoint in our Strapi API.

You can learn more on how to customize Strapi controllers [here](https://docs.strapi.io/dev-docs/backend-customization/controllers)

To do so, edit `backend/src/api/order/controllers/order.js` and replace its content with the following code:

> Make sure to insert your stripe secret key (sk\_) at the top where it instructs.

Path: `*/backend/src/api/order/controllers/order.js*`

```js
"use strict";
const stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc");

/**
 *  order controller
 */
const { createCoreController } = require("@strapi/strapi").factories;
module.exports = createCoreController("api::order.order", ({ strapi }) => ({
  async create(ctx) {
    const user = ctx.state.user;

    if (!user) {
      return ctx.unauthorized("You are not authorized!");
    }

    console.log(ctx.request.body.data);
    console.log(ctx.state.user.id);
    console.log("order controller");

    const { address, amount, dishes, token, city, state } =
      ctx.request.body.data;

    try {
      // Charge the customer
      await stripe.charges.create({
        amount: amount,
        currency: "usd",
        description: `Order ${new Date()} by ${ctx.state.user.id}`,
        source: token,
      });

      // Create the order
      const order = await strapi.service("api::order.order").create({
        data: {
          amount,
          address,
          dishes,
          city,
          state,
          token,
          user: ctx.state.user.id,
        },
      });
      return order;
    } catch (err) {
      // return 500 error
      console.log("err", err);
      ctx.response.status = 500;
      return {
        error: { message: "There was a problem creating the charge" },
        address,
        amount,
        dishes,
        token,
        city,
        state,
      };
    }
  },
}));
```

Do not forget to restart the Strapi server.

To interact with the Stripe API, the [react-stripe-js](https://github.com/stripe/react-stripe-js) library will be used, which will give Elements components to style the credit card form and submit the information properly to Stripe.

### Checkout page

Now install the stripe UI elements for the frontend. Open the frontend directory in the terminal and run the following command:

```bash
    npm install @stripe/react-stripe-js @stripe/stripe-js
```

Now let's create our checkout form, in the pages directory create a new file called `checkout.js` and add the following code.

```jsx
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { useInitialRender } from "@/utils/useInitialRender";
import CheckoutForm from "@/components/CheckoutForm";
import CheckoutCart from "@/components/CheckoutCart";
const stripePromise = loadStripe("pk_test_TYooMQauvdEDq54NiTphI7jx");

export default function Checkout() {
  const initialRender = useInitialRender();
  if (!initialRender) return null;

  return (
    <section className="container mx-auto py-24">
      <div className="grid grid-cols-5 gap-4">
        <div className="col-span-2">
          <CheckoutCart />
        </div>
        <div className="col-span-3">
          <Elements stripe={stripePromise}>
            <CheckoutForm />
          </Elements>
        </div>
      </div>
    </section>
  );
}
```

You will notice that we are using some components from Stripe, you can learn more [here](https://stripe.com/docs/stripe-js/react).

As well as useInitialRender, before creating this function, the reason we are using this, is to check if the initial client side code rendered, otherwise we would get `hydration miss-match error`.

Let's create the following file `useInitialRender.js` inside our `utils` folder and paste the following code:

```jsx
import { useState, useEffect } from "react";
export const useInitialRender = () => {
  const [initialRenderComplete, setInitialRenderComplete] = useState(false);

  useEffect(() => {
    if (!initialRenderComplete) setInitialRenderComplete(true);
  }, [initialRenderComplete]);

  return initialRenderComplete;
};
```

Next, we are going to create the `CheckoutForm` and `CheckoutCart` components to capture the credit card info and pass it to Stripe using the react-stripe-elements package:

In the the components directory create a file named name **CheckoutForm.jsx.**

Once done, add the following code:
Path: `frontend/components/CheckoutForm.jsx`

```jsx
import React, { useState } from "react";
import Cookie from "js-cookie";
import { client } from "@/pages/_app.js";
import { gql } from "@apollo/client";
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { useAppContext } from "@/context/AppContext";
import { useRouter } from "next/router";
import { useInitialRender } from "@/utils/useInitialRender";

const options = {
  style: {
    base: {
      fontSize: "32px",
      color: "#52a635",
      "::placeholder": {
        color: "#aab7c4",
      },
    },
    invalid: {
      color: "#9e2521",
    },
  },
};

const INITIAL_STATE = {
  address: "",
  city: "",
  state: "",
  error: null,
};

export default function CheckoutForm() {
  const [data, setData] = useState(INITIAL_STATE);
  const [loading, setLoading] = useState(false);
  const { user, cart, resetCart, setShowCart } = useAppContext();

  const initialRender = useInitialRender();

  const stripe = useStripe();
  const elements = useElements();
  const router = useRouter();

  if (!initialRender) return null;

  function onChange(e) {
    const updateItem = (data[e.target.name] = e.target.value);
    setData({ ...data, updateItem });
  }

  async function submitOrder(e) {
    e.preventDefault();
    const cardElement = elements.getElement(CardElement);
    const token = await stripe.createToken(cardElement);

    if (data.address === "") {
      setData({ ...data, error: { message: "Address is required" } });
      return;
    }

    if (data.city === "") {
      setData({ ...data, error: { message: "City is required" } });
      return;
    }

    if (data.state === "") {
      setData({ ...data, error: { message: "State is required" } });
      return;
    }

    if (token.error) {
      setData({ ...data, error: { message: token.error.message } });
      return;
    }

    const jwt = Cookie.get("token");

    try {
      setLoading(true);

      const { data: response } = await client.mutate({
        mutation: gql`
          mutation CreateOrder(
            $amount: Int
            $dishes: JSON
            $address: String
            $city: String
            $state: String
            $token: String
          ) {
            createOrder(
              data: {
                amount: $amount
                dishes: $dishes
                address: $address
                city: $city
                state: $state
                token: $token
              }
            ) {
              data {
                id
                attributes {
                  token
                }
              }
            }
          }
        `,
        variables: {
          amount: cart.total,
          dishes: cart.items,
          address: data.address,
          city: data.city,
          state: data.state,
          token: token.token.id,
        },
        context: {
          headers: {
            Authorization: `Bearer ${jwt}`,
          },
        },
      });

      if (response.createOrder.data) {
        alert("Transaction Successful, continue your shopping");
        setData(INITIAL_STATE);
        resetCart();
        setShowCart(true);
        router.push("/");
      }
    } catch (error) {
      setData({ ...data, error: { message: error.message } });
    } finally {
      setLoading(false);
    }
  }

  return (
    <form>
      <div className="bg-white shadow-md rounded-lg p-8">
        <h5 className="text-lg font-semibold">Your information:</h5>
        <hr className="my-4" />
        <div className="flex mb-6">
          <div className="flex-1">
            <label
              className="block mb-2 test-gray-800 font-medium"
              htmlFor="address"
            >
              Address
            </label>
            <input
              id="address"
              htmlFor="address"
              className="appearance-none block w-full p-3 leading-5 text-gray-900 border border-gray-200 rounded-lg shadow-md placeholder-text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
              type="text"
              name="address"
              onChange={onChange}
              placeholder="Enter your address"
            />
          </div>
        </div>
        <div className="flex mb-6">
          <div className="flex-1 mr-6">
            <label
              htmlFor="city"
              className="block mb-2 test-gray-800 font-medium"
            >
              City
            </label>
            <input
              type="text"
              name="city"
              id="city"
              onChange={onChange}
              className="appearance-none block w-full p-3 leading-5 text-gray-900 border border-gray-200 rounded-lg shadow-md placeholder-text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
            />
          </div>

          <div className="w-1/4">
            <label
              htmlFor="state"
              className="block mb-2 test-gray-800 font-medium"
            >
              State
            </label>
            <input
              type="text"
              name="state"
              id="state"
              onChange={onChange}
              className="appearance-none block w-full p-3 leading-5 text-gray-900 border border-gray-200 rounded-lg shadow-md placeholder-text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
            />
          </div>
        </div>
        {cart.items.length > 0 ? (
          <div className="p-6">
            <div>Credit or debit card</div>
            <div className="my-4">
              <CardElement options={options} />
            </div>
            <button
              className="inline-block w-full px-6 py-3 text-center font-bold text-white bg-green-500 hover:bg-green-600 transition duration-200 rounded-full"
              onClick={(e) => (user ? submitOrder(e) : router.push("/login"))}
              disabled={loading}
            >
              {loading ? "Submitting" : "Submit Order"}
            </button>
          </div>
        ) : (
          <div className="text-center">
            <h1 className="text-2xl font-semibold">Your cart is empty</h1>
            <p className="text-gray-500">
              Add some items to your cart to continue
            </p>
          </div>
        )}
        <div>
          {data.error && (
            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
              <strong className="font-bold">Error!</strong>{" "}
              <span className="block sm:inline">{data.error.message}</span>
            </div>
          )}
        </div>
      </div>
    </form>
  );
}
```

Here is what happens in our submitOrder function.

This is an asynchronous function named submitOrder that is triggered when clicking the order button and performs the following steps:

1. Prevent the default form submission behavior using e.preventDefault().
2. Obtain the Stripe card element using elements.getElement(CardElement) which is from the Stripe API.
3. Use the stripe.createToken() method to create a token from the card element. The await keyword is used to wait for the token creation to complete before proceeding.
4. If the address, city, or state fields are empty, set the error message using setData({...data, error: { message: "..." }}) and return from the function.
5. If there is an error with the token creation, set the error message using setData({...data, error: { message: token.error.message }}) and return from the function.
6. Get the JWT (JSON Web Token) from a cookie using Cookie.get("token").
7. Use a GraphQL mutation to create an order by calling client.mutate(). The mutation includes the order details (amount, dishes, address, city, state, and token) and the JWT in the headers for authentication.
8. If the order is created successfully, display an alert, reset the form data, clear the cart, show the cart, and redirect to the home page using router.push("/").
9. If there is an error during the GraphQL mutation or any other step, set the error message using setData({...data, error: { message: error.message }}).
10. Finally, set the loading state to false using setLoading(false).

In summary, this code is a function for submitting an order that uses the Stripe API to create a payment token and GraphQL to create an order. It also handles errors and sets loading states accordingly.

Now let's create our `CheckoutCart` component. Create a file inside our **components** folder called `CheckoutCart.jsx`

Path: `frontend/components/CheckoutCart.jsx`

```jsx
import { useAppContext } from "@/context/AppContext";
import { centsToDollars } from "@/utils/centsToDollars";

function CartItem({ data }) {
  const { addItem, removeItem } = useAppContext();
  const { quantity, attributes } = data;
  return (
    <div className="p-6 flex flex-wrap justify-between border-b border-blueGray-800">
      <div className="w-2/4">
        <div className="flex flex-col h-full">
          <h6 className="font-bold text-white mb-1">{attributes.name}</h6>
          <span className="block pb-4 mb-auto font-medium text-gray-400">
            {quantity} x ${centsToDollars(attributes.priceInCents)}
          </span>
        </div>
      </div>
      <div className="w-1/4">
        <div className="flex flex-col items-end h-full">
          <div className="flex justify-between">
            <button
              className="mr-2 inline-block mb-auto font-medium text-sm text-gray-400 hover:text-gray-200"
              onClick={() => removeItem(data)}
            >
              Remove
            </button>
            <button
              className="inline-block mb-auto font-medium text-sm text-gray-400 hover:text-gray-200"
              onClick={() => addItem(data)}
            >
              Add
            </button>
          </div>
          <span className="block mt-2 text-sm font-bold text-white">
            ${centsToDollars(attributes.priceInCents * quantity)}
          </span>
        </div>
      </div>
    </div>
  );
}

export default function CheckoutCart() {
  const { cart } = useAppContext();
  const total = cart.total;
  const displayTotal = Math.abs(total);

  return (
    <div className="rounded-2xl co bg-gray-800">
      <div className="max-w-lg pt-6 pb-8 px-8 mx-auto bg-blueGray-900">
        <div className="flex mb-10 items-center justify-between">
          <h6 className="font-bold text-2xl text-white mb-0">Your Cart</h6>
        </div>

        <div>
          {cart.items
            ? cart.items.map((item, index) => {
                if (item.quantity > 0) {
                  return <CartItem key={index} data={item} />;
                }
              })
            : null}
        </div>
        <div className="p-6">
          <div className="flex mb-6 content-center justify-between">
            <span className="font-bold text-white">Order total</span>
            <span className="text-sm font-bold text-white">
              ${centsToDollars(displayTotal)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
```
---
Now let's test our order form out, for a test credit card number you can just use `4242 4242 4242 4242`, that should work for you.

Now if you select a dish and click **order**, you should see:

![Order Test](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/orderform.gif)

You are now able to let users submit their orders.

Bon appétit!

🚀 In the next (and last) section, you will learn how to **deploy your Strapi app on Heroku** and **your frontend app on** [**NOW**](https://zeit.co/now#get-started): [https://strapi.io/blog/nextjs-react-hooks-strapi-deploy](https://strapi.io/blog/nextjs-react-hooks-strapi-deploy).

Learn how to create a food ordering app with Strapi and Next.js using React Hooks: Order and Checkout. 