yezihaohao/react-admin
React Admin
react-admin is a full-featured admin dashboard built with React and Ant Design, designed for building interfaces that manage backend operations. Its core identity centers on providing a complete admin panel with dynamic menu configuration, role-based access control, and third-party OAuth authentication, all within a responsive layout that adapts to different screen widths.
The project distinguishes itself through a dynamic route-based menu system that fetches navigation structure from a server API, enabling runtime menu updates without redeploying the application. It integrates role-based route guarding that checks user roles on each transition and redirects unauthorized access, alongside a unified authentication flow supporting both standard email-password login and GitHub OAuth. The admin layout includes a collapsible sidebar, top navigation, scrollable menus, and route-aware active states, with theme customization achieved through Less variable overrides and a configurable color scheme.
Beyond these differentiators, the project supports on-demand component loading to reduce bundle size, environment-specific build configurations, and Progressive Web App installation prompts. It includes data visualization through ECharts and Recharts charting libraries, data tables using Ant Design components, rich content editing, and nested menu organization with automatic page title updates per route. The build tooling compiles Less stylesheets and configures Ant Design for optimized loading.
Features
- Admin Panel Frameworks - Provides a complete admin dashboard framework with navigation, theming, and responsive layout for backend management.
- Dynamic Menu Hierarchies - Fetches navigation menus from a server API to update sidebar structure without redeploying the application.
- OAuth Authentication - Integrates GitHub OAuth login alongside standard email-password authentication using a unified authentication flow.
- Role-Based Access Control - Restricts page access by user role with automatic redirects for unauthorized users on route transitions.
- Route-Level Access Guards - Checks user roles on each route transition and redirects unauthorized access to a 404 page using a higher-order component.
- Third-Party Authentication Providers - Signs in using a GitHub OAuth account alongside a standard email-and-password login page.
- React-Based Admin Interfaces - Builds a complete admin dashboard using React and Ant Design with menus, tables, charts, and authentication.
- API-Driven Menu Routing - Fetches menu structure from a server API and maps it to React Router routes for runtime menu updates.
- Server-Fetched Menu Structures - Fetches navigation menu configuration from a backend API to enable runtime menu updates without redeploying the application.
- Admin Layout Components - Builds a full-page admin layout with collapsible sidebar, top navigation, scrollable menus, and route-aware active states.
- GitHub OAuth Integrations - Integrates GitHub OAuth login alongside standard email-password authentication in a unified flow.
- Theme Configuration Overrides - Customizes Ant Design's default theme by overriding Less variables through a JSON configuration file and webpack loader.
- Nested Navigation Menus - Configures multi-level, tree-structured menu items to support deep navigation hierarchies in the sidebar.
- Theme Customization - Overrides Ant Design's default Less variables through a JSON file and webpack configuration to apply a custom color scheme.
- Ant Design Theme Overrides - Overrides Ant Design's Less variables to apply a custom color scheme and visual theme.
- On-Demand Component Loading - Loads only the Ant Design components used in the project through webpack plugin configuration to reduce bundle size.
- Responsive Layout Adaptation - Adjusts menu display type and grid layout based on browser width using CSS media queries and React state management.
- Admin Layout Responsive Adapters - Adapts sidebar, grid, and menu display to different screen widths for a consistent admin experience.
