Altschool GitHub Portfolio Exam Project

This is a solution to the GitHub Portfolio exam project given by AltSchool Africa School of Software Engineering tutors.

Table of contents

• Overview
  • Project question
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Project question

Implement an API fetch of your GitHub portfolio, show a page with a list of all your repositories on GitHub(the page should implement pagination for the repo list), and create another page showing data for a single repo clicked from the list of repos using nested routes while using all the necessary tools in react. Implement the proper SEO, Error Boundary (show a page to test the error boundary) and 404 pages. Good UI and Designs are important.

Screenshots

Home page

Details Page

Error Page

Links

• Live Site URL: Maame's GitHub

My process

Built with

• React commponents, props, useState, useEffect, createBrowserRouter, fetch API

What I learned

• How to fetch data from an external source using fetch()
• Adding routes to react apps using React Router v6
• Implementing SEO using meta
• Depolying React Routed sites to netlify
• Implementing pagination using the GitHub API
• Creating error boundaries and implementing error pages

Continued development

This was my first time working with most of the concepts I used in building the project. I plan to learn more about APIs, React Hooks and implementing SEOs.

Useful resources

These resources were useful in helping me build this project

• Different Ways to fetch data from API in Reactjs
• Netlify React 'Page Not Found' Solution
• React Router tutorial
• Github - List repositories for a user

Author

• Website - Maame Yaa Serwaa Bona-Mensa
• Twitter - @mys_bm