README_ch.md

MeasureApp 前端

🌐 可用语言

🤖 Node 后端仓库

简介

MeasureApp 前端 是一个网络应用程序，提供一个便捷的界面来管理水和气的消费读数。它利用人工智能，允许用户记录读数、跟踪消费并保持详细的费用记录。该应用程序是一个综合系统的一部分，旨在优化水和气的资源管理。

功能

• 用户注册：轻松注册新用户。
• 消费读数：允许通过界面直接输入水和气的读数。
• 消费历史：显示每月消费历史，并提供详细图表。

使用的技术

• React：用于构建用户界面的 JavaScript 库。
• Vite：快速有效的网页开发工具。
• React Router：用于页面之间的导航路由管理。
• SweetAlert2：用于显示互动和可定制的警告的库。

依赖

"dependencies": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.26.1",
  "sweetalert2": "^11.12.4"
},
"devDependencies": {
  "@eslint/js": "^9.9.0",
  "@types/react": "^18.3.3",
  "@types/react-dom": "^18.3.0",
  "@vitejs/plugin-react-swc": "^3.5.0",
  "eslint": "^9.9.0",
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
  "eslint-plugin-react-refresh": "^0.4.9",
  "globals": "^15.9.0",
  "typescript": "^5.5.3",
  "typescript-eslint": "^8.0.1",
  "vite": "^5.4.1"
}

如何在本地运行项目

🚀 使用 Docker

1. 克隆仓库：

   git clone git@github.com:SamuelRocha91/precisionReactApplication.git
   git clone git@github.com:SamuelRocha91/apiMeasureWaterAndGas.git

2. 下载 docker-compose.yml 文件。 从 Google Drive 下载

3. 将 docker-compose.yml 文件放置在以下文件夹结构中：

   

4. 构建镜像并启动容器：

   docker-compose up --build

🚀 不使用 Docker

1. 克隆仓库：

   git clone git@github.com:SamuelRocha91/precisionReactApplication.git

2. 进入项目目录：

   cd precisionReactApplication

3. 安装依赖：

   npm install

4. 启动开发服务器：

   npm run dev

5. 在浏览器中访问应用程序，地址为 http://localhost:5173。

文件夹结构

precisionReactApplication/
├── assets/          # 图片和视觉资源
├── components/      # 可重用的 React 组件
├── styles/          # CSS 样式
├── public/          # 公共静态文件
├── src/             # 应用程序源代码
└── README.md        # 项目文档

其他项目

🔗 相关仓库

• 💎 Delivery BackEnd - Ruby On Rails 后端
• 🛒 Consumy 应用程序 - 消费者应用程序
• 👨‍💼 Seller 应用程序 - 卖家应用程序
• 💲 Paymenty API - 支付 API