This project was bootstrapped with Create React App and TypeScript template.
A webapp that imitate Dcard app. Using Virtualized List and lazy data-loading to enhance app performance.
$ git clone https://github.com/kylemocode/dcard-reader.git
$ cd dcard-reader
$ npm install && npm start (or using yarn instead)
- Virtualized List
- Infinite Scroll
- Lazy Load
- Performance
- Proxy Server
Use react-window
to achieve virtualized list which is a react components for efficiently rendering large lists and tabular data.As the Chrome Performance Monitor, It took less than 4.2MB JS heap size, 350 DOM nodes on initial renderer, and of course, it's responsive.
Use IntersectionObserver
API to achieve infinite scroll and only load more data while scrolling to current bottom boundary.
In addition to lazy-loading data, dcard-reader also use react core functions to enhance app performance, such as React.memo
ใuseCallback
ใuseMemo
...etc.
To solve CORS problem in dcard 3rd-party-API, I choose to build my own backend proxy server which powered by express
.
src
โโโ api
โ โโโ proxy.ts
โโโ constant
โ โโโ api.ts
โโโ hook
โ โโโ useFetchPost.tsx
โโโ utils
โ โโโ media.ts
โโโ components
โ โโโ LoadingPlaceHolder
โ โโโ PostItem
โ โโโ PostModal
โ โโโ PostContainer
โ โโโ ResponseInfo
โ โโโ TopicLabel
โโโ App.tsx
โโโ index.css
โโโ index.tsx
โโโ serviceWorker.ts
- UI/UX (More Features)
- Increase Unit Test Coverage
- CICD Pipeline