Altschool Github App Project

Owoola Muhammed — Sun, 08 Jan 2023 21:17:52 +0000

*Table of content
Brief intro to React
About this App
Overview of this project
Setting up React
Setting up React Router
Homepage structure
Pagination
Error boundary
Error 404 page
SEO
Conclusion
References
*

Brief intro to React

React is one of the most important frameworks of Javascript. It is arguably the most popular framework. It was developed by Jordan Walke, a software developer at Meta and was initially released in 2013.
React is a framework that simplifies complex Javascript concepts.

About this App

I built this Github App as a student at Altschool Africa. This App is a project for second semester exams. In this project, I implemented some interesting features which includes but not limited to Fetch API, Nested routes, pagination, error boundary, error 404 page, Search Engine Optimization.

Overview of Project

This is a Github App which displays all my repositories in a paginated format with 6 Repos per page which spans over 5 pages. Clicking each repository gives more information about the clicked repository. I also implemented Nested routes which allows navigation between Home and Repo without rendering the whole page. Error boundary, error 404 page and Search Engine Optimization were also implemented.

Setting up React

I created a new React App using
npx create-react-app my-app

After a successful creation, I created the necessary folders and files.

Setting up React Router

Navigation is one of the primary features of any App or website. Without a good navigation, an App becomes difficult to use. React comes with a library called React Router which allows for navigation within the App. React Router is set up using the command.
npm install react-router-dom

After installing this library, I implemented Nested routes which allows for navigation without rendering the whole page.

Home page

This consists mainly of the Home and Repo navbar buttons, error boundary button and relevant texts.
The Repo navbar button takes user to the paginated repositories while the home navbar button returns user to the homepage. Both buttons work without rendering the whole page due to implemented nested routes.

Pagination

I implemented this feature after effecting Fetch API of all my Github repositories using the URL

https://api.github.com/users/Dr-Ace2/repos

With quite a lot of repositories, I needed to equally distribute(paginate) them to make the App user-friendly. I made each repo into a small card and placed 6 of them on a single page which spans over 5 pages

pageLimit={5} dataLimit={6}

Error boundary

Errors within a an App may crash the whole App if it isn't caught and effectively managed by an error boundary. I executed this using the lifecycle methods namely

 static getDerivedStateFromError() or componentDidCatch()

This can be tested by simply clicking on the error boundary button in the home page.

Error 404 page

This is a page that is displayed when user enters a wrong route.

Search Engine Optimization (SEO)

SEO ensures that a website is easily accessible to a search engine. This increases the chances of a website appearing in a search.

I effected SEO using React Helmet which is a React library.
I imported React Helmet from react-helmet-async which I used to wrap the Title, Meta and Link tags.

  import { Helmet } from "react-helmet-async";

Conclusion

This is the end of my little Github App walkthrough. I hope you have benefitted from this. Below is the Github Repository link to the code and deploy link.

Thanks for reading.

https://github.com/Dr-Ace2/exam-second

https://exam-second.vercel.app/

References
Wikipedia
https://reactjs.org

DEV Community: Owoola Muhammed