Github Searcher: coding task
Coding TaskGithub Searcher is a simple single page application built with React JS.
The project was bootstrapped with Create React App.
The project’s is also deployed at this link for viewing purpose: test.kashanshah.com
The screens provided were of a single page application, but since react router was a requirement, therefore, using React Router Dom I have created 2 routes:
On search page, there are two inputs, i.e. search field, to enter the search keyword; and the dropdown where user can pick “User”, “Repository” or “Issues” to define the entities that he want to search.
When a user types 3 or more characters, based on the Entity type dropdown value, the search results are fetched from github API and displayed to the user. 30 results per hit has been rendered, with infinite scrolling untill all the results are displayed.
For easily making the API calls, axios has been used which is wrapped in a custom developed function createReqParams in functions.js. To avoid the unnecessary API calls, debouncing is also implemented using lodash. In case a search api call is in the queue, the new API call cancels the previous call and then makes a new one.
For dropdown, React Select has been used. While for infinite scrolling, React Infinite Scroll Component has been used.
The first 30 results against each searched keyword are also stored in redux store, through redux-persist. The cached results are flushed when the default route / is mounted.
Before calling the API, the application first checks the redux store for the results against the typed keyword. If the result is present, the application checks if the cached data is not older than an hour. If the data is not an hour older, it displays the data from redux store, otherwise a new API call is executed to get refreshed data.
As mentioned in the Github Documentation, it allows 10 requests per minute while searching for any keyword. Therefore, whenever the API calls exceeds than the allowed number, it displays the error and a Retry button appears so that the user may wait and retry again to continue the search.
In the project directory, you can run:
npm startRuns the app in the development mode.\
npm run buildBuilds the app for production to the build folder.\