Submission post for the Twilio Hackathon
#twiliohackathon#javascript#react
David Pereira

David Pereira @bolt04

About: I love learning, programming and discover new solutions. Also kotlin rules

Location:
Odivelas, Portugal
Joined:
Jul 9, 2019

Submission post for the Twilio Hackathon

Publish Date: Apr 29 '20
8 0

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)
  }
}
Enter fullscreen mode Exit fullscreen mode

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
    );
}
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo BOLT04 / client-connector

An application to contact users via SMS using Twilio APIs

Client Connector

CodeQL

submission cover

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

Features

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

Set up

Requirements

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:

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

country dropdown bug

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

country dropdown locally

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

Comments 0 total

    Add comment