/quickstart-react-admin

An quick-start solution for enterprise applications as a React templete.

Primary LanguageTypeScript

Language : πŸ‡ΊπŸ‡Έ| πŸ‡¨πŸ‡³δΈ­ζ–‡ζ–‡ζ‘£

QuickStart React Admin

An quick-start solution for enterprise applications as a React templete.

Inspired by https://github.com/Codennnn/portal

Preview

prod: https://quickstart-react-admin.vercel.app/

Features

  • πŸ’‘ TypeScript: A language for application-scale JavaScript
  • πŸ“œ Blocks: Build page with block template
  • πŸ’Ž Neat Design: Follow Ant Design specification
  • πŸ“ Common Templates: Typical templates for enterprise applications
  • πŸš€ State of The Art Development: Newest development stack of React/Redux/Redux-Tookit/antd
  • πŸ“± Responsive: Designed for variable screen sizes
  • 🎨 Theming: Customizable theme with simple config
  • 🌐 International: Built-in i18n solution
  • βš™οΈ Best Practices: Solid workflow to make your code healthy
  • πŸ”’ Mock development: Easy to use mock development solution
  • βœ… UI Test: Fly safely with unit and e2e tests
  • βœ… Docker: Easy to run with Docker

Directory Structure

β”œβ”€β”€ README.md
β”œβ”€β”€ craco.config.js
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ favico.ico
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ manifest.json
β”‚   └── robots.txt
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ App.tsx
β”‚   β”œβ”€β”€ app
β”‚   β”‚   β”œβ”€β”€ api
β”‚   β”‚   β”‚   β”œβ”€β”€ notice.ts
β”‚   β”‚   β”‚   └── user.ts
β”‚   β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”‚   β”œβ”€β”€ Brand.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Calendar.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Content
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AppContent.tsx
β”‚   β”‚   β”‚   β”‚   └── index.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ DatePicker.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Footer
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AppFooter.tsx
β”‚   β”‚   β”‚   β”‚   └── index.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ Header
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AppHeader.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ Locales.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ LoginTitle.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ Notice.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ UserProfile.tsx
β”‚   β”‚   β”‚   β”‚   └── index.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ Layouts
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ MainLayout.less
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ MainLayout.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ UserLayout.less
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ UserLayout.tsx
β”‚   β”‚   β”‚   β”‚   └── index.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Result
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ NotFound.tsx
β”‚   β”‚   β”‚   β”‚   └── index.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ SiderBar
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AppSider.tsx
β”‚   β”‚   β”‚   β”‚   └── index.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ TimePicker.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Welcome.tsx
β”‚   β”‚   β”‚   └── index.ts
β”‚   β”‚   β”œβ”€β”€ hooks
β”‚   β”‚   β”œβ”€β”€ pages
β”‚   β”‚   β”œβ”€β”€ redux
β”‚   β”‚   β”‚   β”œβ”€β”€ appStateSlice.ts
β”‚   β”‚   β”‚   └── userLoginSlice.ts
β”‚   β”‚   β”œβ”€β”€ store.ts
β”‚   β”‚   β”œβ”€β”€ styleConstants.ts
β”‚   β”‚   └── types
β”‚   β”‚       β”œβ”€β”€ app.ts
β”‚   β”‚       β”œβ”€β”€ index.ts
β”‚   β”‚       └── user.ts
β”‚   β”œβ”€β”€ assets
β”‚   β”‚   └── images
β”‚   β”œβ”€β”€ globalConstants.ts
β”‚   β”œβ”€β”€ index.tsx
β”‚   β”œβ”€β”€ locales
β”‚   β”‚   β”œβ”€β”€ en_US.json
β”‚   β”‚   β”œβ”€β”€ index.ts
β”‚   β”‚   └── zh_CN.json
β”‚   β”œβ”€β”€ react-app-env.d.ts
β”‚   β”œβ”€β”€ reportWebVitals.ts
β”‚   β”œβ”€β”€ routes
β”‚   β”‚   └── index.tsx
β”‚   β”œβ”€β”€ scrollbar.ts
β”‚   β”œβ”€β”€ serviceWorker.js
β”‚   β”œβ”€β”€ styles
β”‚   β”‚   β”œβ”€β”€ app.less
β”‚   β”‚   β”œβ”€β”€ tailwind.css
β”‚   β”‚   └── variables.less
β”‚   └── utils
β”‚       β”œβ”€β”€ api.ts
β”‚       β”œβ”€β”€ auth.ts
β”‚       β”œβ”€β”€ index.ts
β”‚       β”œβ”€β”€ request.ts
β”‚       └── types.ts
β”œβ”€β”€ tailwind.config.js
β”œβ”€β”€ tsconfig.json
└── yarn.lock

Useage

Dev

$ mkdir <your-project-name>
$ cd <your-project-name>
$ yarn install
$ yarn start         # visit http://localhost:3000

Production

$ mkdir <your-project-name>
$ cd <your-project-name>
$ yarn build

lookup the output path: /dist

Browsers support

Modern browsers.

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Edge last 2 versions last 2 versions last 2 versions last 2 versions

Contributing

Any type of contribution is welcome, here are some examples of how you may contribute to this project: