Implementing GitHub content API with custom hook & Context API
Tags: webdev, javascript, react, github
Published: 2023-01-10 12:24:09

As a student of AltSchool of Africa willing and working towards making it to the end of the end of the program, we were given exam project to execute as criteria to pass second semester to the third semester. Out of for questions I choose: 

> Implement an API fetch of your GitHub portfolio, show a page with a list of all your repositories on GitHub(the page should implement pagination for the repo list), and create another page showing data for a single repo clicked from the list of repos using nested routes while using all the necessary tools in react. Implement the proper SEO, Error Boundary (show a page to test the error boundary) and 404 pages. Good UI and Designs are important.


In this article, I will be taking you through how you can build and implement every technology I used in the course of executing this task. In the course of trying to build the project the following technology were implemented:
- React
- React Router
- React Hook
- Custom hook (useFetch)
- Fetch
- Client Side Pagination
- Context API
- Error Boundary
- React Helmet (SEO)
- Netlify Hosting


## Requirements
To get started or be able to follow along, you need to have the following installed on your machine (computer):
- Node ([https://nodejs.org/en/download/])
- VS Code ([https://code.visualstudio.com/download])

You will also need to have an account on GitHub and Netlify as we'll be needing it for hosting



## Setting Up React App 
In every react application, the very first thing to do is to install react. Open up your terminal, navigate to where you want to have your project. Follow the following steps to set up your App.
- Run: `npx create-react-app my-app` (my-app here could be anything you wish to name your project)
- After installing, run `cd my-app` (your app name)
- Run `code .` to open your App in VS Code. Your folder tree should look like the picture below:

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


Let’s do a little bit of house cleaning, we will be deleting some files we don’t need, this isn’t compulsory, it is just something I do. Delete some files to make your folder tree look exactly like the picture below:

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

In the root component _App.js_, edit your codes to look like the  one below or take out the codes and replace with this:

```
import "./App.css";
function App() {
  return (
    <div className="App">
      <h1>My App</h1>
    </div>
  );
}

export default App;
```

In the _**Index.js**_, edit your codes to look like the  one below or take out the codes and replace with this:

```
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

Bring up your VS Code terminal (Ctrl + J for windows), run `npm start`. This will start your React App on localhost port 3000 (_**localhost:3000**_). You should have an output like the picture below:

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


If you get the same output as the image above, that means you have successfully set up your react app. WELL DONE 👍👍👍


## Installing and Setting Up React Router
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. Official documentation [here](https://reactrouter.com/en/main)

To install React Router run `npm i react-router-dom`

In Your _**Index.js**_, import _BrowserRouter_ from react router dom and, wrap your App component With the _BrowserRouter_ like this:

```
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

```


Next up, go into the _**App.js**_ file, and define your routes, you can just page the code below:

```
import { Route, Routes } from "react-router";
import Home from "./components/Home";
import NotFound from "./components/NotFound";
import NavBar from "./components/NavBar";
import Repos from "./components/Repos";
import RepoDetails from "./components/RepoDetails";
import About from "./components/About";
import Footer from "./components/Footer";

function App() {
  return (
    <>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/repos" element={<Repos />} />
        <Route path="/repos/:id" element={<RepoDetails />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
      <Footer />
    </>
  );
}

export default App;
```

**Explaining the codes**
In the above line of codes:
- I am importing the Route and Routes from react-router
- I am also importing the **Home**, **NotFound**, **NavBar**, **Repos**, **RepoDetails**, **About** and **Footer** components from a `components` folder in `src`. (_the components name spells out their function_)
- Home component is the homepage
- NotFound component is the 404 page
- NavBar components is the Navbar of our App
- Repos components is the page where the repository from our github API will be displayed.
- RepoDetails components is the page to show details of individual repository 
- About components is the page where the user's GitHub details will be displayed




## Adding Bootstrap
Bootstrap is a CSS framework, it can either be installed on the CLI or used with CDN (Cloud Delivery Network). For this project, CDN will be used. 
Go in to your Public folder, paste the following into your head of the index.html file:

```
<link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css />

<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
```