https://tpps88206.github.io/michael-calculator/
$ git clone https://github.com/tpps88206/michael-calculator.git
$ cd michael-calculator/
$ yarn install
$ yarn start
- Use React Hook
- Develop state management with Redux and Redux Toolkit.
- Develop CSS style with @material-ui/styles
- Develop router management with React Router.
- Write unit test with testing-library.
- Use Github Actions to implement CI/CD and deploy on Github Page.
- Use Material UI to generate the beautiful components with Material Design.
- Use OOCSS to manage the general CSS style, it is following Bootstrap.
- Use react-point to handle touch events.
- Use react-draggable to handle Drag and Drop.
- Use Lodash to control logic methods.
- Use Classnames to manage CSS class name.
- Use Husky to handle pre-commit event.
- All icons are using Material Icon or SVG.
- Define coding style with Prettier and Eslint.
- Implement the general functions of calculator.
- In the desktop
- The width of calculator will fix in
480px
. - But when the browser width is smaller than 768px, the width of calculator will fix in
360px
. - We can drag and drop the calculator to everywhere.
- The width of calculator will fix in
- In the mobile
- Calculator will fix below, and the height is
50%
of the browser. - We can not drag and drop but we can scroll it.
- Calculator will fix below, and the height is
- We can open calculator with clicking button and close it with clicking outside.