FRONT END

Embed your GitHub project on your React website

Embed GitHub repo on your Website using Material-UI gives better UI

Sabesan Sathananthan

Published in

Bootcamp

4 min readOct 5, 2020

They say imitation is a form of flattery but honey, it is time to get your own ideas.

I thought to embed my GitHub projects on my website like pinned repositories in GitHub. First I faced a problem that how could I get the programming language colors as shown in GitHub. Then I found that was defined in GitHub linguist. But linguist file defined in YAML Therefore, I fetched that data and convert it to JSON. Therefore I created an API to fetch the linguist details. But In this article, I am not going to talk about that. If you want to watch the API repository click the link. Here I will describe how I created the GitHub repository cards in React application. This is my 33rd Medium article.

In this article, I am going to say how to start from scratch. Here you could see the live demo of this react application. Now I finished this project and have a repo in GitHub.

Step1: Setup Project

First, you need to create a react application. For that run the following command in your shell/terminal in a specific folder (e.g., desktop )

npx create-react-app github-repo

A new folder will be created, and it will be named as a github-repo. From this step, our application is bootstrapped with Create React App. For more information, click the link. Then open that project in your IDE. I am personally using the VS Code IDE. You need to delete some files and organize the files for the development after you open the folder in your IDE. Therefore you need to go to the src folder and delete Logo.svg, App.css, index.css, and App.test.js files. And create the following folders inside the src folder named components and api.

Now open the index.js file and delete the following snippet in index.js file.

import ‘./index.css’;

Photo by Dhaya Eddine Bentaleb from Pexels

Step 2: Install packages

Install Material-UI for Material Design form component.

npm install @material-ui/core --save

Install Axios to make HTTP requests to the API.

npm install axios --save

Note: Fetching JSON Data can be achieved through the fetch API in JavaScript. Reason for using Axios Even old browsers like IE11 can run Axios without any issue. Fetch(), on the other hand, only supports Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (you can see the full compatibly table on Can I use…)

Open the index.html file in the public folder and paste the below code inside the <head> </head> tag.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" />

the above process is not installing the package. You are going to use octionsCDN.

Step 3: Implementation

First thing first you need to go to GitHub and then go to the settings. Click the Developer Settings in the left column. Click the personal access token and generate a new token and copy that token. open your react project and create a new file in the root folder named .env. Inside the .env file add the following code. Replace your copied GitHub Personal Access Token instead of Your_Personal_Access_Token .

REACT_APP_API_KEY = Your_Personal_Access_Token

Inside the api folder create a new file named Github.js. Add the following code in the Github.js file.

Replace your GitHub user name instead of sabesansathananthan on line 2.

Inside the components folder, create a new file named GitHubCards.js. Add the following code in the GitHubCards.js file.

In line 28, You are fetching the linguist API using Axios and then you set your language state. Form line 31 to line 42, You are fetching GitHub API for each repository. From line 46 to 52, You are sorting repo array elements according to the stargazers_count (stars count).

Inside the components folder, create a new file named RepoCard.js. Add the following code in the RepoCard.js file.

The above functional component returns JSX elements and Material-UI components.

Finally, Render the GitHubCards component in App.js, as shown below.

Conclusion

Here I have showcased four steps to embed GitHub repositories on your React website. There are many react projects for embed GitHub repositories on your React website. But how this is different from other project cards is these cards show the color dots related to a programming language according to GitHub linguist. You can clone the Repo from this link. If you are going to use this project then Don’t forget to give a star⭐️ for this repo.

Happy Coding 😊 !!!