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. 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 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. I decided to postpone this warning for now, and maybe just remove <React.StrictMode> to fix it.
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:
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:
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 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.
Top comments (0)