Photo by FLY:D on Unsplash

After several times of trial and error, I finally able to add another option for login to my web app using GitHub OAuth, and in this tutorial we will learn how to make it. To be honest, I don’t really know how to implement it in vanilla JavaScript or other service, because I use Supabase to make it happen in react. Now let’s get started!

1. Create Project

Ok first thing first go ahead to supabase.io, and ‘start your project’ in the top right corner, and login right away. Once it’s done, click new project, new organization.


Photo by Ricardo Resende on Unsplash

I didn’t plan to use any UI library like Bootstrap or others in my latest React project in the first place. But in the middle of the work, which is still in progress right now (which you could see here😝), I remembered Chakra UI and decided to just give it a shot, because my project kept getting more complex and I needed to get a simple component ready quickly.

Turns out I really like Chakra because they have some sort of ‘shorthand’ component and even shorter props. We’ll have a talk about it later on. I also like the way…


Photo by Austin Distel on Unsplash

Previously, I rarely used async await in my JavaScript code, I always used the fetch method to get any data I needed, at first. After time went by, I started to look at it again and it turns out it’s not that hard to implement it.

Here I’d like to explain async await as simply as possible. Try to look at this code.

function usingFetch() {    fetch('https://randomuser.me/api/')        .then(parse => parse.json())        .then(result => {
// do something with the result
}
}

Code above is the usual fetch method, this looks not good because all the operation about the data we…


Photo by Nubelson Fernandes on Unsplash

Have you ever felt tired of writing the same pattern of code over and over again, especially when working with CSS or debugging your code in JavaScript? If yes, then you’ve come to the right place. Here are a few tips to help you code faster.

Using snippets

I found it really tedious writing some CSS when applying the same rules for many elements. You can make your own snippet in VSCode by clicking the gear icon, choose the ‘user snippets’ option, then choose ‘new global snippets file’.


Photo by Christopher Robin Ebbinghaus on Unsplash

If you’re a front-end web developer, you definitely don’t have any difficulties while deploying a web app to hosting services like GitHub pages, Vercel, etc. Especially if it is only a static website, portfolio, or landing page.

But when it comes to uploading the back-end part, I sometimes get confused about how to do it. I know I could upload the database to Heroku using Postgres, but another problem comes in when mostly we develop the database using MySQL in the local environment, and many other things related to the backend that I am not really familiar with.

Lately, I…


Hi! Today we will learn how to use react hooks in a simple way in order to get strong basic fundamental in react hooks.

The first thing we need to set up is of course react JS environment which you can refer to their documentation. If all is ready, then we are good to go!

First Step

Lets open up project file then open App.js file, there you can start by importing react and hooks useState so we can use it later. Here is how it looks.

Importing React and hooks
Importing React and hooks

Next is creating function called App, here we using functional component so it is aligned…


In this post, we will learn how to fetch data from 3rd party API and show the result on the HTML page. This time, the data we will fetch is an image from Dog API which is very incredible. Without any further ado, let's get started!

First Step

Define the HTML. All we need is a button and img tag to place the result later. Here is how it’s done.

Define the HTML

Very simple, nothing fancy here. Don’t forget to give the button and img tag an id so we could get access to it in javascript later.

Second Step

Now we will step into javascript…


In order to create a JavaScript counter, there are many ways to do it. In this post, we will learn two ways on how to do it.

1. Using setInterval

setInterval is a method in javascript to do some task repetitively in a certain time. We will directly create it in script tag inside HTML file, and console.log it into the browser. Here is how it is look like.

an image on how to create counter
Create counter

There we declare a variable called counter, then we assigned value 0 to it. Then we create setInterval method to repetitively increment the counter value, and it will increase every 1000ms or every 1…

Tulusibrahim

Final year IT student with high interest in website development.

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