{"id":19095796,"url":"https://github.com/abdulhadi806/get-and-search-github-issues-using-github-api","last_synced_at":"2026-04-15T14:02:14.231Z","repository":{"id":220381720,"uuid":"751497823","full_name":"AbdulHadi806/Get-and-Search-Github-Issues-Using-Github-API","owner":"AbdulHadi806","description":"This app is used to search and find github issues using github API, App is created using ReactJS, Typescript, Tailwind css","archived":false,"fork":false,"pushed_at":"2024-02-05T21:16:22.000Z","size":233,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-03T00:14:34.902Z","etag":null,"topics":["context-api","github-api","reactjs","rest-api","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://githubissues-flame.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AbdulHadi806.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-01T18:17:28.000Z","updated_at":"2024-02-02T16:22:39.000Z","dependencies_parsed_at":"2024-02-05T17:48:56.231Z","dependency_job_id":"467438da-a6ca-4ca1-99a2-382b9aa16d40","html_url":"https://github.com/AbdulHadi806/Get-and-Search-Github-Issues-Using-Github-API","commit_stats":null,"previous_names":["abdulhadi806/get-and-search-github-issues-using-github-api"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdulHadi806%2FGet-and-Search-Github-Issues-Using-Github-API","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdulHadi806%2FGet-and-Search-Github-Issues-Using-Github-API/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdulHadi806%2FGet-and-Search-Github-Issues-Using-Github-API/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdulHadi806%2FGet-and-Search-Github-Issues-Using-Github-API/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AbdulHadi806","download_url":"https://codeload.github.com/AbdulHadi806/Get-and-Search-Github-Issues-Using-Github-API/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240146255,"owners_count":19755260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-api","github-api","reactjs","rest-api","tailwindcss","typescript"],"created_at":"2024-11-09T03:35:06.916Z","updated_at":"2025-10-15T15:47:55.154Z","avatar_url":"https://github.com/AbdulHadi806.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Issues Viewer\n\n## Overview\nGitHub 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.\n[View Project](https://githubissues-flame.vercel.app/)\n\n## Technologies Used\n- [ReactJS](https://reactjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [GitHub API](https://api.github.com)\n\n## How to Run the App\nTo run the application locally, follow these steps:\n\n1. Clone the project repository:\n    ```bash\n    git clone https://github.com/AbdulHadi806/get-and-search-github-issues-using-github-api.git\n    ```\n\n2. Install dependencies with npm:\n    ```bash\n    npm install\n    ```\n\n3. Start the application:\n    ```bash\n    npm start\n    ```\n4. Open Browser and search \n    ```bash\n    http://localhost:3000\n    ```\n    \n## UI\n![GitHub Issues Viewer UI](https://github.com/AbdulHadi806/get-and-search-github-issues-using-github-api/assets/113926529/2e867888-ea44-405e-a3ae-f02877e3b713)\n\n## How the App Works\n\nThe 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:\n\n### Data Fetching from GitHub API\n\nThe 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:\n\n- The function takes two parameters: `page`, which represents the page number of the issues to fetch, and `search`, which represents the search query.\n- Upon invocation, it sets the loading state to `true` to indicate that data fetching is in progress.\n- If the search query has changed (`prevSearch !== search`), it resets the current page and total pages to ensure accurate pagination.\n- It then performs a preliminary fetch to determine the total number of issues matching the search query to calculate the total number of pages.\n- Subsequently, it fetches the issues for the specified page from the GitHub API.\n- 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`.\n- 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.\n\n\u003cimg width=\"472\" alt=\"image\" src=\"https://github.com/AbdulHadi806/Get-and-Search-Github-Issues-Using-Github-API/assets/113926529/426261ea-7a71-4028-a922-c1e8314bbfbe\"\u003e\n\n### Using Data\nWe are exporting the data from GitHubProvider.tsx and using it in respected Components,\n\n\u003cimg width=\"472\" alt=\"image\" src=\"https://github.com/AbdulHadi806/Get-and-Search-Github-Issues-Using-Github-API/assets/113926529/9667f80d-2a17-4e72-a9d1-b89e73ecc556\"\u003e\n\n### API Rate Limit Handling\nDue to using unauthenticated API there is a rate limit set on our API.\n\n## Package.json\n```json\n{\n  \"name\": \"github_issues\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.17.0\",\n    \"@testing-library/react\": \"^13.4.0\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@types/jest\": \"^27.5.2\",\n    \"@types/node\": \"^16.18.77\",\n    \"@types/react\": \"^18.2.48\",\n    \"@types/react-dom\": \"^18.2.18\",\n    \"date-fns\": \"^3.3.1\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-paginate\": \"^8.2.0\",\n    \"react-scripts\": \"5.0.1\",\n    \"react-spinners\": \"^0.13.8\",\n    \"typescript\": \"^4.9.5\",\n    \"web-vitals\": \"^2.1.4\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \"\u003e0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  },\n  \"devDependencies\": {\n    \"tailwindcss\": \"^3.4.1\"\n  }\n}\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulhadi806%2Fget-and-search-github-issues-using-github-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdulhadi806%2Fget-and-search-github-issues-using-github-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulhadi806%2Fget-and-search-github-issues-using-github-api/lists"}