uvacoder / github-user-scroll

Introduction:

Simple web application built using React.js to search GitHub repositories ☕️

Built with:

• Programming Language: TypeScript
• Framework: React.js
• Components Library: Ant Design
• HTTP Client: Axios

Structure:

[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

How to run the project:

1. Clone the repo (via GitHub CLI)

   gh repo clone akashennn/dcard-scroll

2. Go to the project directory /dcard-scroll and install node modules

   yarn i

3. Run the project

   yarn start

FAQ:

1. 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.

2. How does the infinite scroll works?

• Number of results per page is 30 (default), therefore 30 * pageNumber covers all the results appeared on the search until now. If that's less than the total_count, more results are available to fetch so the API call will be made when user scrolls down / reach the last element of the current search result page.

Screenshots:

• Search results for dcard