Embed your GitHub mission in your React web site | by Sabesan Sathananthan


Embed GitHub repo in your Web site utilizing Materials-UI offers higher UI

Picture by Markus Winkler on Unsplash

They are saying imitation is a type of flattery however honey, it’s time to get your individual concepts.

I assumed to embed my GitHub tasks on my web site like pinned repositories in GitHub. First I confronted an issue that how may I get the programming language colours as proven in GitHub. Then I discovered that was outlined in GitHub linguist. However linguist file outlined in YAML Subsequently, I fetched that knowledge and convert it to JSON. Subsequently I created an API to fetch the linguist particulars. However On this article, I’m not going to speak about that. If you wish to watch the API repository click on the hyperlink. Right here I’ll describe how I created the GitHub repository playing cards in React utility. That is my thirty third Medium article.

On this article, I’m going to say how you can begin from scratch. Right here you might see the reside demo of this react utility. Now I completed this mission and have a repo in GitHub.

First, it’s worthwhile to create a react utility. For that run the next command in your shell/terminal in a particular folder (e.g., desktop )

npx create-react-app github-repo

A brand new folder shall be created, and will probably be named as a github-repo. From this step, our utility is bootstrapped with Create React App. For extra info, click on the hyperlink. Then open that mission in your IDE. I’m personally utilizing the VS Code IDE. You’ll want to delete some recordsdata and set up the recordsdata for the event after you open the folder in your IDE. Subsequently it’s worthwhile to go to the src folder and delete Brand.svg, App.css, index.css, and App.check.js recordsdata. And create the next folders contained in the src folder named parts and api.

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

import ‘./index.css’;
Picture by Dhaya Eddine Bentaleb from Pexels

Set up Materials-UI for Materials Design kind element.

npm set up @material-ui/core --save

Set up Axios to make HTTP requests to the API.

npm set up axios --save

Be aware: Fetching JSON Information could be achieved by means of the fetch API in JavaScript. Motive for utilizing Axios Even outdated browsers like IE11 can run Axios with none difficulty. Fetch(), alternatively, solely helps Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (you’ll be able to see the total compatibly desk on Can I exploit…)

Open the index.html file within the public folder and paste the under code contained in the <head> </head> tag.

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

the above course of just isn’t putting in the package deal. You’re going to use octionsCDN.

Picture by cottonbro from Pexels

Very first thing first it’s worthwhile to go to GitHub after which go to the settings. Click on the Developer Settings within the left column. Click on the non-public entry token and generate a brand new token and duplicate that token. open your react mission and create a brand new file within the root folder named .env. Contained in the .env file add the next code. Substitute your copied GitHub Private Entry Token as a substitute of Your_Personal_Access_Token .

REACT_APP_API_KEY = Your_Personal_Access_Token

Contained in the api folder create a brand new file named Github.js. Add the next code within the Github.js file.

Substitute your GitHub consumer title as a substitute of sabesansathananthan on line 2.

Contained in the parts folder, create a brand new file named GitHubCards.js. Add the next code within the GitHubCards.js file.

In line 28, You’re fetching the linguist API utilizing Axios and you then set your language state. Type line 31 to line 42, You’re fetching GitHub API for every repository. From line 46 to 52, You’re sorting repo array components based on the stargazers_count (stars rely).

Contained in the parts folder, create a brand new file named RepoCard.js. Add the next code within the RepoCard.js file.

The above useful element returns JSX components and Materials-UI parts.

Lastly, Render the GitHubCards element in App.js, as proven under.


Right here I’ve showcased 4 steps to embed GitHub repositories in your React web site. There are various react tasks for embed GitHub repositories in your React web site. However how that is totally different from different mission playing cards is these playing cards present the colour dots associated to a programming language based on GitHub linguist. You’ll be able to clone the Repo from this hyperlink. If you’re going to use this mission then Don’t overlook to provide a star⭐️ for this repo.

Completely satisfied Coding 😊 !!!

Leave a Comment