Simple web application built using React.js to search GitHub repositories โ๏ธ
- Programming Language: TypeScript
- Framework: React.js
- Components Library: Ant Design
- HTTP Client: Axios
[app]
public/ # favicon, robots.txt, etc.
src/
contexts/ # state management of the application
hooks/ # custom react hooks
types/ # typescript types of the objects
App.css # styles specific to App.tsx
App.test.tsx # test cases specific to App.tsx
App.tsx # main react component
index.tsx # entry point to the react application
react-app.env.d.ts # typescript type declarations specific to project
reportWebVitals.ts # used to measure react application performance
setupTests.ts # jest test runner
.gitignore # git ignored files list
package.json # dependencies of the project
tsconfig.json # typescript configuration
yarn.lock # autogenerated file to keep track of yarn packages
-
Clone the repo (via GitHub CLI)
gh repo clone akashennn/dcard-scroll
-
Go to the project directory
/dcard-scroll
and install node modulesyarn i
-
Run the project
yarn start
- Why
useDebounce
hook is being used?
- In order to prevent backend endpoints calls being made upon every keystroke of the user's search query, now it will call the API only after user has not typed anything for 500 milliseconds.
- How does the infinite scroll works?
- Number of results per page is
30
(default), therefore30 * pageNumber
covers all the resultsappeared on the search until now
. If that's less than thetotal_count
, more results are available to fetch so the API call will be made when user scrolls down / reachthe last element
of the current search result page.
- Search results for
dcard