Deliveroo clone with Nuxt, GraphQL, Strapi and Stripe

By Pierre Burgy, revised by Maxime Castres on August 19, 2019.

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

This demo, of the final result, below should make you hungry:

This tutorial is part of the « Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe »:

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

Note: The source code is available on GitHub: https://github.com/strapi/strapi-tutorials/tree/master/tutorials/deliveroo-clone-nuxt-strapi-tutorial*

Introduction

Nuxt

Nuxt.js is an amazing framework for creating apps with Vue.js. Designed to build production ready applications, it provides a solid project structure built with Webpack and Babel.

Vue.js is one of the most famous front-end frameworks, with more than 100K stars (🙈) on GitHub. Created in 2014 by Evan You, VueJs has quickly become a leading Javascript framework thanks to three main advantages: and extremely simple yet powerful API, a small library size, and great performance.

GraphQL

REST is the convention powering 99% of the live APIs. Succeeding SOAP, it quickly became the de-facto convention because of its simplicity.

In 2015, Facebook published GraphQL: a powerful query language to request APIs. Since its publication, it kept growing and has been adopted by giants, such as GitHub, Twitter and Yelp.

Strapi

Strapi is the The open source Headless CMS Front-End Developers love. It saves weeks of API development time.

With its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. 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 customisable and extensible, thanks to the plugin system.

Stripe

Stripe is an online payement processor which makes developers' life much easier when dealing with payments. In this tutorial, you will use it to process orders.

Looking forward to cook this app? Let's get started!

Setup

Install Nuxt

First of all, you are going to setup the Nuxt.js project.
- Instal the Vue cli

yarn global add @vue/cli  
# OR
npm install -g @vue/cli  

• Create and enter a directory named deliveroo-clone-tutorial:

mkdir deliveroo-clone-tutorial  
cd deliveroo-clone-tutorial  

• Then, in this new folder, generate a new Nuxt.js project called frontend:

yarn create nuxt-app frontend  
# OR
npx create-nuxt-app frontend  
# OR
npm init nuxt-app frontend  

After running the command above, you may answer the questions, but you only need to answer the following question. Otherwise, just hit enter:
- Choose between npm and yarn as your package manager (we recommend yarn)

? Project name: frontend
? Project description: Cooking a Deliveroo clone
? Author name: Me
? Choose the package manager: Yarn
? Choose custom server framework: None (Recommended)
? Choose Nuxt.js modules ...
? Choose linting tools ...
? Choose test framework ...
? Choose rendering mode Universal ...

Run either:
- cd frontend && yarn dev - cd frontend && npm run dev

Here you are! Open http://localhost:3000 to discover your brand new app.

Install UIkit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. You are going to use this css framework for this tutorial.

• Install uikit ./frontend

yarn add uikit  

Now you need to initialize UIkit's Js in your Nuxt app. You are going to do this by creating a plugin.
- Create a ./frontend/plugins/uikit.js file and copy/paste the following code:

import Vue from 'vue'

import UIkit from 'uikit/dist/js/uikit-core'  
import Icons from 'uikit/dist/js/uikit-icons'

UIkit.use(Icons)  
UIkit.container = '#__nuxt'

Vue.prototype.$uikit = UIkit  

Plugins need to be referenced in nuxt.config.js file and css files too.
- Add the following code in your nuxt.config.js

...
css: [  
  "uikit/dist/css/uikit.min.css",
  "uikit/dist/css/uikit.css",
],
/*
** Plugins to load before mounting the App
*/
plugins: [  
  { src: '~/plugins/uikit.js', ssr: false }
],
...

Great! UIkit is ready!
Now let's create your first component!

Creating the Header component

This Header.vue component will be used on every page of your application.

• Create a Header.vue component in components directory.

/frontend/components/Header.vue

<template>  
  <client-only>
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li class="uk-active"><router-link tag="a" class="navbar-brand" to="/" exact>Deliveroo clone</router-link></li>
                <li><router-link tag="a" class="navbar-brand" to="/restaurants" exact>Restaurants</router-link></li>
            </ul>

        </div>

    </nav>
  </client-only>
</template>  

The layouts/default.vue component is the root of all yours pages. Inside this component lies your <nuxt /> application (the pages you are about to create for this tutorial)

In the next step, you will copy/paste the following code in order to use the new Header component, you need to import it in the <script> section and delete the unnecessary CSS styles. You'll also define a section and a container where all your code will be
- Copy/paste the following code to replace the default.vue file.

/frontend/layouts/default.vue

<template>  
  <div>
    // You call your new Header component
    <Header />

    <div class="uk-section uk-section-default">
      <div class="uk-container uk-container-large">

        // This is where all yours pages will be
        <nuxt />

      </div>
    </div>

  </div>
</template>

<script>  
// Import your new Header component
import Header from '~/components/Header.vue'  
export default {  
  components: {
    Header
  }
}
</script>  

Now let's modify your homepage. This is your /frontend/pages/index.vue file

• Clean your homepage content and remove its style:

/frontend/pages/index.vue

<template>  
  <div>
    <img src="https://media.giphy.com/media/zBL9j9oiR3VM4/giphy.gif" class="uk-position-center" alt="">
  </div>
</template>  

Now you should be able to get to your homepage (index.vue) that resides in your layouts/default.vue which import your Header.vue component

• Reload the page to see your changes at http://localhost:3000.
• yarn dev or npm run dev if you stopped your frontend

Strapi

Having a frontend is good, but your app obviously needs a backend to manage users, restaurants, dishes and orders. To make the magic happen, let's create a Strapi project to manage your content.

Install Strapi

Requirements: Please make sure to use Node 10 (or more) and have either MongoDB, Postgres or MySQL installed and running on your machine.*

Strapi can be used with different databases. You will use the --quickstart option which will easily install Strapi with a SQLite database. This is recommended for prototyping and developing with Strapi. (Unless using MongoDB).

• Install Strapi and generate a project called backend:

/deliveroo-clone-tutorial

yarn create strapi-app backend --quickstart  
# OR
npx create-strapi-app backend --quickstart  

Wait a few seconds until your project is up and running. Your web browser should be automatically open. If not, visit http://localhost:1337/admin/ for the next step.

Note: This is how to start Strapi server in case you stopped the running process

strapi develop  

Create your first Administrator

• Add your first administrator from the registration page.

Good job, you successfully setup both Nuxt.js and Strapi projects! 🎉

🍔 In the next section, you will learn how to display the list of restaurants: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-restaurants-list-part-2-7/

News in your inbox

Did you enjoy this article? Subscribe to get the latest posts and the most important updates!