How to build an e-commerce site with Strapi, Vue.js, and Flutterwave
Building e-commerce applications offer you the opportunity to learn how to handle data from remote sources but more importantly, how to intentionally build web applications that communicate with different services.
Last weekend I picked up a new tool in my list of “to learn” tools. It is called . I enjoyed learning this tool as I got even more exposed to all the features it offers. As a frontend developer, I marvelled at how fast I could build backend services that communicate effortlessly with my frontend application. This is why I decided to share what I've learned with you in hopes that you find it as helpful as I did ( if you don't already use this tool).
At the end of this tutorial, you will learn how to build a mini e-commerce application using Vue.js, Strapi, and Flutterwave:
To build out this tutorial, we are going to use these tools:
- — An online payment gateway that makes it possible for customers to pay for your products anywhere in the world.
Before we get started, here are a few things to note:
- You should have installed on your computer
- You should have an account on
- You should install — a Google Chrome tool for interacting with HTTP APIs.
Now that we've gotten the preliminaries out of the way, let's talk about how we'll build this product. First, we'll use Strapi to create a /products endpoint. This endpoint will return a list of products we'll be selling on our e-commerce store. Afterwards, we'll build a Vue.js client to render these products to customers and finally, we'll integrate Flutterwave to allow customers to pay for our products.
Create a Strapi project
The fastest and recommended way to create Strapi projects is through the Strapi CLI. You can do this with yarn or npx as the case may be. Open a terminal window and run the command:
yarn create strapi-app VueStrap --quickstart
npx create-strapi-app VueStrap --quickstart
The --quickstart flag will set up the project with an sqlite database. If you intend to create a new project with a different database, you can omit the flag and the CLI will prompt you to choose your preferred database.
Start the project
If you created the project using the --quickstart flag, the project will start automatically on port 1337 on your browser, however, if you chose a custom database, you can run the following command to start the project:
npm run develop
Now if you navigate to localhost:1337/admin on your browser, you will see a form that allows you to create the first admin user. Fill it and click ‘Ready to start’:
This will now launch the admin area where you can create the required products for our store.
By design, we want to create a /products endpoint that we could call to return a list of products. To do this, create a Product content type by clicking the big blue button and filling out the form like so: