duxianwei520/react: A React 18 + Vite Admin Management System Boilerplate

What the Project Is and What It Ships With

duxianwei520/react is a ready-to-run admin management system scaffold for PC browsers. It is not a component library or a framework; it is a complete application skeleton that a team clones and builds on. The technology stack is fixed: React 18.3.1 as the view layer, Redux 5.0.1 with Redux Toolkit 2.2.0 for state management, React Router DOM 6.28.1 for routing, Vite 6.0.5 for builds and the development server, Axios 1.7.9 for HTTP requests, Less 4.2.0 for styles, and Ant Design 6.3.2 as the component library. ECharts 5.6.0 is included for charts. Draft.js 0.11.7 provides the rich text editor. Socket.io is included for real-time communication. The README lists all of these as part of the completed features, including login with permission control, Redux demonstration using Redux Toolkit, and Vite hot module replacement.

Getting the Project Running

Clone and install:

git clone --depth 1 https://github.com/duxianwei520/react.git
cd react
npm install
npm start

The `npm start` command runs two processes concurrently: the Vite development server and a mock HTTP server. The package.json scripts define `start` as `concurrently "npm run dev" "npm run mock"`, with `mock` running `nodemon --watch app/mocks/ app/mocks/http.js`. This means the mock server restarts automatically when mock files change. Once both processes are running, the application is accessible at the Vite default port and shows the login screen immediately. The `npm run build` command produces a production build via Vite. The README advises against using cnpm for dependency installation, recommending a direct npm install or a VPN if package downloads are slow due to network conditions.

RBAC: User, Role, and Module Management

The boilerplate ships with a working implementation of three management screens: user management, role management, and module management, all connected to the mock API from the first run. These form the foundation of the role-based access control system. The README notes that starting with `npm start` shows the complete functionality without any additional configuration. Authentication is handled via Axios interceptors that check a `status` field in every API response: a value of 1 means success, 0 means an error with details in `msg`, and -1 means the session has timed out, triggering a redirect to the login screen. The response structure is documented in the README:

{
  data: {
    totalCount: 100,
    currentPage: 1,
    pageSize: 10,
    'list': [],
  },
  msg: '',
  status: 1,
}

All async responses flow through a central handler in `configs/ajax.js`.

Mock Server, ECharts, and Socket.io

The mock server uses mockjs to return realistic-looking data for all API endpoints without a real backend. Mock files live in `app/mocks/` and are watched by nodemon, so changes apply without restarting the whole development setup. ECharts is wired into the project as a chart rendering library, and the README mentions an echart screenshot as one of the key feature previews. Socket.io provides real-time push capability, which the README lists as a completed feature. Draft.js powers the rich text editor component. These integrations are in the repository as working code rather than documentation stubs, so a developer evaluating the project can see each one running immediately after installation. The DraftJS integration in particular is a common source of additional setup work in other React projects due to its version compatibility constraints; here it is already integrated and functional in the project.

Axios Request Cancellation and Cross-Domain Configuration

The README includes an example of Axios request cancellation using the CancelToken API, which is the mechanism for aborting in-flight requests when a component unmounts or when a user navigates away:

import axios from 'axios'
const axiosHandle = axios.CancelToken.source()

The token is passed to the action creator and called manually to cancel after a timeout. Cross-origin request configuration is handled through Vite's proxy settings rather than CORS headers, keeping the development setup free of CORS issues for local API calls. The production build (`npm run build`) bundles the application for deployment.

Limitations: PC Only, JavaScript Codebase, and Mock Dependencies

The README describes the project as a PC management system, meaning it is not designed for mobile or responsive layouts out of the box. The codebase is JavaScript, not TypeScript; teams that require static typing will need to migrate or start from a different template. The DraftJS editor version pinned is 0.11.7, a version that has compatibility considerations with the broader React 18 ecosystem that teams should evaluate. The mock server relies on mockjs, which covers common data patterns but requires custom mock definitions for any domain-specific data structures the application needs. The README notes that dependency installation failures are the most common startup problem; this is a signal that the dependency tree has version sensitivity that can surface in environments with strict lockfile behaviour or older Node.js versions.

Comparison to Next.js Admin Templates

Next.js admin templates add server-side rendering and file-based routing on top of React. This makes them a better fit for applications where initial page load performance matters or where the admin interface needs to be publicly indexed. duxianwei520/react uses Vite and React Router for client-side routing only, which simplifies deployment (any static file host works) but means the initial bundle delivery happens before rendering. The more meaningful difference is the mock server: duxianwei520/react includes a running mock backend as part of `npm start`, while most Next.js admin templates require connecting to a real API or setting up mocking separately. For rapid prototype development where the API contract is still evolving, the built-in mock setup has concrete value.

Editorial conclusion

This boilerplate is a practical starting point for teams that need a React admin panel quickly and are comfortable with Ant Design, Redux Toolkit, and Less. The built-in mock server means frontend development can proceed without a real backend, and the companion Express and Node projects (github.com/duxianwei520/express and github.com/duxianwei520/node) provide a path to a real API once mock data is no longer sufficient. The project is not a good fit for teams that need server-side rendering, a TypeScript codebase, or a different component library. Before adopting, confirm that your npm dependency installation completes fully; the README notes that incomplete dependency installation is the most common reason the project fails to start, and advises against using cnpm as a workaround because it is not reliable for this project's dependency tree.

Frequently asked questions

Official sources

1. duxianwei520/react on GitHub
2. Issues
3. License: MIT
4. README