react-template-next

Quick to build a modern react app with react clean architecture！

Features ✨

• 🏗️ 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:json-server es-toolkit & promise-pool

About Env 🌌

• Node version need >=18
• If you want to run the "output-dependencies" script, you must have graphviz installed.

Other version 🔗

• css by tailwind

How to use? 🤨

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!

How to build all in one HTML file? 📜

just set this env in .env.production file!

ENV_BUILD_IN_SINGLEFILE = true

Script 🪃

• dev
• build
• preview
• test
• lint
• coverage
• storybook
• build-storybook
• check-circular
• output-dependencies
• remove-node_modules
• upgrade-node_modules

Catalog 📑

├─.husky
├─.mock
    ├─config.json
    └─data.json
├─.storybook
├─.vscode
├─coverage
├─dist
├─node_modules
├─public
├─storybook-static
├─.env.development
├─.env.production
├─.gitignore
├─.madgerc
├─.prettierignore
├─.prettierrc
├─architecture.png
├─dependencies.svg
├─.eslint.config.js
├─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 (// TODO: ReactBuilder)
    | ├─stores
    | ├─themes
    | ├─utils
    | ├─error.tsx
    | ├─app.tsx
    | └─index.ts
    ├─shared
    | ├─components
    | ├─hooks
    | └─utils
    ├─test
    | └─setup.ts
    ├─index.css
    ├─index.tsx
    ├─reset.d.ts
    └─env.d.ts

About React-Clean-Architecture 🧐

Demo ⚛️

• react-todo-demo