Building a Github Profile App using ReactJS

Kingsley Umujeyan — Sat, 07 Jan 2023 12:52:36 +0000

This was a project built as part of my second semester exams at AltSchoolAfrica.

Introduction

The task was to build a ReactJS app that fetches my Github portfolio with the following key functionalities

Show a page with a list of all my repositories on Github
Show another page linking to each repositories using nested routes while using all the necessary tools in React.
Implement proper SEO (Search Engine Optimisation)
Implement Error Boundary functionalities
Add a 404 page.

You can find the source code on Github and app was hosted on here

Lets go through the steps I followed in creating this project.

ReactJS

ReactJS is an open-source JavaScript library for building user interfaces and creating interactive web applications. React is primarily used for building single-page applications and mobile applications. It uses a declarative, component-based approach to making user interfaces, which makes it easier to build and maintain complex user interfaces. React also makes it easier to create reusable components that can be used across different applications.

Scaffolding the app

The first step was to scaffold the react app using create-react-app using npx create-react-app github_profile on my terminal after which I changed directory into the project folder and on the terminal ran the command yarn start to start the development server on http://localhost:3000

NPM (Node Package Manager) Dependencies
The next step was installing the npm dependencies by running the command on the terminal
yarn add react-router-dom styled-components react-icons react-helmet react-error-boundary moment

App Folder Structure
The next step was creating sub-folders inside the src folder
namely assets components hooks pages

The assets folder to hold image assets, the components folder to hold reusable components, the hooks folder to hold logic for api calls and the pages folder to hold different pages.

Continuous Integration and Continuous Development (CI/CD)

I created the project repository on Github, and using the command line on my terminal pushed the code to github to save and track changes and updates during development.
I also setup the app to be hosted on Vercel, this to make me see the changes both on my local machine and on a hosted link.

Building the app

Components
After creating the needed app folder structure,next was to create the reusable components in the components folder as shown in the image below

I added an index.js file to export the components from components folder to make my code cleaner when importing these components.

import Button from './Button'
import Card from './Card'
import Header from './Header'
import Footer from './Footer'
import Loader from './Loader'
import SearchBar from './SearchBar'
import Grid from './Grid'
import Meta from './Meta'
import BreadCrumb from './BreadCrumb'
import Paginate from './Paginate'
import Card2 from './Card2'

export {
  Button,
  Card,
  Header,
  Footer,
  Loader,
  SearchBar,
  Grid,
  Meta,
  BreadCrumb,
  Paginate,
  Card2
}

To see the detailed code for each component, please check out the repository
API
Briefly an API (Application Programming Interface) is an interface or set of protocols that provides a way for different applications to interact with each other. An API can allow two applications to communicate with each other and exchange data, making it easier for developers to create applications that work with other applications. APIs can also be used to access data stored in databases or other services.
For this app I made use of the Github api, and then obtained an access token from Github to enable me interact with the api from the react app, please make sure your access token is saved in an .env file and the environment file .env added to the .gitignore file to prevent exposing your access token on github

Custom hooks
Next I created custom hooks inside the hooks folder for interacting with the api and making api calls from the Github api endpoints, As seen in the image below, I created 3 custom hooks, useApiFetch.js to fetch my github repositories, useProfileFetch.js to fetch my github profile and useRepoFetch to fetch a single repository using the repoId

To see the detailed code for each custom hook, please check out the repository

Pages
Next was to create the different pages namely Home, NotFound (404),Error, Repos, SingleRepo, SearchResults, inside the pages folder as shown in the image below

Routing and Error Boundary implementation
Routing was implemented using react-router-dom,while Error boundary was implemented using react-error-boundary, both are npm packages for react. The routes created were for the different pages, below is the code for the routing and error-boundary

Index.js file
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ErrorBoundary } from 'react-error-boundary'
import { BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import styled from 'styled-components'


const ErrorFallback = ({ error }) => {
  return (
    <Container>
      <Content>
        <p>Something went wrong</p>
        <pre>{error.message}</pre>
      </Content>
    </Container>
  )
}

export const Container = styled.section`
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
`
export const Content = styled.div`
  p {
    font-size: 1.5rem;
    font-weight: 200;
    text-align: center;
    color: black;
    margin: 0.5rem 0;
    //width: 50% ;
    @media screen and (max-width: 400px) {
      font-size: 2rem;
    }
  }
  pre {
    color: red;
    width: 50%;
    text-align: center;
  }
`

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Router>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <App />
      </ErrorBoundary>
    </Router>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

App.js file
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { Footer, Header } from './components'
import Home from './pages/Home'
import Repos from './pages/Repos'
import SingleRepo from './pages/SingleRepo'
import NotFound from './pages/NotFound'
import styled from 'styled-components'
import SearchResults from './pages/SearchResults'

const App = () => {
  return (
    <Container>
      <Header />
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/search/:keyword' element={<SearchResults />} />
        <Route exact path='/repos' element={<Repos />} />
        <Route exact path='/repos/:repoId' element={<SingleRepo />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
      <Footer />
    </Container>
  )
}

export const Container = styled.div`
background-color: rgba(255, 255, 255, 0.16);
`

export default App

Styling
For styling, I used styled-components in writing the css for each components and pages,as this saves me time editing bulky, clumsy, and sometimes complex CSS files as the app grows bigger with additional features.

Additional Features
In addition to the basic functionality of fetching my Github repositories,and view the individual repository details, I added

Search Functionality, where you can search for any Github user by their username,
A Search Results page for displaying the searched Github user profile details.
Pagination Functionality, to make it easier to view my repositories which enhances the user experience as they don't have to scroll all the way down to view more repositories.

Recent Improvements
I recently updated some features to improve the User experience

on mobile devices, the font weight was increased to make the descriptions on the repository cards more readable.
I added a skeleton loading state, to give user feedback as app is loading using the react-loading-skeleton npm package.

Future Additional Features
I am hoping to add other features to this app in future, such as

Authentication Functionality, where a user can sign up and login to view their Github Repositories
Improve the user interface (UI) and enhance the user experience (UX)

If there is a feature you would like to see, please let me know by adding a comment to this article, thanks.

You can find the source code on Github

Let's talk web2 vs web3

Kingsley Umujeyan — Tue, 01 Mar 2022 22:23:44 +0000

The web was first created in 1989 by Tim Berners-Lee, who wanted to create a global communication tool that would allow different computer systems to connect easily, read and save documents and at that time the internet was mostly used for academic and government purposes. This was the first iteration of the internet, the version of the internet most of us know today is web2,with web3 creeping into mainstream and with this introduction of web3,people are increasingly interested in the way,it will change the web as we know it.That is why companies like Nestcoin and Zuri are empowering developers especially in Africa with the relevant skills and knowledge to be part of those that will change the face of the web by creating programs centered on blockchain and web3 with the Blockgames as its first program.
Web2 is the version of the internet dominated by companies that provide services in exchange for your personal data while web3 in contrast refers to decentralized apps that run on the blockchain,these applications allow anyone to participate without monetizing their personal data.so you may ask,what.s is web3 bringing to the table?here are some of the benefits of web3

Anyone who is in the network has permission to use the service-in other words,permission isn't required.
No one can block you or deny you access to the service
Payments are built in viz the native tokens,e.g ether

Let's make practical comparisons between web2 and web3

In web2, it is centralized and anyone can be censored whereas web3 is decentralized thus can not be censored as control is not controlled by an individual or companies.
Payment services may decide to not allow payments for certain reasons or type of work but with web3 payment applications require no personal data and can't prevent payments.
In web2,servers may have down time,be hacked and personal data breached or lost but web3 servers can't have downtime and cannot be hacked.
This is not an exhaustive list since we are still scraping the surface of web3,however every phase of the internet has its limitations and web3 is not excluded
Scalability: Transactions are slower on web3 compared to web2 because of the decentralized nature of web3.
User Experience: Interacting with web3 applications would require extra steps,software and education,this could be a hurdle for its adoption
Accessibility: The lack of integration in modern web browsers make web3 less accessible to most users when compared to web2.
Cost: building and developing on web3 can be quite expensive when compared with web2 because it cost money to put a code on the blockchain.

However as more people get to know and learn more about this phase of the internet,the challenges of web3 will be overcome,interested in this new phase,you are still early,join Blockgames and kick start your blockchain development journey.

DEV Community: Kingsley Umujeyan