1. Project Overview

react-admin is suitable for quickly building frontend and backend management pages and management system architectures. Built with the React ecosystem. An admin management system.

This framework is designed for use and secondary development. The frontend framework uses React, the UI framework uses ant-design, global data state management uses redux, and axios is used for AJAX requests. Vite is the build tool, enabling rapid development of frontend and backend management pages.

2. Open Source License

Licensed under MIT

3. Screenshots

Project screenshots

• Login

• Detail Page

• List

• Permission Management

• Results Page

4. Feature Overview

Features

• vitejs: A faster build tool for an ultra-fast development experience.
• Menu Configuration: Uses a flat data structure for easy writing and database storage, with synchronized page menus, titles, sidebars, and top navigation bars.
• Lazy Loading: Uses @loadable/component to solve the problem of slow initial page loading.
• AJAX Requests: Follows RESTful conventions, supports automatic error notifications with configurable messages, and automatically aborts unfinished requests.
• Access Control: Displays menus based on different role permissions and supports route-level access interception.
• Custom Themes: Customize interface colors according to your preferences.
• Proxy Forwarding: Solves cross-origin issues with frontend requests.
• Automatic Route Generation: Decentralized route management.

The system provides several basic pages.

• Login Page
• Detail Page
• Form Page
• Document List Page
• Permission Management
• Results Page

For the preview URL, documentation URL, and API documentation URL, please refer to the README.md file.

5. Tech Stack

JavaScript Version

TypeScript Version

• vite
• react
• react-router@6
• ant-design
• redux
• axios

Recommended Node.js Version

D:>node

Start with Scripts

After installing the dependencies, there are several ways to start the project.

• npm run dev

Fetch API data and display project information using data returned by the backend.

• npm run "dev:mock"

Use local mock data to display project information.

• npm run build

Standard build mode.

• npm run preview

Preview the locally generated build output.