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

TwilioHackathon - Video Chat app using Gatsby and twilio-4

nabendu82 profile image Nabendu Updated on ・3 min read

Alt Text

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 developgatsby develop

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

Default StarterDefault Starter

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

index.jsindex.js

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

index.jsindex.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.jslayout.js

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

gatsby-config.jsgatsby-config.js

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

UpdatedUpdated

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.jslogin-form.js

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

index.jsindex.js

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

Login FormLogin 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.csslayout.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.jsheader.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.jslogin-form.js

Now, our web-app looks perfect.

web-appweb-app

This completes part-4 of the series.

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

pic
Editor guide