https://github.com/green760223/react-dashboard-manager
A React 18 and TypeScript-Based Dashboard Management System
https://github.com/green760223/react-dashboard-manager
antd-design css3 fullstack-development html5 less react react-router reatctjs restful-api typescript vite
Last synced: 3 months ago
JSON representation
A React 18 and TypeScript-Based Dashboard Management System
- Host: GitHub
- URL: https://github.com/green760223/react-dashboard-manager
- Owner: green760223
- Created: 2023-11-11T11:04:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-05T11:28:48.000Z (about 2 years ago)
- Last Synced: 2024-05-05T12:28:27.406Z (about 2 years ago)
- Topics: antd-design, css3, fullstack-development, html5, less, react, react-router, reatctjs, restful-api, typescript, vite
- Language: TypeScript
- Homepage: https://react-dashboard-manager.vercel.app/
- Size: 7.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Dashboard Manager
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.
🌐 [Live Demo](https://react-dashboard-manager.vercel.app/)
---
## 📌 Overview
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
---
## 🖼 Preview
Here’s a look at the dashboard homepage, showcasing chart visualizations, theme switching, and modular layout:
## ✨ Key Features
- 🔐 **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
---
## 🛠 Tech Stack
| 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 |
---
## ⚙️ Getting Started
### Prerequisites
- Node.js 16+
- npm or yarn
### Installation
```bash
# 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 preview
```
---
## 📄 License
This 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](https://lawrencechuang.com)