Creating a portfolio App in React using the Github REST API

Ajoke-Amupitan — Wed, 11 Jan 2023 12:29:05 +0000

In this article, we will learn how to create a react application that interacts with the Github REST API. Some of the libraries we will be using are react-icons, react-router-dom, react-helmet and Error-Boundary.

This project was created using create-react-app.
Before anything else, let's see how to install Create React App. The following command will create a new react project for us:

npx create-react-app github-portfolio-app

This will start the installation process for Create React App, which can take several minutes, depending on your hardware. Although we're only executing one command, the installer for Create React App will install the packages we need to run our React application. Therefore, it will install react, react-dom, and react-scripts, where the last package includes all the configurations for compiling, running, and building React applications.

To be able to open the project in the browser, we can simply type the following command into the command line, which runs package react-scripts in development mode:

npm start

Creating reusable components
React makes it possible for us to create custom components that we can reuse throughout the project.
First, lets create a NavBar.js component;

import { FaGithub } from "react-icons/fa"

function NavBar() {
    return (
        <div className="nav__bar">
            <FaGithub className="github-icon"/>
            <h1>My GitHub Portfolio.</h1>
        </div>
    )
}

export default NavBar;

Implementing API fetch
We need to create another component where we will implement the API fetch of our Portfolio. Lets call this component Home.js

import React from 'react'

const Home = () => {
return (
<div>
</div>
)
};

export default Home;

We will go ahead and import useState and useEffect into the Home.js. The useState hook will be used for storing variables that are part of our application's state and will change as the user interacts with our website. The useEffect hook allows components to react to lifecycle events such as mounting to the DOM, re-rendering, and unmounting.

import React, { useState, useEffect} from 'react'

We will create a function named fetchRepos in the Home.js that will get data from our GitHub repos API and then save it in a state named user. Then we create another function named userInfos. This function will return our mapped data that we got from the github API response.

import React, { useEffect, useState } from "react"

function Home() { 

  const [user, setUser] = useState([])

  const fetchRepos = () => {
    fetch(`https://api.github.com/users/Ajoke-Amupitan/repos`)
    .then((response) => (response.json()))
    .then((data) => {
        setUser(data)  
    })
  }

  useEffect(() => {
    fetchRepos()
  }, []) 

  const userInfos = user.map((userInfo) => {
        return (
            <div className="repo-card" key={userInfo.id}>
                <h2 className="repo-name">{userInfo.name}</h2>
                <p className="language">Langauge{userInfo.language === null ? "none" : userInfo.language}</p>
                <p className="date">Start date & time: {userInfo.created_at}</p>
                <p className="visibility">Visibility: {userInfo.visibility}</p>
            </div>
        )
  })

  return (
      <>
        <section className="repo-container">
            {userInfos}
        </section>
      </>
  )
}

export default Home;

Conclusion
In this article, we've been able to create a react application that gets some data from the github API and displays the data for the user to see on the User Interface. We also implemented several features and third part libraries.

Tnanks for taking the time to read through this article and I hope you loved it.

DEV Community: Ajoke-Amupitan

Creating a portfolio App in React using the Github REST API