GitHub App is a simple web app that allows users to take a look into developers' and engineers' GitHub profiles and repository details. This is a project for my second-semester exams at AltSchool Africa and I want to share with my readers(Yes, you!) what I made, how I did it and the special features I included in the little app.
The app is created using a JavaScript framework React and in this article I'm assuming that my readers(Yes, you again!) are already familiar with setting up a react project using create-react-app.
Content
- About the App
- Setting up React Router
- Creating a re-usable Pagination component
- Creating the Landing page
- Creating the Users' page
- Setting up the Error Boundary Component
- Implementing of Search Engine Optimization
- Creating a 404 page
- Other cool features
About the App
GitHub App is a simple user-friendly app that originally shows my personal GitHub portfolio; name, image, username, location and list of my repositories and it's details, that was later expanded and improved upon. It showcases my GitHub portfolio and also allows users search for any desired GitHub account details, using the account's username. It provides an easy navigation and a welcoming user interface. Check it out here
NB: GitHub App content are read-only.
Setting up React Router
React Router is a popular and powerful routing library for React applications. 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.
To get started I installed React Router into my React app by opening the terminal in my app's directory and input:
`npm install react-router-dom`
After installation, I went into the top level component of my app and made all necessary imports, like so;
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
It is common practice to just import <BrowserRouter> as <Router>, I guess BrowserRouter is just too long to type!
Then I proceeded to setting up my basic routing with the outer most component being the <Router>, wrapping the <Routes> component which then wraps the <Route> component.
The <Route> component takes in two parameters; the path of the route and the element component to be rendered in that route.
Creating a re-usable Pagination component
Pagination in web development is where a user can use links such as "next", "previous", and page numbers to navigate between pages that display one page of results at a time.
To know the limit of the numbers that will be dynamically displayed according the length of users' repositories, I implemented a logic using the total repositories and the number I wished to render per page.
Then I created a paginate function that gets called anytime a user clicks on the numbers to display the repositories according to the pagination numbering.
Creating the Landing page
The landing page was a pretty basic page with a navbar that houses the search input component which users utilizes to get the details of their desired GitHub users, and also by default it renders my personal GitHub account details, my name, username, repos and my photo (ps: Don't mind my ugly face!), by making a fetch call to the GitHub API within the React useEffect hook.
Creating the Users' page
The GitHub users' page is an extract from the landing page, fetching data instead for the username it gets from the search input component. As a way of guidance, when a user types in a wrong username, a prompt shows and I suggest to the user to use my wonderful mentors' username!.
Setting up the Error Boundary Component
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
So basically this component displays a pre-designed UI instead of your page rendering a crashed website with an awful UI!
Implementing of Search Engine Optimization
Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines. SEO targets unpaid traffic rather than direct traffic or paid traffic. In simple terms, it means the process of improving your site to increase its visibility when people search for products or services related to your product in Google, Bing, and other search engines. The better visibility your pages have in search results, the more likely you are to garner attention and attract prospective and existing customers to your business.
In React, there's a default title for your website that you must have noticed; 'React App' and a custom React description and these will display for every page on your website, so improving this in React, I needed to install a dependency called React Helmet.
`npm install react-helmet-async`
After installation, I imported a <HelmetProvider> component from react-helmet-async which I used to wrap my top level component.
Then for each page component that needs a unique title and description, I imported <Helmet> component from react-helmet-async, which then housed the title tag and meta tag that contains the description.
Creating a 404 page
A 404 page is a landing page that tells your site viewers the requested page is unavailable or, in some cases, doesn’t exist. Basically, if a user tries to visit a page that cannot be found, they’ll be sent to your 404 page.
I tried to make my 404 page visually appealing, user-friendly, because 404 error page shows customers that you care about their experience and I'm very interested in keeping them on my website.
Other cool features
1. Loading State
Using React Lazy Loading I made sure that all data from the GitHub API are available before the page fully renders, using a loading state and a loading image as a fallback UI. This is way more better than my users seeing a half broken page on initial render.
2. Route Fetching
While building my app, I realized that when a user account details is fetched when the search component form is submitted, taking the URL, sharing it and opening it on another tab causes a "Page Not Found error", that is because the data fetch function is only called when the submit event is clicked on the Search component.
How do I solve?! In comes React Router useParams hook!.
The useParams() hook is a React Router hook that allows you to access the parameters of the current URL. This can be useful if you want to dynamically render content based on the URL parameters.
So I accessed the username parameter passed into the URL through dynamic routing and with the useEffect hook, make a fetch call anytime the page is rendered, to get the user account details regardless of whether the form was submitted or not!.
Conclusion
Thank you for taking your time to read this long boring article!.
This bring me to the end of the short journey through the GitHub App, it's quite basic like I said, and it was also fun working on it, I was able to implement various React concepts in just so little an app and I loved that. So check out the links below and leave me some questions and reviews.
Live Link: https://ose-github-api.netlify.app/
GitHub repo: https://github.com/Osebest/AltSchool3
Top comments (0)