Deliveroo clone with Next.js, GraphQL, Strapi and Stripe (3/7)

Disclaimer You can find the updated version of this tutorial

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

Table of contents

• 🏗️ Setup (part 1)
• 🏠 Restaurants (part 2)
• 🍔 Dishes (part 3) - current
• 🔐 Authentication (part 4)
• 🛒 Shopping Cart (part 5)
• 💵 Order and Checkout (part 6)
• 🚀 Bonus: Deploy (part 7)

Note: the source code is available on GitHub.

🍔 Dishes list

Congratulations, you successfully displayed the list of restaurants! This was the first major step.

Define Content Type

Every restaurant sells dishes, which also must be stored in the database. So, we now need a new Content-Type, obviously named dish. Since you already know how to create it, I am going to give only its attributes:

• name with type String.
• description with type Rich Text.
• image with type Media.
• price with type Number (integer).
• restaurant with type Relation: this one is a bit more specific. Our purpose here is to tell Strapi that every dish can be related to a restaurant. To do so, create a one-to-many relation, as below.

Here is the final result:

Add some entries

Then, add some dishes from the Content Manager: http://localhost:1337/admin/plugins/content-manager/dish. Make sure they all have an image and are linked to a restaurant.

Display dishes

We will use a new route for /restaurants that will take in the ID of the restaurant and return the list of dishes for that restaurant:

cd ..
cd ..
cd pages
touch restaurants.js

Path: /frontend/pages/restaurants.js

Now you should see your list of dishes associated with that restaurant if you navigate via the browser.

We will add the cart in the upcoming sections, hang tight!

You will notice that if you navigate to the restaurant route and hit refresh, you will get a 404 page. This is because when you click the Link component the client is handling the routing, but on refresh, the route is not found by the server.

To handle this we can set up an express server coupled with Next to render the route properly.

yarn add express

Next, create a file server.js inside the root of your project directory.

cd ..
touch server.js

Path: /frontend/server.js

To use the custom express server edit your packages.json file and replace the script section with:

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }

Restart the dev server, now with a refresh, you should see the appropriate dishes as expected on a page refresh.

🔐 In the next section, you will learn how to authenticate users in your app (register, logout & login): https://blog.strapi.io/strapi-next-authentication.