Client Connector - Twilio Hackathon Update 2
Tags: twiliohackathon, typescript, react
Published: 2020-04-19 18:28:37

This week I worked on the front-end side of the application and a few improvements to the back end. The React app is very simple right now, so it still needs some extra design tweaks like adding some text, etc.

## Issues
Did I face any issues this week? Well... yes 😅. The first issue I encountered was associated with how I do phone validation on the client. On a first iteration I simply built a simple text input on the `SendSmsForm`, but I wanted something better of course. I ended up researching for a while and chose to use this module: [react-phone-number-input](https://www.npmjs.com/package/react-phone-number-input). The main reason I decided to go with a third party dependendency was to **not maintain the list of all country codes**. I thought [Cleave.js](https://nosir.github.io/cleave.js/) did this and provided a component out-of the box, but it turns out it doesn't.

One little warning I ran to was [this Semantic UI React issue](https://github.com/Semantic-Org/Semantic-UI-React/issues/3810). I decided to postpone this warning for now, and maybe just remove `<React.StrictMode>` to fix it.
![warning](https://dev-to-uploads.s3.amazonaws.com/i/w65fuk3en7myiuwkor4y.PNG)

I also had a small step back with Typescript when doing some error handling code. Maybe I'm just a noob at Typescript, and I was failing to realise the difference with Javascript... but anyways, I couldn't make the following code work:

```js
try {
...// something that can throw an exception of the type 'A'
} catch(error) {
    if (error instanceof A) // do some cool stuff
    else // then it ain't a custom domain error, so handle it in another way
}

class A extends Error {
    constructor(message: string) {
        super(message)
    }
}
```

So I decided after awhile to simply be pragmatic and find a simple solution, just so that I'm not stuck in this and can move forward. The solution I implemented was to define the name field of the `Error` type, then I checked if the error object had that field, like this:
```js
try {
...// something that can throw an exception of the type 'A'
} catch(error) {
    if (error.name === "A") {}
    else {}
}

class A extends Error {
    constructor(message: string) {
        super(message)
        this.name = "A"
    }
}
```

I still want to try and isolate this to see if I can reproduce the issue.

## Upcoming work
The next feature I want to support is to have browser calls. There would be a "start a phone call" button on the web app and an input field to type the phone number.

For this, I'm looking into Web RTC and other Twilio APIs. [This article](https://www.twilio.com/blog/2016/03/browser-calls-webrtc-tutorial.html) is helping a lot right now, since I wasn't very familiar to the whole concept. I'll also deploy the application with Heroku to have a demo link for the submission post. I'm choosing this platform since it's simpler for me and it works great with Node.js apps, from my experience.

## Conclusion
I hope you liked reading this little update. So far, I love being in this hackathon because I'm learning a lot. If anything, this was a great experience for that sole reason, I'm learning 😁! Even if the end result of the application doesn't have a lot of features and isn't truly production-ready, I've had fun building it, researching and reading Twilio docs and reading other projects from fellow devs 😃.

It's also an excelent opportunity to study harder concepts and really understand what is going on under the hood, like RTC (Real-Time Communications) and the web standards underneath.

## Resources
- [WebRTC Best Practices from Developers and Enterprises (Twilio)](https://www.youtube.com/watch?v=WAgND84EKGI)
- [Twilio Client: Capability Tokens](https://www.twilio.com/docs/voice/client/capability-tokens)
- [Twilio Client JS SDK: Overview](https://www.twilio.com/docs/voice/client/javascript/overview)