Implementing an API fetch for your GitHub portfolio

Jemimah Kavyu — Tue, 10 Jan 2023 19:50:38 +0000

The Fetch API provides a javascript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy and logical way to fetch resources asynchronously across the network.

In this project, we shall be implementing an API fetch for a GitHub portfolio, showing a page with a list of all the repositories on GitHub where the page should implement pagination for the repo list of repos using nested routes while using all the necessary tools in react.

We shall also implement the proper SEO, Error boundary where we shall show a page to test the error boundary.

Prerequisites.

Install node js, npm, and git.

Basic knowledge of HTML, CSS, JS and React.

install create -react-app and create a new app my-app

npx create-react-app my-app

cd my-app

npm start

Installation

Fork the repos

open your terminal and clone the repository in your computer.

git clone

Navigate into the cloned repo and install npm packages.

npm install

Update git remote

git remote set-url origin

Start the live server

npm start

This will show where your React app is hosted.

Step 1
Update the GitHub username.
-Change the GitHub username to your username. The website will update to your GitHub portfolio.

Step 2
Add code to fetch data from REST APIs.
@src/components/LandingPage.js

fetch(`https://api.github.com/users/${content.github_username}`)
.then(response => response.json())
.then(result => {
    this.setState({ user: result });
    document.title = `${result.name}'s Portfolio`;
});

scroll down to componentDidMount() of the landing page class and copy paste the code above.
@src/components/Projects.js
Fetches user repositories

fetch(`https://api.github.com/users/${github_username}/repos?${repo_endpoint_parameter}`)
.then(response => response.json())
.then(result => this.setState({ repos: result }));

Scroll down to componentDidMount of Projects class and copy paste the above code.

git add .

git commit -m "added code to fetch from github api"

Step 3
src/components/LandingPage.js
Language Colors URL

https://raw.githubusercontent.com/Diastro/github-colors/master/github-colors.json

Refference code

 /* We specify an endpoint to fetch data from. */
 fetch('http://example.com/movies.json')
 /*
 Once fetched, we then parse the response.

 Response will be in the form of a string,
 we convert the data to json via .json() method.
 */
 .then(function(response) {
    return response.json();
 })
 /*
 We can then do whatever we like with the json object.

 The example below converts the json back to a string and outputs to the console.
 */
 .then(function(myJson) {
    console.log(JSON.stringify(myJson));
 });

Scroll down to componentDidMount of LandingPage class and copy paste the above code.
Once you fetch and parse the response as json, set the state of langColors to be the result of response.json(). i.e.

this.setState({ langColors: result });

Step 4
Reconstruct TopBar src/components/LandingPage.js
@src/components/LandingPage.js
Image container

    <img src={user.avatar_url} className="br-100 pa1 ba b--black-10 h3 w3" alt="avatar" />
</ImageContainer>

UserInfo

    <span>{user.name}</span>
    <span className="f6 font-ubuntu-mono">&nbsp;@&nbsp;</span>
    <span className="f6 font-ubuntu-mono">{user.location}</span>
    {/* Something was here, determine based on the above image. */}
</UserInfo>

Languages

<Languages>
    {topLang.slice(0, number_of_languages_to_show).map((lang, ind) => (
        <Language key={ind} style={{color: `${langColors[lang[0]]}`}}>
            <Emoji src={emojis[ind]} />
            {lang[0]}
        </Language>
    ))}
</Languages>

Social Media

<SocialMedia>
    <GitHub urlToUse={`https://github.com/${github_username}`} />
    {user.blog.includes("linkedin.com") && <LinkedIn urlToUse={user.blog} />}
    {user.blog.includes("twitter.com") && <Twitter urlToUse={user.blog} />}
    {user.blog.includes("hackerrank.com") && <HackerRank urlToUse={user.blog} />}
</SocialMedia>

Scroll down to the render() method of the LandingPage component where you will find a commented session asking for help.

git add .

git commit -m "reconstructed TopBar

Step 5
Change logo icon background from square to circle
@src/components/SocialMedia/Logo.js
Go to the Logo component.
Within its return statement, change the Square component to the Circle component.

git add

git commit -m "changed logo from square to circle

Step 6
Deploying with netlify

sign up at @
Click on New Site from Git button and follow the instructions to set it up.

3.

git push -u master

If you setup your Netlify to link to your GitHub repository you are pushing to, it should trigger Netlify to build and deploy based on the new pushed data.

DEV Community: Jemimah Kavyu

Implementing an API fetch for your GitHub portfolio

Prerequisites.