TwilioHackathon - Video Chat app using Gatsby and twilio-4
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-17 07:15:06

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

Welcome to part-4 of the series. We will start from where we had left. We will do some coding now, but first start the project by moving to the directory and running gatsby develop command.

![gatsby develop](https://cdn-images-1.medium.com/max/2880/1*0zqRTyKBSHSo37zluhkIaA.png)*gatsby develop*

Now, if we go to [http://localhost:8000/](http://localhost:8000/) we will get the default page.

![Default Starter](https://cdn-images-1.medium.com/max/2880/1*u0NnAm6lIe8HBRb-KwURuA.png)*Default Starter*

Time to change the default starter, so open the **index.js** file.

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

We will remove all the unnecessary things from here. Also, remove **page-2.js** file as we don’t need it.

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

It’s also time to change some more things in this gatsby starter. Open the **layout.js** file in **components** folder and change the footer text.

![layout.js](https://cdn-images-1.medium.com/max/2880/1*nS3-h8wpA8omsvwD-gYYmA.png)*layout.js*

Also, i want to change the site title. So, head over to **gatsby-config.js** file and change it.

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

Now, when we go to [http://localhost:8000/](http://localhost:8000/) we will see the updated app.

![Updated](https://cdn-images-1.medium.com/max/2880/1*9VG8p_JqpiNqIOa0vbA2OQ.png)*Updated*

Let’s create a simple functional based login form. Create a file **login-form.js** inside the **components** folder and put the below content in it. It is a simple form with a text field to enter the name and a button to submit the form.

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

Next, let’s show this component in our **index.js** file. So, import it and use it.

![index.js](https://cdn-images-1.medium.com/max/2880/1*gqL8bhALRqTICua-2TCTiw.png)*index.js*

Our web-app now shows our not so beautiful login form.

![Login Form](https://cdn-images-1.medium.com/max/2880/1*gYtcMODeyzZ4GZILlFGrlg.png)*Login Form*

Let’s style this web-app a bit, as i like web-app to look nice. First update all the primary styles in **layout.css**. Remove all the content and replace it with below.

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

Next, let’s update the **header.js** file to use new color scheme. I had updated the background and also removed the line **margin: `0 auto`,**

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

Next, create a file **login.module.css** in the **components** folder and put the below code in it.
```
    .contact {
     padding: 4rem 0;
    }
    .center {
     width: 80vw;
     margin: 0 auto;
    }
    [@media](http://twitter.com/media) screen and (min-width: 992px) {
     .center {
     width: 50vw;
     margin: 0 auto;
     }
    }
    .contact label {
     text-transform: capitalize;
     display: block;
     margin-bottom: 0.5rem;
    }
    .contact h3 {
     text-transform: uppercase;
     font-size: 2rem;
     text-align: center;
     letter-spacing: 7px;
     color: var( — mainBlack);
     margin-bottom: 2rem;
    }
    .formControl,
    .submit {
     width: 100%;
     font-size: 1rem;
     margin-bottom: 1rem;
     padding: 0.375rem 0.75rem;
     border: 1px solid var( — darkGrey);
     border-radius: 0.25rem;
    }
    .submit {
     background-color: var( — primaryColor);
     border-color: var( — primaryColor);
     text-transform: uppercase;
     color: var( — mainWhite);
     transition: var( — mainTransition);
     cursor: pointer;
    }
    .submit:hover {
     background: var( — darkGrey);
     color: var( — mainBlack);
     border-color: var( — darkGrey);
    }
```
Now, finally update the **login-form.js** file to include these styles.

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

Now, our web-app looks perfect.

![web-app](https://cdn-images-1.medium.com/max/2880/1*6DVk9SVTR03zCJ8GELf-xw.png)*web-app*

This completes part-4 of the series. 

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