{"id":13727048,"url":"https://github.com/yonureker/gitsearch","last_synced_at":"2026-02-23T21:12:52.430Z","repository":{"id":100891845,"uuid":"334015127","full_name":"yonureker/gitsearch","owner":"yonureker","description":"A searchbar for querying Github users and repositories. Written in React Native and React Native Web. GraphQL and Apollo Client to query Github GraphQL API.","archived":false,"fork":false,"pushed_at":"2024-04-23T00:18:10.000Z","size":9551,"stargazers_count":16,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-14T17:47:57.155Z","etag":null,"topics":["apollo","graphql","react","reactnative","typescript"],"latest_commit_sha":null,"homepage":"https://gitsearch-six.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/yonureker.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":"2021-01-29T02:28:29.000Z","updated_at":"2024-11-02T21:01:26.000Z","dependencies_parsed_at":"2024-08-03T01:29:32.961Z","dependency_job_id":"72c6a5cb-431c-43a6-b361-148d447c7244","html_url":"https://github.com/yonureker/gitsearch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yonureker%2Fgitsearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yonureker%2Fgitsearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yonureker%2Fgitsearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yonureker%2Fgitsearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yonureker","download_url":"https://codeload.github.com/yonureker/gitsearch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244024229,"owners_count":20385392,"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":["apollo","graphql","react","reactnative","typescript"],"created_at":"2024-08-03T01:03:37.297Z","updated_at":"2026-02-23T21:12:47.375Z","avatar_url":"https://github.com/yonureker.png","language":"TypeScript","readme":"## GitSearch\n\nGitSearch is a search engine where you can search Github users and repositories. Search results are shown as user types the query. The application uses the Github GraphQL API to display user or repository search results. The web app is built with React Native web components and the website is deployed via Vercel.\n\n## Demo\n\nLive demo is available [here](https://gitsearch-six.vercel.app/)\n\n## GraphQL\n\nI initially built the app with [Github REST API](https://docs.github.com/en/rest) where you simply fetch the data from either https://api.github.com/search/users?q=${query} or https://api.github.com/search/repositories?q=${query} and save the necessary portion of the response to a state to display the required info.\n\nLater, I realized that Github also has a [GraphQL API](https://docs.github.com/en/graphql) and wanted to have an intro about the GraphQL query language. After playing around with the [explorer](https://docs.github.com/en/graphql/overview/explorer), I come up with queries to search Github users and repositories given a query from the user:\n\n```javascript\nconst GET_USERS = gql`\n  query SearchUsers($userQuery: String!) {\n    search(query: $userQuery, type: USER, first: 20) {\n      edges {\n        node {\n          ... on User {\n            avatarUrl\n            id\n            login\n            url\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst GET_REPOSITORIES = gql`\n  query SearchRepositories($userQuery: String!) {\n    search(query: $userQuery, type: REPOSITORY, first: 20) {\n      edges {\n        node {\n          ... on Repository {\n            id\n            url\n            description\n            stargazerCount\n            nameWithOwner\n            owner {\n              avatarUrl\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n```\n\n## Optimizing Search\n\nI have implemented a few conditions to make the search more data efficient for the user:\n\n* The user has to enter at least 3 characters before the search starts.\n* When the user stops typing, there is a 1 second delay before the search starts.\n\n```javascript\nuseEffect(() =\u003e {\n    if (query.length \u003e= 3) {\n      const timeoutId = setTimeout(() =\u003e handleNewSearch(), 1000);\n      return () =\u003e clearTimeout(timeoutId);\n    }\n  }, [query]);\n```","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyonureker%2Fgitsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyonureker%2Fgitsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyonureker%2Fgitsearch/lists"}