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	Firefox	Chrome	Safari	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:

• Submit issues to report bugs or ask questions.
• Propose pull requests to improve our code.