Simple portfolio website using the GitHub user API

This project entails how I created a simple portfolio website using the Github user API

It is one of the four projects featured in the AltSchool Africa School Of Engineering Second Semester Examination in October '22.

This is an exciting project that contains interesting features that could also serve as a practice project for newbie techies willing to get ''their hands dirty'' while improving on their fundamental web-development Languages such as HTML, CSS & JavaScript, and React.js. Without further ado, let's delve right in.

Contents

  1. Overview

Overview

Objective

Have you ever attempted to apply for a position as a junior developer or an internship as a newbie in tech only to find a requirement that says you should submit your portfolio website?
What is a portfolio website? you may have asked yourself at that point.

A portfolio website is a unique way to showcase your work and let others know about you. It's like an evergreen platform for your projects, case studies, and information about you. In addition, it's one of the best ways to express your personality, experience, and capabilities.

This Project was built to fulfill this specific role while making use of every necessary data that has been provided on my Github profile.

The Challenge

The Challenge was to use all the react-required tools to implement an API fetch of our GitHub portfolio, display a page listing all GitHub repositories (the page should implement pagination for the repo list), and create a page showing data for a single repo clicked from the list of repositories using nested routes. Implement the appropriate SEO, 404 pages, and error boundary (display a page to test the error boundary).
All of this must be accomplished without sacrificing aesthetics, so effective UI and design are essential.

Preview

Below is a video preview of the portfolio project, A link to a full explanatory video will; be shared at the end of the article, Enjoy!!!

Deep Dive

Thought Process

Before starting this project, I decided to analyze the challenge, create issues, develop tasks based on the issues, and determine what strategy and technique to use in coming up with answers.

Below is a list of issues developed after the analysis

  • Fetch Github profile using GitHub API

  • Display a list of GitHub repositories on a new page

  • Create a new page to show data for a single repository

  • Create a page to test Error-Boundary and 404-Error

  • Connect all of the pages with a good user interface and experience

  • Responsiveness across all media device-width

The project was more organized and enjoyable to construct as the majority of the activities were completed in this projection.

Built With

This project was built with 3 languages and a JavaScript framework which are;

  • HTML - HyperText Markup Language

  • CSS - Cascading Stylesheet

  • JavaScript - React.js

Methods and Steps

DEVELOPMENT

You will require both a code editor and a browser to effectively develop a React project. Since I already had Visual Studio code installed on my computer, I made use of my terminal to start this react project by running this code.

npx create-react-app tech-newbie-app

then,

cd simple-portfolio-project

and,

npm start

Next was to install the necessary dependencies for my project such as Axios, react-router-dom, react-error-boundary, react-paginate, and react-seo-component.

{
  "name": "altschool-exam",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@wcj/markdown-to-html": "^2.1.2",
    "axios": "^0.27.2",
    "markdown-to-jsx": "^7.1.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-paginate": "^8.1.3",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "react-seo-component": "^2.0.2",
    "web-vitals": "^2.1.4"
  },
}

After running these commands on my terminal the app opened in my browser in the local host:3000.

STEP 1: Fetch the GitHub profile using GitHub API

I started adding the features and fixes for the issues mentioned above after setting up the react project and creating the ideal UI for the website. The first stage entails "consuming" the GitHub user API to obtain the necessary data from GitHub. I used the Axios package to make promises and Apis easier to utilize.
After obtaining this data, it is stored in a state and then passed across my application via the react hooks useContext and contexAPI. The code snippet below is used in fecthing the data and storing it in a state.

const [userData, setUserData] = useState('');
const [userRepos, setUserRepos] = useState('');

 useEffect(() => {
    axios
       .get('')
       .then((res) => {
          setUserData(res);
       })
       .catch((error) => {
          setErrorMsg(error.message);
          console.log(error.message);
       });
    axios
       .get('/repos?per_page=100')
       .then((res) => {
          setUserRepos(res);
       })
       .catch((error) => {
          setErrorMsg(error.message);
       } );
 }, []);

STEP 2: Display a list of GitHub repositories on a new page

The next step is to use the react-router package to create your routes and pages, then on the repositories page, create a component that uses react props and map the component to every repository that is generated from the API and saved in the state.

Below is the code snippet for the routes.

              import { Routes, Route } from 'react-router-dom';
               <Routes>
                  <Route path="/" element={<Overview />} />
                  <Route
                     path="repos"
                     element={<PaginatedPages itemsPerPage={6} />}
                  />
                  {routeDataMap}
                  <Route path="/error" element={<Error404 />} />
                  <Route
                     path="*"
                     element={
                        <Fallbacks
                           error={error404}
                           text={text404}
                           send="Go Back🤕"
                        />
                     }
                  />
               </Routes>

Below is the code snippet for the repository component

import React from 'react';
import classes from './Repos.module.css';
import RepoLinkBtn from './RepoTile/RepoLinkBtn/RepoLinkBtn';
import RepoTile from './RepoTile/RepoTile';
import SearchBar from '../../UI/Search/SearchBar';

const Repositories = ({ currentItems }) => {
   const repos = currentItems ? currentItems : null;

   const repoTiles = repos
      ? repos.map((repo, index) => (
           <RepoTile
              name={currentItems[index].name}
              about={currentItems[index].description}
              key={currentItems[index].id}
           >
              <RepoLinkBtn name={currentItems[index].name} act="More Info!!!" />
           </RepoTile>
        ))
      : null;

   return (
      <>
         <SearchBar />
         <div className={classes.test}>
            <section className={classes.repositories}>{repoTiles}</section>
         </div>
      </>
   );
};

export default Repositories;

Some codes we are proud of 😎😎

Acknowledgement

Specials Thanks to Hacksultan, Adewale Yussuf, and AltSchool Africa for creating the Medium and giving us a platform to realize our dreams of becoming world-class developers, connecting with wonderful people, and being taught by some of the brightest minds in the tech Industries such as Odugua Rising, Setemi Ojo

Special thanks to our Program manager Uke Jerry and our dearest community manager Tabitha Kavyu

In conclusion, I hope this article has been able to share our experience, hard work, and story on how the 2022 AltSchool Africa Holiday Hackathon project The Phonie Project was created.

Thank you for reading till the end, I hope you have more fun practicing this project than i did.