A React 18 + TypeScript-based dashboard management system for enterprise-scale admin platforms. This project showcases full-stack frontend development skills through modular UI design, data visualization, map integration, and system role management.
This project primarily focuses on building a robust backend management system using React and TypeScript. It strengthened my expertise in:
- UI/UX design and performance optimization
- Role-based access control (RBAC)
- Component encapsulation and logic decomposition
- File management and data visualization
- Full-stack development with modern web technologies
Here’s a look at the dashboard homepage, showcasing chart visualizations, theme switching, and modular layout:
- 🔐 User Authentication – Secure login with access control
- 📊 Data Dashboard – ECharts-powered charts and data cards
- 🗂️ Dynamic Data CRUD – Orders, users, roles, drivers, and departments
- 🗺️ Map Integration – Baidu Maps with clustering support
- 📁 Excel File Management – Upload and download data in Excel format
- 🎨 Theme Switcher – Light and dark modes with Zustand
- 🌐 Multi-language Support – English and Mandarin with
react-i18next - 🧩 Modular System Management – Users, roles, departments, menus
| Layer | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite, Ant Design 5, Less, HTML5, CSS3 |
| State Mgmt | Zustand |
| Visualization | Apache ECharts, Baidu Map WebGL |
| i18n | i18next, react-i18next |
| API Layer | RESTful APIs (mocked or real) |
| Deployment | GitHub + Vercel CI/CD |
- Node.js 16+
- npm or yarn
# Clone the repository
git clone https://github.com/green760223/react-dashboard-manager.git
cd react-dashboard-manager
# Install dependencies
npm install
# Start the development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewThis project is not open source. All rights reserved by the author.
You are not permitted to use, modify, or distribute this project or any part of its code without explicit written permission from the author.
For collaboration or licensing inquiries, please contact: lawrencechuang.com