Altschool Github App Project
Published: 2023-01-08 21:17:52

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




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z50zmre1mbpamt9olgy.png)



## 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}`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4jtmhwtkx2u3y7lgx3q.png)



## 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()
```

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh86qn6dhm1q7y277oze.png)

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.

    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3r7gqkzyxlh0eygoyow.png)


**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";
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2v6ato8fpwbqst9fifa.png)

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