petroritse1 / gitfetcher

PeterGithub fetch repo

This is a project for the AltSchool Africa Frontend Engineering Exam.

Overview

The challenge

Create a react website that can fetch yoour repository and have amazing UI/UX.

Additional functionality

• Implemented a search bar that can fetch any github repository

PeterGitFetcher Functionalities

Get user repositories Get user Single repositories

This PeterGithub-fetcher is used to perform basic fetching of github repositories and display additional info about it:

How to Use the PeterGitFetcher

Follow these simple steps to make any operation between numbers after you open the calculator app:

1. Enter a valid github id: Start by entering the github id you want to fetch.

2. Press the enter button on your keyboard or click on the search icon to get a repo:

3. Click on the any card to get result:
   Click on the card for the desired operation you want to perform

   • Repo () to get all user Repositories
   • Followers (-) to get user followers
   • Bio to get user profile
   • Error to activate the error boundary

4. Clck on the next button to go the next repo: Click on next button to navigate to next repo if repo

Built with

-html -css -sass -react -javascript

Setting up the repository

Follow these steps to set up the repository on your local machine:

• Install the dependencies by running

npm install

• Start the development server by running

npm run dev

• Open http://localhost:3000/ in your browser to view the app

Dependencies and Libary used

"dependencies": { "react": "^18.2.0", - Used to write and display the components; "

"react-error-boundary": "^4.0.11",
   -    For displaying error message Whenever there is an application error  or bug
"react-feather": "^2.0.10",
   -    Used react feather for amazing and easy to use icons
"react-icons": "^4.11.0",
   -  Used react-icons for more powerful and complex icons;
"react-router-dom": "^6.17.0",
  -   Used the libary for going to different places on the website without restarting  or resetting the app which can be very handly and useful
"sass": "^1.69.4",
    - Used to write and bundle css code
"timeago.js": "^4.0.2"
  -   Used to format the time into nice format

  "react-toastify-js": "^1.12.0"

}

Links

• GitHub
• Live link

Creator

• Onigbinde Peter