Organization based github repositories searching application.
Visit the App »
This project was bootstrapped with Create React App and TypeScript template.
Using route based splitting, long list virtualization, data lazy loading, caching to improve application performance.
Here is another one which build with next.js. Take a look. 👀
You counld try the real app on github page. 👉🏻 https://yilingtung.github.io/github-explorer/
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
$ yarn && yarn start
After clone the project and install all dependencies. You can run the script below and open http://localhost:6006 to view UI components in the Storybook.
$ yarn storybook
To improve rendering performance. I use react-window with react-window-scroller to implement long list virtualization which based on the window's scroll positions. It only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.
It supports two way to display the list of repositories: "Row" and "Grid".
Use Intersection Observer API to implement infinite scroll and data lazy-loading.
Route as modal to quick viewing repo's detail and README.md for better user experiences ans SEO.
On many popular social media, opening a post will update the URL but won't trigger a navigation and will instead display the content inside a modal. This behavior ensures the user won't lose the current UI context (scroll position).
To prevent query refetching. I choose react-query as a state management to handles fetched data and caching.
Use Query Key factories to keep query keys flexible and easy to maintain.
In order to prevent unnecessary re-render, use react memoize function such as React.memo, useMemo, useCallback. And use with DevTools like Profiler to monitor application performance.
So as to reduce the bundle sizes, only load what you need.
Use React.lazy and React.Suspense to dynamically load the necessary bundles on demand. It's not only for components lazy loading, but also for the whole route.
Becouse Github API has rate limit . Unauthenticated requests allows up to 10 requests per minute. That is why you may find the page show some errors or infinite scroll becomes a button trigger sometimes.
Refer to Atomic design.
src
├── assets <-- icons and images
├── components
│ └── atoms <-- atoms: Input, Button...
│ │ └── Com1
│ │ └── index.ts <-- export component from here
│ │ └── styles.tsx <-- styled of Com1
│ │ └── Com1.tsx <-- Com1 component
│ │ └── Com1.stories.tsx <-- the storybook of Com1
│ │ └── Com1.test.tsx <-- unit test of Com1
│ └── molecules <-- molecules: CardRepo...
│ └── organisms <-- organisms: Header... might has some api logic
│ └── layouts <-- sharing layouts
│ └── pages <-- combine components, implement app business logic
├── App.tsx <-- app routes
├── styles <-- styles
│ └── globalStyles.ts
│ └── theme.ts
└── utis
└── api <-- api functions
└── constants <-- endpoints, layout constants
└── functions <-- helper functions
└── hooks <-- custom hooks
└── maps <-- languageColorsMap
└── queryKeys <-- query keys for manage query caching
types <-- interface, type
Automatically deploy to GitHub Pages with GitHub Actions and caching dependencies to speed up workflows.