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
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.