Deliveroo clone with Next.js, GraphQL, Strapi and Stripe (4)

Introduction

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first. I’ve been using Strapi for some of my Open Source projects, and the developer experience is excellent. It has helped me build prototypes and products much faster.

Next.js is a React framework for building Server-side rendered applications. It has many features with a good developer experience and supports TypeScript out of the box.

NextAuth is an authentication library built for use with Next.js. It’s easy, fast, and secure.

The code for this tutorial is available on GitHub.

Building the api with strapi

We have Strapi up and running; the next step is to create our products content-type.

1. To Create the Article Content Type

Creating a new strapi application

In this section, we’ll create a new Strapi application using Docker. More information about how to create a new Strapi application using Docker can be obtained from their repository. We’ll use Postgres to do this.

We can create a new directory and name it “backend” in the root of our project. We can create a new file docker-compose.yml inside the backend directory with the following content:

Creating the project

Before all, you need to create a Strapi API:

$ npminstall strapi@alpha -g
$ strapi new my-app
$ cd my-app && strapi start

And also, your front-end application:

$ npminstall create-react-app -g
$ create-react-app good-old-react-authentication-flow

Getting started with strapi ep3: authentication

Installing and integrating nextauth with next.js and strapi

In this section, we’ll be installing and integrating NextAuth.

We can run the following command inside our frontend directory to install NextAuth as a dependency:

yarnadd next-auth

Next, we’ll need to create a new file, …nextauth.js, inside frontend/pages/api/auth directory with the following content:

// frontend/pages/api/auth/[...nextauth].js

Installing nuxt.js

To install Nuxt.js,visit the Nuxt docs.

We want to use Nuxt in SSR mode and server hosting; we also want Tailwind CSS as our preferred CSS framework. Select those and whatever options you want for the rest. Preferably, leave out C.I, commit-linting, and style-linting.

• To install Nuxt.js, run the following commands:

yarn create nuxt-app <project-name> //using yarn    npx create-nuxt-app <project-name> //using npx
npm init nuxt-app <project-name> //using npm

It will ask you some questions (Name, Nuxt Options, UI Framework, TypeScript, Linter, Testing Framework, etc.).

Once all the questions are answered, the dependencies will be installed. The next step is to navigate to the project folder and launch it using the command below.

yarn dev //using yarnnpm run dev //using npm

Setting up strapi

Just like Next.js, Strapi also has an npm package that makes it easy to start a project.

Run npx create-strapi-app strapi-app to create a Strapi project. When prompted, choose the Quickstart option.

Software required to run the application

1. Docker (Click here to download.)
2. npm (Click here to download.)
3. yarn (Click here to download.)

Table of contents

Here’s what we’ll be building:

Let’s get started!

Front-end app architecture

I’m a huge fan of the React Boilerplate architecture so I created something similar to organize my code: