Implementing GitHub content API with custom hook & Context API

Akeem Qudus I — Tue, 10 Jan 2023 12:24:09 +0000

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:

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:

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:

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

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" />

Forem: Akeem Qudus I

Implementing GitHub content API with custom hook & Context API

Requirements

Setting Up React App

Installing and Setting Up React Router

Adding Bootstrap