Using Fetch and Github API to display GitHub repos
Published: 2023-01-08 23:08:47

---
title: Using Fetch and Github API to display GitHub repos
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-03 16:45 +0000
---
## Introduction

GitHub is a web-based Git or version control repository on the Internet with
a hosting service. It offers the distributed version control and source code
management (SCM) functionality of Git as well as adding its own new features.


## Github API
Github APIs( or Github ReST APIs) are the APIs that you can use to interact with GitHub. They allow you to create and manage repositories, branches, issues, pull requests, and many more. For fetching publicly available information (like public repositories, user profiles, etc.), you can call the API.

## Understanding the API
When you make a request to the REST API, you will specify an HTTP method and a path. Additionally, you might also specify request headers and path, query, or body parameters. The API will return the response status code, response headers, and potentially a response body.
For more info see [About Github's API] (https://docs.github.com/en/developers/overview/about-githubs-apis)

## User Endpoint
To get the list of random users, you have to make a request to the `/user` endpoint, and to get the details of a specific user, you make a request to the `/user/{username}` 

## Using Fetch
The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

The promise resolves to the Response object representing the response to your request. For More info see [ Understand the Fetch() method] (https://developer.mozilla.org/en-US/docs/Web/API/fetch)

You can make a request to the Github API using the code below

You can replace `Abdul-k1` with your own username, in the code outlined below, `Abdul-k1` is my own username


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8wfe8lwq0yu5pc27vyi.png)

After running the code above, open the developer tools in your browser and click on the console, you should see the following information displayed in these screenshot.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvg5ah5c9czdeboam6ko.png)

## Displaying all your repos on a page
Before moving onto development part, to initialise a simple react application, you can follow the steps outlined below:

* Create React Application

   `npx create-react-app foldername`

* Move into the project folder

   `cd foldername`

* Create a components folder and you project structure will look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljmffssrtrjhr9taktmc.png)

Custom components that we will create will reside in the components folder, with everything put together in the Homepage.js, we will place this component inside of App.js which itself goes under "root" DOM everything inside this DOM will be managed by the React DOM.

We are going to create six components:

* **Homepage:** This will serve as an entry point that will include the my repos button, Error page button and also button to test Error Boundary.

* **Profile:** This will fetch the Github repos and display on a page using React Hooks such as useState and UseEffect.

* **Pagination:** Implementing pagination for the repo list by showing your repos on a series of pages.

* **ErrorBoundary:** Implementing Error boundaries to catch errors in the child components tree and display a fall back UI instead of just seeing a blank page.

* **TestBoundary:** Testing the error boundaries to see if it works properly

* **ErrorPage:** Testing out the error components page should in case you unavoidably visit a page on the app that is not available.

After creating all this components, your folder structure should look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgydhc2i1iqtbnzwiwlp.png)

##HomePage.js
In the HomePage.js component we will be creating a welcome page to welcome our users to the page which will include the `myRepos` button, `error boundary` button and lastly `error page` button.

See code below:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eptdyeo2b46wrpu5dk95.png)

##Pagination.js
In the Pagination.js component, after getting our repos from the Github API, we will be displaying them on a series of pages using pagination.

See code below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w37xjuotd9v66pj4k07u.png)


##Profile.js
In the Profile.js component, we will be using the Fetch method to call our repos from the Github API and also displaying it on a page using useState and useEffect from the React Hooks libraries.

See code below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjai96vz5x6kxpqeabvo.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu7oybc7s3mwawrc8p23.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sj44epqckgk24aed0i1v.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhffzjpvzmxnik45moup.png)

##ErrorBoundary.js
In the ErrorBoundary component, we will be Implementing Error boundaries to catch errors in the child components tree and display a fall back UI instead of just seeing a blank page.  

See code below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3hz5gxdzaadofmobtzr.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqlssnvw82ua8a2r1xoa.png)

##TestBoundary.js
In this component, we will be creating an error among the components to check if error boundaries is working properly.

See code Below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2mqln03uuyo2lrof0tw.png)

##ErrorPage.js
In this component we will be creating an error page component so that should in case the user unavoidably visit a page on the app that is not available, he will be directed to this page.

See code below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d44knut3i94e3nf0qkc.png)

##Running the application
To start the application on your system, run the following command

`npm start`

##Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe5912vs6mfrdzzzccem.gif)

##Conclusion
With the putting together of all this components listed above, we were able to build a full react application that calls our repo from the Github API and displays it in a series pages using `pagination` and React hooks such as `useState` and `useEffect`.

Source code is available [Here](https://github.com/Abdul-k1/github_portfolio_project):