Twilio - Make a complete Call Centre in React and Node

Create a Twilio Verify service to handle authentication by sending SMS and verifying users. Configure the service ID, digit length, and SMS channel for a React and Node call center.

Create a simple express backend in the backend folder, install express, body-parser, and socket.io, add server.js with a test route on port 3001, and run with nodemon.

Create two endpoints, login and verify, to receive a mobile number and a verification code, using environment variables to test process.env.mobile.

Create a singleton Tulou class, export a frozen instance, and initialize a Twilio client on the server to send codes to users.

Implement a Twilio verify flow to send verification codes via SMS from an endpoint, using a client to call the verify service and handle async responses.

Learn to implement Twilio SMS verification by building an async verify code flow, performing verification checks, handling server-side query codes, and validating user status via SMS.

Create a React app named front end to use the login service, install zulu client, axios, and semantic UI, then start the dev server and prepare the logging form.

Build a login form in React using Semantic UI React, with a centered grid, header, and inputs for username and mobile number, ready to wire state for backend submission.

Master passing and updating user and mobile state in a login flow using useImmer with a timer, and implement onchange callbacks to populate fields.

Configure axios to post requests to the backend, set a base URL like http://localhost:3000, and send user mobile number and username to the login endpoint.

Set up a Node backend to accept a login post with phone and username, parse json with body-parser, enable CORS, and request a Twilio verification SMS.

Enable entering a verification code by adding a verification_code state and a verification_sent flag, and render a code input on the login page when the flag is true.

Configure the verification flow by toggling prompts, implement a send verification code function, post to the verify endpoint, and handle response data between front end and back end.

Learn to set up a real-time backend with socket.io by combining http.createServer with Express, initializing socket.io on the server, and handling the connection event to enable front-end to back-end communication.

Explore initializing a frontend socket connection with socket.io, including installing the client, creating a socket module, connecting to localhost:3001, and handling connect and disconnect events.

Refactor backend and front end socket wiring to establish a per-page, per-device Socket.IO connection with an Express server, track socket.id, and handle targeted disconnects before implementing client-server event communication.

Install the json web token package, create jwt.js with create and verify functions that sign a username with a secret key, export them, and send the token to front end.

Create a JWT token for the user after verification when status equals approve, import the JWT library, and return the token to the front end while handling 401 unauthorized.

receive and store a JWT on the frontend using React state to save response.data.token, prepare it for authenticated requests, and verify the token with JWT IO.

Create a custom react hook to manage local storage by reading and writing a value with a key, initializing from an initial value, and handling errors.

Store the jwt token in local storage and switch to using a storage token in state management, enabling secure requests to the back end after login.

Learn to manage user authentication by storing a JWT, conditionally rendering the call center when a valid token exists, and prompting login when the token is missing.

Develop and integrate a call center screen with a navbar using Semantic UI React, building a menu, header, user name, and avatar, and wiring props for the username.

Create a call progress bar component in a React call center app, modeling call states with steps: ringing, in queue, answered, and hang up, each with icons and descriptive labels.

Learn to use local tunnel to expose localhost:3001, obtain a unique https url, and test the API remotely by configuring a subdomain for a stable endpoint.