Udemy – Twilio – Make a complete Call Centre in React and Node
English | Size: 2.32 GB
Category: Tutorial
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.
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.
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
Table of Contents
Twilio Introduction
1 Before we signup to Twilio
2 Creating a Twilio Account
3 Getting a phone number and creating all the necessary tokens
Twilio Verify
4 Creating a Twilio Verify Service
Node server with Express
5 Starting our express server
6 Creating the endpoint to receive the mobile number and the verification code
7 Creating a Twilio Class
8 Send Verification with Twilio
9 Verifying the code with Twilio
React Login with SMS
10 Creating our react App
11 Creating our login form
12 Keep state using Immet and use-immet
13 Preparing axios to send our request
14 Request the verification code from Twilio
15 Add an input for the verification code
Verification, Authentication using Twilio
16 Sending the code to Twilio verify
Realtime UI updates using SocketIo
17 Initializing sockets on the backend
18 Initializing a socket connection with the frontend
19 Understanding sockets and refactoring
Authorization using JWT (JSON Web Token)
20 Creating and verifying a JWT token
21 Creating the JWT token
22 Receiving the JWT on the frontend
23 Creating a custom hook to help with local Storage
24 Storing the JWT token in Local Storage
React Call Centre
25 Stop displaying the login page when we have a valid token
26 Creating our Call Center screen starting with the navbar
27 Creating the call progress bar
Local tunnel, my localhost globally accessible
28 Understanding local tunnel and how it will help us
Change Twilio phone number
29 Setup Twilio and changing phone number
Twilio Webhooks
30 Handling Twilio Webhook calls
31 Having Twilio to say Thank you for you when someone calls
32 Emitting a Socket IO event to the frontend when receive a new call
33 Display new call on the browser as it comes in
34 Displaying the progress call with the caller information
Redirecting calls to a queue
35 Redirecting the call and add it to a queue
36 Updating the call status to enqueued
37 Removing personal information from the call
38 Updating the call status bar
Making our application more secure
39 Finding security risks on our application
40 Creating a endpoint to validate the token
41 Validating the JWT token with the backend
42 Passing the token using SocketIo connection
43 Setting the socket with the token as its value changes
44 Validating our token on the backend using a socket middleware
Receiving calls on the browser using Twilio Client
45 Installing and setting up Twilio client
46 We use use State we should import use State
47 Setting up Twilio to make outgoing calls
Voice Grant Access
48 Creating the Twilio token to grant access to voice
49 Passing the Twilio token to the frontend
50 Creating our socket connection with Twilio servers
Answering a Call on the Browser
51 Sending the selected call to be answered to the backend
52 Redirecting the call to a different URL
53 Connecting the call to the Browser
54 Fixing the duplicate calls on the screen
And still more to come
55 Wow, are you already here
Appendix 1
56 Installing VSCode modules
57 Installing VSCode modules
58 Emmet and speed up coding
59 Add extension tools for chrome
60 Installing Docker Extension
Bonus Section – Including Black Friday Deals
61 Bonus – Because the learning can never stop
RAPIDGATOR
rapidgator.net/file/83f1851866e5efd8bdc102aa1c7dea29/twilio-call-centre-react-node-video.part1.rar.html
rapidgator.net/file/aec6b92c617c029a7cd03080d84531ce/twilio-call-centre-react-node-video.part2.rar.html
rapidgator.net/file/62768c5a5f4d62d1cb45bd0b3c667e6b/twilio-call-centre-react-node-video.part3.rar.html
rapidgator.net/file/c9b4724e38cd8920fd7b6778fed3f5dd/twilio-call-centre-react-node-video.part4.rar.html
NITROFLARE
nitro.download/view/5FC439FB7D078F4/twilio-call-centre-react-node-video.part1.rar
nitro.download/view/972BA87459BAB13/twilio-call-centre-react-node-video.part2.rar
nitro.download/view/700B926B84ECFBD/twilio-call-centre-react-node-video.part3.rar
nitro.download/view/7EDA136BFCDBFCD/twilio-call-centre-react-node-video.part4.rar