Demo Application

We'll cover the following

So far, we’ve looked into different endpoints available in Twilio. Now, let’s try to use these endpoints to build a real-world application.

Workflow

  1. The first page we land on is the homepage, where we can see different categories of products available in our application.
  2. Different products are displayed once the user opens a category.
  3. After adding some products to the cart, the user can see their individual details by clicking the “Cart” button.
  4. The user is required to add their details once they click “Create Order.”
  5. A verification code is sent to the user once they click “Confirm Order.”
  6. The user is asked to enter the verification code sent to their WhatsApp number.
  7. The verification code is verified, and the response is displayed.

Run the application

Click “Run” to run the application. Then, click the URL provided to open the application in a new web browser tab.

{
  "name": "backend",
  "version": "1.0.0",
  "description": "Backend Server",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "node-fetch": "^3.2.10"
  }
}

Integration with Twilio

We have used several endpoints available in Twilio in our application. Let’s take a closer look into the code to see how the endpoints have been integrated into our application:

  • In ./backend/app.js, we create a backend server that assists in making API calls.

  • In ./utils/useFetch.js, we create a custom hook to fetch data from the API.

  • The Navbar component is rendered as the page header in the entire application. It’s a simple navigation panel that allows us to visit different pages available in the application.

  • We gather the customer’s data in the Customerdetails.jsx. It contains a simple form that asks for the customer’s basic information.

  • The data gathered in Customerdetails.jsx is sent to Verify.jsx. Here, we have the following:

    • Lines 19–27: We create a verification service using Twilio’s Services endpoint.

    • Lines 31–49: We send a verification code to the customer’s WhatsApp number.

  • We verify the code provided by the customer in ConfirmOrder.jsx. Here, we have the following:

    • Lines 24–32: We call the verify token endpoint to check whether the verification code provided is correct.