Dropbox Paper

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 Strapi. 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:

Tooling

To build out this tutorial, we are going to use these tools:

Vue.js — A lightweight progressive JavaScript framework for building user interfaces.

Strapi — An open sourced headless content management system completely built with JavaScript

Flutterwave — An online payment gateway that makes it possible for customers to pay for your products anywhere in the world.

Prerequisites

Before we get started, here are a few things to note:

You should have Node.js installed on your computer

You should have an account on Flutterwave

You should be fairly familiar with Vue.js and JavaScript

You should install Postman — a Google Chrome tool for interacting with HTTP APIs.

Getting started

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

#OR

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:

yarn develop

#OR

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:

​​Tooling

​​Prerequisites

​​Getting started

Tooling

Prerequisites

Getting started