GitHub Clone : Let’s build GitHub using REACT.JS

Hello Coding aliens, How are you guys ? This is my first medium blog post, if you want to give suggestions then feel free to advise.

So, in this post we are going to talk about How to build GitHub Clone in REACT. Yes, GitHub Clone. Here I’m listing the right way step by step to create this awesome project.

If you want to follow the Coding Tutorial with me. Then check out my video on YouTube for the same. And if you are a reading person then follow this blog content.

So,

Step #1 Installing the NPM packages in you local machine

This is the foremost step you guys have to follow to install the NPM — (Node Package Manager). Next to create a REACT APPLICATION you have fire the command npx create-react-app *name of you project*. Now you’ll wonder what NPX is ? It is a library that installed along with NPM v5.2.0 and above and it stands for (Node Package Execute).

Step #2 Installing the Dependencies

To build this GitHub Clone, here is the list of dependencies that we are gonna to use in our build.

1. Axios — for fetching the API request
2. Bootstrap — for Styling the UI and Layout
3. React-Router-Dom — for switching between the different webpages.
4. Font-awesome — for icons

Step #3 Creating the Front-end

As you guys know we are using the bootstrap in this build, so we need to import the bootstrap.css in our index.html file in the src directory.

The exact import statement is like — import bootstrap/dist/css/bootstrap.css

Next import the Font-awesome in index.html —

import ../node_modules/font-awesome/dist/css/font-awesome.min.css

Step #4 Creating the Component

Here is the Video Tutorial to see exactly how to create component and make request to fetch the information from the API.

Video Tutorial of GitHub Clone

Step #5 Making the fetch Request from the API

So, Here the main part of this video starts. We make fetch request through Axios.

Here is the exact code to fetch the request from the API.

api.js

If you guys search for this url in the browser, you will get the JSON type user data.

https://api.github.com/users/akkySrivastava

You will get bunch of info of the user from there. And for the Repositories search the URL

https://api.github.com/users/akkySrivastava/repos

It will generate the list of repositories from the URL and JSON type data.

Step #6 Outro

So, if you are beginners in REACT then this tutorial is for you guys to get the concepts of how Hooks | Props | State works. Here is the link for the whole source code of this GitHub clone.

Source Code

akkySrivastava/github-clone

Make sure to drop a star for this repositories on GitHub.

If you want to learn from the video then watch the tutorial on YouTube under my channel page.

Code With Akky

Receive the notification of my UpComing Videos in REACT. Subscribe to my newletter or You simply follow me on medium.

That’s it from my first blog on Medium. Hope you will shower you love and affection towards this build. Till then Keep Coding and transforming the world.

Good bye to all of you guys.