- 🏗️ bootstrap by vite
- ⚛️ framework by react
- 🧬 language by typescript
- 🏭 build by tsc & vite
- 🖼️ component by mui
- ⚛️ design-pattern by atomic design
- 📔 ui component explorer by storybook
- 🎛️ state-management by zustand
- 📝 form by react-hook-form & form-validation by zod
- ⚓ page-router by react-router
- 💥 error-boundary by react-error-boundary
- 🪝 react-hooks by ahooks
- 📡 http-client by react-query & axios
- 🪄 makes typescript's built-in typings be better by ts-reset
- 🎏 create immutable-state by immer
- 📅 date-tools by dayjs
- 🏘️ test-framework by vitest
- 🐙 unit-test by @testing-library
- 🎭 e2e-test by playwright
- 👀 lint-code by eslint & prettier
- 🔍 dependencies checker by madge
- 📊 test-coverage by c8
- 🕵️ commit-check by husky & lint-staged
- 🧩 other tools: lodash & promise-pool
- Node version need >=18
- If you want to run the "output-dependencies" script, you must have graphviz installed.
Step1：clone this project
Step2：npm i
Step3：npm run dev
Step4：make your components in src/**
Step5: make your test code in test/**
Step6: run scripts (build/preview/test/lint/...)
that's all, happy hacking!
just set this env in .env.production file!
ENV_BUILD_IN_SINGLEFILE = true
- dev
- build
- preview
- test
- lint
- coverage
- storybook
- build-storybook
- check-circular
- output-dependencies
- remove-node_modules
- upgrade-node_modules
├─.husky
├─.storybook
├─.vscode
├─coverage
├─dist
├─node_modules
├─public
├─storybook-static
├─.env.development
├─.env.production
├─.eslintignore
├─.eslintrc
├─.gitignore
├─.madgerc
├─.prettierignore
├─.prettierrc
├─architecture.png
├─dependencies.svg
├─index.html
├─LICENSE
├─package.json
├─README.md
├─stats.html
├─tsconfig.json
├─vite.config.ts
└─src
├─app
| ├─@types
| ├─apis
| ├─components
| | ├─atoms
| | ├─molecules
| | ├─organisms
| | └─index.ts
| ├─constants
| ├─hooks
| ├─layouts
| ├─pages
| ├─routers
| ├─stores
| ├─themes
| ├─utils
| ├─app.tsx
| └─index.ts
├─shared
| ├─components
| ├─hooks
| └─utils
├─test
| └─setup.ts
├─index.css
├─index.tsx
├─reset.d.ts
└─env.d.ts