TwilioHackathon - Video Chat app using Gatsby and twilio-8
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-21 12:47:14

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/smlzb8omnqpw5mfg6wi0.jpeg)
Welcome to the final part of the series. Our web-app is almost finish and only some CSS remains, so let’s start it.

I also want to show the name of the Organiser, so let’s get if from **login-form.js**. We will use a callback function **storeName** which is similar to **storeToken**, to send the **name** back.

![login-form.js](https://cdn-images-1.medium.com/max/2880/1*ds_eWqR8oVhlPAY0WFjRbw.png)*login-form.js*

Next, let’s update in **index.js** and use the logic similar to that of token. We are passing the **name** also, to the **Video** component.

![index.js](https://cdn-images-1.medium.com/max/2880/1*rDDvGi_Kj_D-B-GCFqjowA.png)*index.js*

Next, let’s update the Video component in the **video.js** file. Here, we are first importing a **video.css** file. We will make it soon. After that we are destructuring the **name** prop.

![video.js](https://cdn-images-1.medium.com/max/2880/1*HEgGBJ8bo1zdTiyBj3Oibg.png)*video.js*

After that in the **video.js** file, do the following changes. We are first changing the enclosing div to a fragment. After that adding Organiser and using the **name** prop.

Also adding a h2 for Remote participants. Last adding a className for remoteVideRef div, which we are going to style next.

![video.js](https://cdn-images-1.medium.com/max/2880/1*R9n7t2tPcw9OzeQ0ofWVBw.png)*video.js*

Add a **video.css** file in the same folder and add this simple styles into it.

![video.css](https://cdn-images-1.medium.com/max/2880/1*8D2pz36OYzK0cnzFhTZ18g.png)*video.css*

All the changes are done, so time to test it in localhost. It is working fine and i checked it my logging from three different browsers.

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

It’s time to push the code in github, to deploy it automatically. After, it got deployed i logged in from 3 different devices.

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

It is working fine but found a bug ie for remote participant it will show his name in place of Organiser. So, let’s change the way it will look for each user. I am now showing the name in Connect, so it will be different for each user.

![video.js](https://cdn-images-1.medium.com/max/2880/1*flgUvzW1sCOf_TDqnehT8w.png)*video.js*

Also, let’s add below lines in **video.css** file.

![video.css](https://cdn-images-1.medium.com/max/2880/1*D7IMBLUgyK1bRQKfMyoHsw.png)*video.css*

And it is working fine for different users.

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

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

I will redeploy now and check the web-app. I am testing with all 3 -2 laptops and 1 phone.

![Working fine](https://cdn-images-1.medium.com/max/2880/1*5XQ3WcOCz-2Bb3-DYfmvkw.png)*Working fine*

Now, my app is complete and deployed. As told earlier this is a very Simple Video app, which can be created with ease and deployed in no time with netlify.

After that share the link with your known people and enjoy video conferencing. We get 15 dollars free credits from twilio and i used 3.24 dollars while making this project.

![Twilio dashboard](https://cdn-images-1.medium.com/max/2880/1*A9FbjrjI6qijE973Ga2yAA.png)*Twilio dashboard*

I am submitting the web-app soon for the hackathon, so i had to add a README and LICENSE file. I had added both in my github and also joined the [Twilio CodeExchange community](https://ahoy.twilio.com/code-exchange-community)

The details about the submission rules are [here](https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8).

You can also find the code for this project in [this](https://github.com/nabendu82/SimpleVideoApp) github link.