TwilioHackathon - Video Chat app using Gatsby and twilio-1
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-14 18:57:38

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41uu1lhtwb1hw40g94xf.jpeg)

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](https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8).

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](https://www.youtube.com/embed/K02SnxY6c_0) web-app.

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

![SimpleVideoApp](https://cdn-images-1.medium.com/max/2880/1*SQ-0ZtoTjBBpi-tB7TM9rw.png)*SimpleVideoApp*

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

![npm i twilio](https://cdn-images-1.medium.com/max/2880/1*PvtsEvQDV9upSrz_BI5dmQ.png)*npm i twilio*

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

![npm i twilio-video](https://cdn-images-1.medium.com/max/2880/1*rvJyeXXKfH5FzGRjNED6RQ.png)*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](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 Account](https://cdn-images-1.medium.com/max/2880/1*JJGSgf7QXREN6Z7AmgrVag.png)*Twilio Account*

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

![Verification mail](https://cdn-images-1.medium.com/max/2880/1*c9ZIOGHlejW3T7PxfFtA-A.png)*Verification mail*

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

![Confirm Mail](https://cdn-images-1.medium.com/max/2880/1*0IwmFKf_rHVXiwJNDBrnbA.png)*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.

![Mobile Verification](https://cdn-images-1.medium.com/max/2880/1*2qjV33C0KkhDOKRlLwSOlg.png)*Mobile Verification*

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

![Verification Code](https://cdn-images-1.medium.com/max/2880/1*Qp3Sq1UTamkqSCLJXNLnaA.png)*Verification Code*

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

![Yes](https://cdn-images-1.medium.com/max/2880/1*MFYGe9i6eZ08dBhd0pSEvw.png)*Yes*

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

![NodeJS](https://cdn-images-1.medium.com/max/2880/1*TasBtrugfXDUhf7-DmFwuA.png)*NodeJS*

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

![Skip](https://cdn-images-1.medium.com/max/2880/1*r8za0kQsneLGJjCmpvvx1w.png)*Skip*

And it will take us to the Dashboard.

![Dashboard](https://cdn-images-1.medium.com/max/2880/1*cHJgbh4YAcWs-mDCUF7Y0A.png)*Dashboard*

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](https://github.com/nabendu82/SimpleVideoApp) github link.