Strapi Nextjs Deliveroo Clone Tutorial

Technologies Used:

• React (Nextjs)
• GraphQL
• Strapi (Node CMS)
• Stripe - react-stripe-elements
• React Context

---

Full tutorial walk through available:

https://blog.strapi.io/strapi-next-setup/

Demo: https://strapi-deliveroo.herokuapp.com/

Get ready to develop a Deliveroo clone, using amazing technologies: Next.js (React), GraphQL, Stripe and Strapi! From signup to order, you are going to let users discover restaurants, dishes and select their happy meal.

The demo of the final result should make you hungry:

Screenshots of final product:

Strapi:

Strapi is the most advanced open-source Node.js Headless Content Management System used to build scalable, secure, production ready API's quickly and efficiently saving developers countless hours of development.

With its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. Unlike online CMS, Strapi is 100% open-source (take a look at the GitHub repository), which means:

• Strapi is completely free.
• You can host it on your own servers, so you own the data.
• It is entirely customizable and extensible, thanks to the plugin system.

Next.js:

Next is a lightweight development framework to create static, server rendered applications in React. Next.js will take care of the heavy lifting of the application such as code splitting, HMR (hot module replacement) and SSR (server side rendering) and allow us to focus on the application.

React:

React is one of the most popular front end Javascript frameworks, developed by facebook and used by countless tech companies including Netflix, Airbnb and Github to build applications. React is a declarative library that makes it easy to create interactive user interfaces, keeping the code base organized through its component based architecture.

GraphQL:

GraphQL is a query language also developed by Facebook to allow the front end of an application to easily query an application's API. Each query requests only the data needed to be rendered by the current view. This allows the developer to craft a great user experience across multiple devices and screen sizes.

Stripe:

Stripe is one of (if not the largest) payment processor's for application today. Stripe has developed the tools and SDKs to allow developers to craft and integrate secure, compliant payment processing into any app with easy.

Table of contents

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

Enjoy the tutorial!