DEV Community

Cover image for ๐Ÿ Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - ๐Ÿ” Dishes list (part 3/7)
Ryan
Ryan

Posted on • Updated on

๐Ÿ Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - ๐Ÿ” Dishes list (part 3/7)

Strapi Next.js tutorial

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

Table of contents

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.

Strapi relation

Here is the final result:

Dishes fields

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

Dishes list

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
Enter fullscreen mode Exit fullscreen mode

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.

404

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

yarn add express
Enter fullscreen mode Exit fullscreen mode

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

cd ..
touch server.js
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (8)

Collapse
 
wooberlyeats profile image
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.

Collapse
 
gameoverwill profile image
Wilfredo Pรฉrez

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

Collapse
 
ryanaz profile image
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

Collapse
 
gameoverwill profile image
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.

Thread Thread
 
ryanaz profile image
Ryan

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

Collapse
 
gameoverwill profile image
Wilfredo Pรฉrez

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

Collapse
 
spotneats profile image
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.

Collapse
 
mikeez profile image
Mike Salib

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