Video Chat app using Gatsby and twilio-1

On Apr 02, 2020 one of my favourite dev community and site dev.to announced, a twilio hackathon. The link for the same is here.

In this hackathon ,we had to made anything with twilio API and submit before Apr 30, 2020. I decided to make a simple video app with gatsby and twilio api. As one of the main category of this hackathon is Covid-19 Communications, it will be simple enough for anyone to use including elderly people.

I will be taking help from this awesome youtube tutorial in building this web-app.

In a new folder SimpleVideoApp create a new gatsby project with default starter, with the command gatsby new .

Image for post
Image for post
SimpleVideoApp

Now, once the above installation is done, it’s time to npm install twilio.

Image for post
Image for post
npm i twilio

One more thing we need to npm install is twilio-video. So, let’s quickly install it.

npm i twilio-video

So, it’s time to create a twilio account. So, we need to goto this url https://www.twilio.com/try-twilio to create an account. Enter the details once in this page and click on Start your free trial button.

Image for post
Image for post
Twilio Account

We will get the usual verification mail, in the next page.

Image for post
Image for post
Verification mail

Now, on checking my mailbox i found the mail. After that clicked on Confirm Your Email link.

Image for post
Image for post
Confirm Mail

After that we have to do Mobile number verification. For this we need to give our valid mobile number and also, click on the checkbox and then click on Verify button.

Image for post
Image for post
Mobile Verification

We will get a Verification Code in our mobile phone, which we need to enter here and click on Submit.

Image for post
Image for post
Verification Code

After that we get this screen, in which we have to mention whether we code. I choose Yes.

Image for post
Image for post
Yes

The next screen we have to choose the framework. We need to choose NodeJS here.

Image for post
Image for post
NodeJS

In the next screen, we will get the below. We can click on the Skip to Dashboard button.

Image for post
Image for post
Skip

And it will take us to the Dashboard.

Image for post
Image for post
Dashboard

There are a lot of settings in dashboard, including creating a twilio function. You can find part-2 here.

You can also find the code for this project in this github link.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store