Video Chat app using Gatsby and twilio-4

Welcome to part-4 of the series. You can find part-3 here.

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.

Image for post
Image for post
gatsby develop

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

Image for post
Image for post
Default Starter

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

Image for post
Image for post
index.js

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

Image for post
Image for post
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.

Image for post
Image for post
layout.js

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

Image for post
Image for post
gatsby-config.js

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

Image for post
Image for post
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.

Image for post
Image for post
login-form.js

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

Image for post
Image for post
index.js

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

Image for post
Image for post
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.

Image for post
Image for post
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`,

Image for post
Image for post
header.js

Next, create a file login.module.css in the components folder and put the below code in it.

Now, finally update the login-form.js file to include these styles.

Image for post
Image for post
login-form.js

Now, our web-app looks perfect.

Image for post
Image for post
web-app

This completes part-4 of the series. You can find part-5 here.

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

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store