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

⛏ 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 🤷.

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 😃.