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