This is a solution to the GitHub Repository exam project given by AltSchool Africa School of Software Engineering tutors.
Instruction: You can use any form of styling, from Tailwind to vanilla CSS, CSS Modules, and StyleComponent. You are advised to use a UI library like Chakra UI, React-Aria, ShadCN to get you to move faster. Make sure you submit the correct URL for GitHub and the hosted version of your work. Use any hosting platform you are familiar with.
Questions: Implement a Web App using GitHub API to fetch your GitHub repositories portfolio. Show a page listing all your repositories on GitHub with pagination enabled. Bonus: Implement Search and Filter. Create another page showing data for a single repo when clicked from the page. Show all repos using nested routes while using all the necessary tools in React. Implement an Error Boundary (show a page to test the error boundary). A 404 page (show a page to test the 404 page). Good Layout, UI, and Designs are essential. Accessibility techniques taught in semester one are Important. BONUS: Provide a button to Create a new repo using a Modal, allow a way to update some details of the created repo, and finally add a way to delete the repo. Instructors Award of Recognition ????.
- Live Site URL: https://a-git-hub-repo-app.vercel.app
- React commponents, props, useState, useEffect, ErrorBoundary, BrowserRouter, fetch API, Helmet and Chakra
- How to fetch data from an external source using
fetch() - Adding routes to react apps using React Router
- Implementing SEO using
Helmet - Depolying React Routed sites to Vercel
- Implementing custom pagination
- Creating page to test ErrorBoundary and a error 404 page
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, Chakra, and implementing SEOs.
These resources were useful in helping me build this project
- How to Implement Pagination in React
- How I Implemented an API fetch of my GitHub
- How to Avoid Breaking Your React Application in Production
- Maximizing SEO with React Helmet: A Complete Guide
Bukola Ogunleye