Twilio – Make a complete Call Centre in React and Node

React, Node and Twilio – Create a complete call centre with SMS authentication, waiting queues & answer calls in browser

Twilio the world’s leading cloud communications platform as a service (CPaaS) that enables you to develop SMS solutions, WhatsApp, Voice, Video, email, and even IoT. Twilio powers communications for more than 190,000 businesses, and enables nearly 932 billion human interactions every year.

What you’ll learn

  • How to create a call centre from beginning to end.
  • How to use Twilio to send and receive SMS.
  • How to use Twilio to make and receive voice calls.
  • How to queue and dequeue calls using Twilio.
  • How to use Twilio Verify to verify the user mobile number.
  • How to send SMS to a phone number.
  • How to make a call to a phone number.

Course Content

  • Twilio Introduction –> 3 lectures • 10min.
  • Twilio Verify –> 1 lecture • 2min.
  • Node server with Express –> 5 lectures • 26min.
  • React Login with SMS –> 6 lectures • 41min.
  • Verification, Authentication using Twilio –> 1 lecture • 11min.
  • Realtime UI updates using SocketIo –> 3 lectures • 13min.
  • Authorization using JWT (JSON Web Token) –> 5 lectures • 22min.
  • React Call Centre –> 3 lectures • 14min.
  • Local tunnel, my localhost globally accessible –> 1 lecture • 4min.
  • Change Twilio phone number –> 1 lecture • 7min.

Twilio - Make a complete Call Centre in React and Node

Requirements

  • Basic programming knowledge.
  • A free Twilio account.
  • Desire to learn and create amazing new things.

Twilio the world’s leading cloud communications platform as a service (CPaaS) that enables you to develop SMS solutions, WhatsApp, Voice, Video, email, and even IoT. Twilio powers communications for more than 190,000 businesses, and enables nearly 932 billion human interactions every year.

In this course, we will leverage some of those capabilities to create a fully functional Call Center, where the users will log with their mobile number using SMS and call will be added to a dashboard in real-time, showing where each call stage is.

Calls will be greeted with a welcome message, and after adding to a queue, the workers on the call centre can track the call status on the dashboard the call will flow from ringing to queued to answered and of course in case we miss a call it will also display a call missed.

 

  • Verify – We will use Twilio Verify to send a verification SMS to the user in the login faze, once the user is verified with Twilio we will create a JWT token that will allow the user to login to the Dashboard and subscribe to receive and make calls.
  • Programmable Voice – We sill use Programmable Voice to make, receive, and monitor calls around the world and directly from the browser.
  • Programmable SMS – We will use Programmable SMS to send and receive SMS using Twilio

Other important details:


Frontend:

We will create the front end in React using hooks, such as useState, useEffect, useContext, useCallback among many other custom hooks we will create, to make our application look amazing we will use Semantic UI and to help with the state management we will use Immet and SocketIo for realtime communication.

 

Backend:

Will be created using NodeJS, Express for the rest API and SocketIO for the real-time communication with the react app.

 

Get Tutorial