Live demo

https://adoring-jennings-f809ce.netlify.app/

How to run this project in local environment

1. install Node.js package manager yarn or npm
2. install dependencies through yarn or npm

yarn

or

npm install

3. start development server

yarn dev

or

npm run dev

4. build and start production server

yarn build
yarn start

or

npm run build
npm start

Flow Chart

• UI
• input change
• intersection change

Description

Folder structure

• Define components, hooks, and util functions in a folder as a module.
• Reusable components, hooks, and util functions would be defined in the sibling folders of other module folders.

Reusable components

• Use styled-system to unify style property name of reusable components.

Type safe

• Generate types of github api through openapi-typescript to ensure type safety when access data of github api responses.
• Exhaustive match through ts-pattern to ensure all input types would be handled in compile time.

Styling

• Use one of the css-in-js solutions, styled-components to add style to components to avoid css class name naming collision and polyfill styled cross different browsers.

Debounce

• Reduce the update frequency of fetch urls to avoid too many requests sent in a short time.

Infinite scroll

• Update trigger condition of the github next page repositories through IntersectionObserver apis.

License

MIT