Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdulhadi806/get-and-search-github-issues-using-github-api
This app is used to search and find github issues using github API, App is created using ReactJS, Typescript, Tailwind css
https://github.com/abdulhadi806/get-and-search-github-issues-using-github-api
context-api github-api reactjs rest-api tailwindcss typescript
Last synced: 7 days ago
JSON representation
This app is used to search and find github issues using github API, App is created using ReactJS, Typescript, Tailwind css
- Host: GitHub
- URL: https://github.com/abdulhadi806/get-and-search-github-issues-using-github-api
- Owner: AbdulHadi806
- Created: 2024-02-01T18:17:28.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-02-05T21:16:22.000Z (9 months ago)
- Last Synced: 2024-02-06T17:57:15.474Z (9 months ago)
- Topics: context-api, github-api, reactjs, rest-api, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://githubissues-flame.vercel.app
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GitHub Issues Viewer
## Overview
GitHub Issues Viewer is a web application that enables users to retrieve and search GitHub issues using the GitHub API. It is built with ReactJS, Tailwind CSS, and TypeScript.
[View Project](https://githubissues-flame.vercel.app/)
## Technologies Used
- [ReactJS](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [GitHub API](https://api.github.com)
## How to Run the App
To run the application locally, follow these steps:
1. Clone the project repository:
```bash
git clone https://github.com/AbdulHadi806/get-and-search-github-issues-using-github-api.git
```
2. Install dependencies with npm:
```bash
npm install
```
3. Start the application:
```bash
npm start
```
4. Open Browser and search
```bash
http://localhost:3000
```
## UI
## How the App Works
The GitHub Issues Viewer application is designed to facilitate the retrieval and search of GitHub issues through the GitHub API. Below is an overview of how the application functions:
### Data Fetching from GitHub API
The core functionality of fetching GitHub issues is implemented through the `fetchIssues` function located in the GithubProvider.ts file. Here's a breakdown of its functionality:
- The function takes two parameters: `page`, which represents the page number of the issues to fetch, and `search`, which represents the search query.
- Upon invocation, it sets the loading state to `true` to indicate that data fetching is in progress.
- If the search query has changed (`prevSearch !== search`), it resets the current page and total pages to ensure accurate pagination.
- It then performs a preliminary fetch to determine the total number of issues matching the search query to calculate the total number of pages.
- Subsequently, it fetches the issues for the specified page from the GitHub API.
- Upon successful fetching of data, it updates the application state with the fetched issues, current page, and search query, and sets the loading state to `false`.
- In case of an error during data fetching, it logs the error and sets the error state accordingly, resetting the current page and total pages.
### Using Data
We are exporting the data from GitHubProvider.tsx and using it in respected Components,
### API Rate Limit Handling
Due to using unauthenticated API there is a rate limit set on our API.
## Package.json
```json
{
"name": "github_issues",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.77",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"date-fns": "^3.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-paginate": "^8.2.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.8",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.4.1"
}
}