Table of contents
Git View is an application built using React.js, a JavaScript library for building user interfaces. It allows users to view all of their repos on the Git Repo platform, which is a web-based hosting service for Git repositories.
Implementation
Navigation
To navigate between nested pages and different pages, the application uses React Router, a library that allows developers to handle routing within their React applications. This was implemented using the nested routes feature of React Router.
GitHub Repo API
To retrieve the list of repos for a user, the application makes use of the Git Repo API (Application Programming Interface). The API allows the application to communicate with the Git Repo platform and retrieve information about a user's repos. The API endpoint used in this application is https://api.github.com/users/:username/repos, where :username is the name of the user.
The application sends a GET request to this endpoint using the fetch method, a built-in JavaScript function for making requests to servers. The API returns a JSON (JavaScript Object Notation) object containing the repos for the user. The application then parses this JSON object which is in turn stored in a state.
State Management
To manage the state of the application, the application makes use of React Hooks, a feature of React that allows developers to use state and other React features in functional components. The repos are stored in the state and are used to populate the list and details pages. The state is also used to store information about the selected repo, which is used to populate the details page.
Repo Context/Content
To view each content of every repo, React Hooks feature useContext was implemented. This is so the application can store the details of the selected repo, then use it to populate the next page which will be the repo content page. This will only be triggered when the view button is clicked on any repo
Pagination
Each page rendered in the application contains one hundred of the repo items. Pagination was implemented such that the page is populated to view each hundred per different page by using the page button number to query the api for the next page. Users can skip pages, go to the next page, go to the previous page or navigate back the beginning in one click
Note: Button numbering changes on page change.
Change User
The application allows users to change the username of the github user. Using React Hook to set the state of the application by default to a user, then change the user by the input field to whatever was submitted. The application then fetches from Github by querying based on the input that has been stored in the current user.
Hosting
The application was hosted using Vercel to deploy by importing the codebase which is hosted on Github.View
Usage
To use the app, you simply need to enter "https://git-view.vercel.app/" in your browser or click here. Route in and out of pages. Feel free to check out repo details of the default user or change user to yours.
Enjoy
Codebase
To view the code base for this app, click here
Conclusion
The application provides a user-friendly way to view all of the repos of a user on the Git Repo platform. It utilizes the Git Repo API to retrieve the list of repos and additional information about them. React.js is used for the implementation of the application, React Router for routing and React Hooks for state management. It's important to mention that the API may have some limitations on the amount of request you can make, and its usage rate limits, also this is just an example and the final implementation might require some testing and debugging to fix any potential issues.