https://github.com/kylemocode/dcard-reader

Dcard Reader 👀
https://github.com/kylemocode/dcard-reader

Last synced: 23 days ago
JSON representation

Dcard Reader 👀

• Host: GitHub
• URL: https://github.com/kylemocode/dcard-reader
• Owner: kylemocode
• License: mit
• Created: 2020-04-12T15:01:53.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:15:32.000Z (almost 2 years ago)
• Last Synced: 2023-03-05T14:57:41.505Z (almost 2 years ago)
• Language: TypeScript
• Homepage:
• Size: 8.67 MB
• Stars: 18
• Watchers: 1
• Forks: 5
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and TypeScript template.

# Dcard Reader

A webapp that imitate Dcard app. 

Using Virtualized List and lazy data-loading to enhance app performance.

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkylemocode%2Fdcard-reader.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fkylemocode%2Fdcard-reader?ref=badge_shield)

![image](./assets/dcard-reader.gif)

## Installation

```shell

$ git clone https://github.com/kylemocode/dcard-reader.git

$ cd dcard-reader

$ npm install && npm start (or using yarn instead)

```

## Features:

  - [X] Virtualized List

  - [X] Infinite Scroll

  - [X] Lazy Load

  - [X] Performance

  - [X] Proxy Server

  

### Virtualized List

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. 

### Infinite Scroll && Lazy Load

Use `IntersectionObserver` API to achieve infinite scroll and only load more data while scrolling to current bottom boundary.

### Performance

In addition to lazy-loading data, dcard-reader also use react core functions to enhance app performance, such as `React.memo`、`useCallback`、`useMemo`...etc.

### Proxy server

To solve **CORS** problem in dcard 3rd-party-API, I choose to build my own backend proxy server which powered by `express`. 

## Source Code File Structure

```

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

```

## Roadmap

  - [ ] UI/UX (More Features)

  - [ ] Increase Unit Test Coverage

  - [ ] CICD Pipeline

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkylemocode%2Fdcard-reader.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fkylemocode%2Fdcard-reader?ref=badge_large)