Check the Demo
This project was developed by React Styled Component & TypeScript.
I choose Material UI as the design framework. When typing in the search input, it will debounce the request of getting the data from API. I also build the code as server-side render files to improve SEO. There are two language versions provided.
When loading data, it will call API 5 times at once, and sets the data from the API to redux store. Clicking the last page button of the pagination will automatically load data again, and append the new ones into the store. You will find the pagination will be more pages after you click the last page if there is more data to fetch.
Only 1 page in the APP.
All components are placed in the components folder. Actions, reducers, and API fetch functions are located in the modules folder.
There is a middleware invented for common single fetch. However, I don't really use it in this project. It will be found in the middlewares folder.
Common functions and variables are defined in the utils folder.
- Clone the repo
npm installnpm start