loading...
Cover image for TwilioHackathon - Video Chat app using Gatsby and twilio-1

TwilioHackathon - Video Chat app using Gatsby and twilio-1

nabendu82 profile image Nabendu Updated on ・3 min read

Alt Text

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 .

SimpleVideoAppSimpleVideoApp

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

npm i twilionpm i twilio

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

npm i twilio-videonpm 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.

Twilio AccountTwilio Account

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

Verification mailVerification mail

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

Confirm MailConfirm 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.

Mobile VerificationMobile Verification

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

Verification CodeVerification Code

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

YesYes

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

NodeJSNodeJS

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

SkipSkip

And it will take us to the Dashboard.

DashboardDashboard

There are a lot of settings in dashboard, including creating a twilio function. See you soon in part-2.

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

Posted on by:

nabendu82 profile

Nabendu

@nabendu82

Fullstack JS dev, Upcoming Author "Gatsby Cookbook"

Discussion

markdown guide