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 typeString
. -
description
with typeText
. -
image
with typeMedia
. -
price
with typeNumber
(integer). -
restaurant
with typeRelation
: 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
Top comments (8)
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.
Quick question Ryan, adding express and creating a server.js file overrides the default configuration of Next.js?
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
Hey Ryan, one last thing in this part. I got and error in the last part, and It was because the
didn't have the key prop, so when I added it the error gone.
Now I go to the next part. Thanks for this awesome tutorial.
Good find Wilfredo, I'll add that to the code!
Thanks a lot for you response. I've learned a lot of things :D
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.
I get this error:
Cannot read property 'map' of undefined