Building ecommerce applications offers 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 was excited by 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).

In this tutorial, you will learn how to build a mini ecommerce 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 ecommerce store. Afterward, 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.

#vue #strapi #web-development #flutterwave #developer