🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🍔 Dishes list (part 3/7)

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: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

🍔 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 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 to 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 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 setup 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://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho

Comments

[WooberlyEats]

Hi There,

Deliveroo like food delivery app platforms are popping up everywhere, so now is the ideal time for entrepreneurs to launch their on-demand food delivery platforms. Take a research about the deliveroo clone and how it will help entrepreneurs.

[Wilfredo Pérez]

Quick question Ryan, adding express and creating a server.js file overrides the default configuration of Next.js?

[Ryan]

Hey Wilfredo, adding the server.js file shouldn't override the default configuration of Next. Next will still be able to server side render as before, all adding that file is doing is giving you control over your routes/business logic on the server side. Everything will keep working as expected with Next

[Wilfredo Pérez]

Hey Ryan, one last thing in this part. I got and error in the last part, and It was because the

<Card style={{ width: "30%", margin: "0 10px" }}>

didn't have the key prop, so when I added it the error gone.

<Card style={{ width: "30%", margin: "0 10px" }} key = { res.id }>

Now I go to the next part. Thanks for this awesome tutorial.

[Ryan]

Good find Wilfredo, I'll add that to the code!

[Wilfredo Pérez]

Thanks a lot for you response. I've learned a lot of things :D

[Divya]

Hi There,

Informative post! Thanks for sharing with us, Nice post! I would like to share some additional information regards, deliveroo clone script, If anyone wants to build your own food ordering and delivery app like deliveroo in react native? then, It will be more easy with ready-made deliveroo clone app solutions.

[Mike Salib]

I get this error:
Cannot read property 'map' of undefined