BafanaCode/Emergency-Management-And-Response-System
GitHub: BafanaCode/Emergency-Management-And-Response-System
基于 React 和 Firebase 构建的实时应急事件管理与响应 Web 应用，支持事件记录、跟踪、可视化仪表板和 PDF 报告生成。
Stars: 0 | Forks: 0
# 🚨 Alert24 — 应急管理与响应系统
一个基于 React 和 Firebase 构建的 Web 应急管理与响应平台。Alert24 允许用户实时记录、跟踪和管理紧急事件，并通过 Recharts 进行实时数据可视化，以及自动生成 PDF 报告。
## 📋 目录
- [关于项目](#about-the-project)
- [功能](#features)
- [技术栈](#tech-stack)
- [项目结构](#project-structure)
- [快速开始](#getting-started)
- [经验总结](#what-i-learned)
- [未来改进](#future-improvements)
## 关于项目
Alert24 是一个应急管理中心，旨在简化事件的报告、监控和解决流程。该系统建立在 Firebase Firestore 之上，并配备了自定义安全规则，可实时存储事件数据，并通过交互式仪表板进行展示。Recharts 为数据可视化层提供了支持，使响应人员能够实时查看事件趋势，而 jsPDF 和 jspdf-autotable 则可用于生成结构化且可下载的事件报告。
## ✨ 功能
- 🚨 事件记录 — 报告并跟踪紧急事件及其相关详情
- 🔥 实时更新 — Firebase Firestore 在整个应用中实时同步数据
- 🔐 身份验证 — 通过 Firebase Auth 进行安全的用户登录和注册
- 🛡️ Firestore 安全规则 — 根据用户角色控制读/写权限的自定义规则
- 📊 实时仪表板 — 由 Recharts 驱动的图表，展示事件趋势和统计数据
- 📄 PDF 报告生成 — 使用 jsPDF 和 jspdf-autotable 导出事件报告
- 📱 响应式设计 — 使用 CSS 构建的移动端友好布局
## 🛠️ 技术栈
| 类别 | 技术 |
|-----------------|------------------------------------|
| Frontend | React 19, JavaScript (ES6+), CSS3 |
| Backend/DB | Firebase (Firestore, Auth) |
| Security | Firestore Security Rules |
| Data Viz | Recharts 3 |
| PDF Generation | jsPDF 4, jspdf-autotable |
| Testing | React Testing Library, Jest |
| Tooling | Create React App, npm |
## 📁 项目结构
```
Emergency-Management-And-Response-System/
├── public/
│ └── index.html
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Route-level page components
│ ├── firebase/ # Firebase config and initialisation
│ ├── App.js # Root component
│ └── index.js # App entry point
├── firestore.rules # Firestore database security rules
├── .gitignore
├── package.json
└── README.md
```
## 🚀 快速开始
### 前置条件
- [Node.js](https://nodejs.org/)（v16 或更高版本）
- npm
### 安装说明
1. **克隆仓库**
git clone https://github.com/BafanaCode/Emergency-Management-And-Response-System.git
cd Emergency-Management-And-Response-System
2. **安装依赖**
npm install
3. **添加 Firebase 凭据**
在项目根目录下创建一个 `.env` 文件：
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
4. **启动开发服务器**
npm start
在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
## 📚 经验总结
- 围绕实时数据源（Firebase Firestore）构建 React 应用结构
- 编写 Firestore 安全规则，以根据用户角色控制数据访问
- 使用 Recharts 构建实时仪表板 — 将图表组件连接到实时 Firestore 数据
- 使用 jsPDF 和 jspdf-autotable 生成结构化的、基于表格的 PDF 文档
- 使用 Firebase Auth 在多页 React 应用中管理身份验证状态
- 思考事件跟踪系统的数据建模
## 🔮 未来改进
- [ ] 添加基于角色的访问权限 — 为事件报告者和响应者提供独立的视图
- [ ] 实现在记录新事件时的实时通知
- [ ] 添加地图集成，以在地理上可视化事件位置
- [ ] 构建事件状态工作流（待处理 → 处理中 → 已解决）
- [ ] 部署到 Firebase Hosting
## 👨💻 作者
**Luyanda Nhlapho**
📍 金伯利，南非
🎓 ICT 高级文凭 – 索尔·普拉特杰大学
[](https://github.com/BafanaCode)
标签：Firebase, React, Syscalls, 应急响应系统, 数据可视化, 自定义脚本