Submission post for the Twilio Hackathon

What I built

This application falls into the Engaging Engagements category of the hackathon.
It's a web application that lets you send an SMS to someone else's phone. But the motivation behind this app is to be used by companies. A business usually has a list of users on their database, and they ask for some information when a client creates a new account (the signup form). One piece of data can be the user's phone number, so the business can contact the client directly on their phones.

The capability of sending messages to your clients with promotion codes, order status reports, notifications about products being in stock, can be very powerful and keeps the customers engaged with your products.

How is the phone number validated?

I use the npm module react-phone-number-input to easily have the country codes. Here is my PhoneInput React component:

import PhoneNumberInput from "react-phone-number-input";

export function PhoneInput({ value, onChange }) {
  return (
    <PhoneNumberInput
      className="phone-input"
      placeholder="Enter phone number"
      value={value}
      onChange={handleChange}
    />
  );

  function handleChange(value) {
    if (value) onChange(value)
  }
}

The phone number is validated on the server using the Twilio Lookup API, and the client gets a status 400 Bad Request:

//...
export async function sendMessage(body: string, to: string) {
  if (!verifyPhoneNumber(to)) // throw an error;

  try {
    const rsp = await client.messages.create({
      body,
      from: settings.twilio.fromPhomeNumber,
      to,
    });
    console.log(`Message sent [sid:${rsp.sid}]`);
  } catch (error) {
    // OOPS... 😬
  }
}

export function verifyPhoneNumber(phoneNumber: string) {
  return lookups
    .phoneNumbers(phoneNumber)
    .fetch()
    .then(
      (numberData) => true,
      (err) => false
    );
}

Demo link

You can check the web app here

Note: Bear in mind that I used a Twilio trial account to develop this application, and so there are a few constraints. You might notice these when trying out this application yourself, but for more detail check this article under the Programmable Messaging section. At the start I wondered where the "Sent from a Twilio Trial account" came from... now I know 😅.

Link to code

BOLT04 / client-connector

An application to contact users via SMS using Twilio APIs

Client Connector

A web application to contact users via SMS using Twilio APIs

ℹ️ This project is for a hackathon submission. You can find the announcement post and my documented journey of this project on dev.to.

Built with

• Node.js web server using Express.js and Typescript
• Programmable SMS Twilio API
• React and Javascript for the client-side
• Deployed with Heroku. You can check out the live application here

Features

• Send a message to a person's phone using SMS

Set up

Requirements

• Node.js
• A Twilio account - sign up

Twilio Account Settings

This application uses the dotenv module to read the environement variables configuration. So in order to run the server, you must create a .env file and set the appropriate values to each variable. Below is a table with the variables you need to set, or check the file .env-sample (optional values aren't on the table):

Env Variable	Description
TWILIO_ACCOUNT_SID

…

View on GitHub

⛏ How I built it?

The stack I used to build this project is:

• React, Javascript, and Semantic UI React.
• Node.js and Express.js with Typescript
• Twilio Client JS SDK
• Twilio helper library for Node
• Twilio Lookup API
• React phone number input library
• Dotenv library
• Heroku for hosting the app on the cloud

🎨 Unfinished work and issues

One known issue is that in production, the dropdown list with the countries to select the country code for the phone number doesn't appear, but locally it does 🤷.

The dropdown in production (https://client-connector.herokuapp.com/)

Running the app locally

I also couldn't finish the second feature I really wanted to support, which is browser calls. The user would enter a phone number, click the dial button and start a call. This would ask for permission to use the microphone if the user didn't already do that.

Anywho, this project made me study and learn new things and that is always a big win for me! Next time I'll make an even better project and apply what I've learned with this hackathon 😄.

Special Thanks

I'd like to thank Phil Nash for helping me out on the DEV connect live chat, and all the Twilio and DEV community for organizing this hackathon, that I very much enjoyed 😃.