🍝 Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe

🏗️ Setup (part 1/7)

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.

The demo of the final result should make you hungry:

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

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 framework, with more than 100K stars (🙈) on GitHub. Created in 2014 by Evan You, it quickly became a reference thanks to three main advantages: extremely simple yet powerful API, small library size, and great performances.

GraphQL

REST is the convention powering 99% of the live APIs. Succeeding to 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 have been adopted by giants, such as GitHub, Twitter and Yelp.

Strapi

Strapi is the most advanced Node.js API Content Management Framework. Halfway between a Node.js Framework and a Headless CMS, 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. 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 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, we will use it to proceed orders.

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

Table of contents

🏗️ Setup

Nuxt

First of all, you are going to setup the Nuxt project. To do so, install Vue CLI:

npm install -g vue-cli

Create a directory named deliveroo-clone-tutorial:

mkdir deliveroo-clone-tutorial

Then, in this new folder, generate a new Nuxt project:

cd deliveroo-clone-tutorial
vue init nuxt-community/starter-template client

Press enter for every question.

Install the node modules:

cd client npm install

At this point, you should see a list of generated files in the new client folder. To know more about this structure, take a look at the Nuxt directory structure documentation.

Finally, start the app from the client directory:

npm run dev

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

Adding Bootstrap

To get a better design, we are going to add Bootstrap. To do so, update the installed dependencies:

npm i bootstrap-vue

Add bootstrap-vue/nuxt to modules section of nuxt.config.js:

Path: nuxt.config.js

Creating the Header component

In the same time, we are going to create our first component that we will reuse across the project.

Path: components/Header.vue

Use it in the default layout remove its style:

Path: layouts/default.vue

Clean the homepage content and remove its style:

Path: pages/index.vue

Restart the server to see your changes at http://localhost:3000.

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 API.

Install Strapi

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

Install Strapi using npm:

npm i strapi@alpha -g

Note: Strapi v3 is still an alpha version, but it will be fine for this tutorial.

Generate a Strapi project

Scaffold your API inside the deliveroo-clone-tutorial through a single command line:

cd deliveroo-clone-tutorial
strapi new server

The CLI will ask you to choose your database: select MongoDB, Postgres or MySQL. Then, fill the database information in. The default values should work if you correctly installed the database system on your machine.

Start the server

Launch the Node.js server:

cd server strapi start

Starting now, you should be able to visit the admin panel of your project: http://localhost:1337/admin.

Create your first User

Add your first user from the registration page.

Good job, you successfully setup both Nuxt 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.


Originally published at blog.strapi.io on July 3, 2018.

Like what you read? Give Pierre Burgy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.