There is a tree with big, juicy and red apples on it. We want to collect those apples but we can't reach them. Because the tree is very high. We have to shake the tree to drop apples. After that, we can put the apples to our apple basket.
There will be 4 objects on the screen. Apples, tree, basket and a button. You can use any image (SVG is plus) for these. After clicking the tree will shaking for 3 seconds. After shaking effect, more than one apple will be dropped in different time. The apples will appear on basket 1 second later after dropped. Apple basket, tree, and apples must be separated into different components and they must talk to each other with local state or redux.
🚀 Demo
| Requirements | 🧐 |
|---|---|
| CRA | ✅ |
| Redux | ✅ |
| SASS | ✅ |
| Inline comments | ✅ |
| Package | Version |
|---|---|
| eslint | ^7.32.0 |
| eslint-config-prettier | ^8.3.0 |
| eslint-plugin-prettier | ^4.0.0 |
| eslint-plugin-react | ^7.26.1 |
| eslint-plugin-react-hooks | ^4.2.0 |
| prettier | ^2.4.1 |
| react-redux | ^7.2.5 |
| react-toastify | ^8.0.3 |
| react-transition-group | ^4.4.2 |
| redux | ^4.1.1 |
| redux-thunk | ^2.3.0 |
| sass | ^1.42.1 |
- Install deps with NPM or Yarn:
npm install
#or
yarn- In the project directory, run the development server:
npm run start
#or
yarn start- Generate full static build for production:
npm run build
#or
yarn build- To preview the site as it'll appear after deployed:
npm run serve
#or
yarn serve
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent