PuttaSathvik16/trybetter-merchant-intelligence-platform
GitHub: PuttaSathvik16/trybetter-merchant-intelligence-platform
Stars: 0 | Forks: 0
# TryBetter 商户智能平台
### 一个提议的功能构建 — 数据分析师与数据工程作品集项目
## 我发现的问题
TryBetter 的核心价值主张是 **零处理费**，通过双定价模型实现。他们服务 8,000+ 商户并处理数十亿美元的支付量。但当你查看现有情况时：
| TryBetter 拥有 | TryBetter 缺失 |
| --- | --- |
| POS 终端硬件 | 商户节省可视化 |
| 支付处理网关 | 交易异常检测 |
| 基础在线订购 | 交易数据 ETL 管道 |
| 基于二维码的支付 | 商户行为统计分析 |
| 手动入驻流程 | 商户流失风险评分 |
| 无商户门户分析 | 实时数据质量监控 |
一家处理 **50 亿美元以上** 支付的支付公司，拥有大量闲置数据。此项目将这些数据转化为可操作的智能。
## 我构建了什么
一个完整的 **基于 React 的商户智能仪表盘**，包含 7 个模块、一个 4 阶段数据管道模拟、统计分析引擎和异常检测系统 — 全部对齐 TryBetter 的品牌标识（紫色 `#7C3AED`、绿色 `#16A34A`）。
### 模块概览
| 模块 | 类型 | 业务价值 |
| --- | --- | --- |
| 主仪表盘 | 数据可视化 | 商户活动的 360° 视图 |
| 节省计算器 | 交互式工具 | 通过显示精确的费用节省转化潜在客户 |
| 分析页面 | 数据分析 | 交易模式的统计洞察 |
| 数据管道监控 | 数据工程 | ETL 状态、数据质量、管道健康度 |
| 交易记录表 | 数据管理 | 可筛选、可排序的交易历史 |
| 商户健康评分 | 预测分析 | 每个商户的流失风险与健康评分 |
| 报告 | 商业智能 | 汇总节省与性能报告 |
## 仪表盘截图
### 主仪表盘
主仪表盘
*实时概览：总交易量、活跃商户、对比 Stripe 的节省、拒付警报、交易记录表，以及按支付方式划分的 6 个月交易量趋势。*
### 分析 — 统计分析与异常检测
分析页面
*交易金额的描述性统计（均值、中位数、标准差、四分位）。按商户类别划分的交易量。异常检测结果表，标记高风险的大额异常值和离时段活动。*
### 节省计算器 — 可嵌入小部件
节省计算器
*Stripe、Square 与 TryBetter 的实时费率对比。业务类型预设（餐厅、零售、电商、医疗）自动填充真实的交易量与客单价默认值。动态显示每月和每年节省金额。*
### 数据管道监控 — ETL 仪表盘
数据管道
*模拟真实提取 → 转换 → 加载管道，包含记录数、通过/失败校验、数据质量逐字段拆解，以及带状态徽章的管道运行历史日志。*
### 商户健康评分 — 流失风险智能
商户健康
*为每个商户提供 0–100 的健康评分卡片，颜色编码风险等级（优秀 / 良好 / 高风险 / 危急），带流失风险徽章的可筛选视图。*
## 数据工程亮点
这一部分使该项目区别于标准的前端构建。数据管道层模拟了真实数据工程师在支付处理系统之上构建的内容。
### ETL 管道 — `src/data/pipeline/etlProcessor.js`
一个三阶段管道，用于处理原始交易记录：
```
EXTRACT → TRANSFORM → LOAD
```
**提取阶段** 验证每条传入记录：
- 检查必需字段：`id`、`date`、`amount`、`merchantName`、`category`、`status`
- 标记包含空值或无效金额的记录
- 在任何转换运行前将记录分为 `passed` 与 `failed`
**转换阶段** 为每条有效记录添加派生字段：
```
// Fields added during transformation:
date_iso // Normalized ISO 8601 timestamp
category_normalized // "restaurant" → "QSR/Dining"
fee_saved // What merchant would have paid at Stripe: vol*0.029 + 0.30
day_of_week // "Mon", "Tue" ... derived from date
hour_of_day // Integer 0-23
is_weekend // Boolean
transformed_at // Pipeline run timestamp
```
**加载阶段** 输出一个 `pipeline_summary` 对象以及清洗后的数据：
```
{
total_records: 50,
records_passed: 48,
records_failed: 2,
transformation_time_ms: 24,
run_timestamp: "2024-04-20T10:42:17.000Z",
status: "SUCCESS"
}
```
### 异常检测 — `src/data/pipeline/anomalyDetector.js`
三种检测算法在交易数据上运行：
**1. 高价值异常检测**
使用标准差标记高于均值 2σ 的交易。任何 `amount > mean + (2 * stdDev)` 的交易都会被标记并赋予风险评分。
**2. 离时段活动检测**
标记发生在晚上 11 点至早上 5 点之间的交易。支付行业认为营业时间外的支付活动是已知的拒付风险信号。
**3. 速度激增检测**
按商户和日期对交易分组。任何单日交易量超过平均日交易量 3 倍的商户会被标记 — 这是经典的欺诈速度模式。
每个被标记的记录返回：
```
{
transactionId: "TXN-0042",
merchantName: "Metro Electronics",
amount: 489.00,
anomalyType: "High Value Outlier",
riskScore: 87,
reason: "Amount $489 is 3.8 std devs above mean ($147)"
}
```
### 统计分析引擎 — `src/data/pipeline/statsEngine.js`
数据分析师用于支付报告的函数：
```
calculateDescriptiveStats(values)
// Returns: mean, median, std_dev, min, max, q25, q75, count
buildTimeSeriesData(transactions, months)
// Returns: [{month, volume, count, fees_saved}] for last N months
calculateGrowthRate(current, previous)
// Returns: percentage change between periods
calculateCorrelation(xArray, yArray)
// Returns: Pearson correlation coefficient (-1 to 1)
```
### 数据聚合 — `src/data/pipeline/aggregator.js`
为图表层提供清洗后的聚合函数：
```
aggregateByCategory(transactions)
// Groups by category → { count, total_volume, avg_ticket, fees_saved }
aggregateByDayOfWeek(transactions)
// Returns volume heatmap indexed Monday–Sunday
aggregateByHour(transactions)
// Returns volume distribution by hour 0-23 (feeds heatmap chart)
calculateMerchantKPIs(merchants)
// Per merchant: revenue_per_day, projected_annual_savings, health_trend
```
## 费用计算逻辑 — `src/utils/feeCalculator.js`
节省计算器的核心。计算每个处理器的精确月度费用：
```
// Stripe: 2.9% of volume + $0.30 per transaction
stripe_fee = (volume * 0.029) + (transactions * 0.30)
// Square: 2.6% of volume + $0.10 per transaction
square_fee = (volume * 0.026) + (transactions * 0.10)
// PayPal: 3.49% of volume + $0.49 per transaction
paypal_fee = (volume * 0.0349) + (transactions * 0.49)
// TryBetter: $0
trybetter_fee = 0
// Savings = max competitor fee
savings = Math.max(stripe_fee, square_fee, paypal_fee)
```
## 技术栈
| 层级 | 技术 | 用途 |
| --- | --- | --- |
| 前端框架 | React 18 | 组件化 UI |
| 构建工具 | Vite | 快速开发服务器与打包器 |
| 样式 | Tailwind CSS | 匹配 TryBetter 品牌的实用优先 CSS |
| 图表 | Recharts | 折线图、柱状图、饼图 |
| 路由 | React Router v6 | 多页面导航 |
| 图标 | Lucide React | 一致的图标体系 |
| 数据管道 | Vanilla JS 模块 | ETL 模拟、统计引擎、异常检测 |
| 字体 | Plus Jakarta Sans + Inter | 匹配 TryBetter 的品牌排版 |
**无需后端。** 所有数据管道逻辑在浏览器中通过纯 JavaScript 模块运行 — 证明逻辑是可靠且可移植的，未来可对接 Python/Node/SQL 并连接真实数据。
## 项目结构
```
trybetter-merchant-dashboard/
│
├── screenshots/ # Dashboard preview images for README
│ ├── dashboard.jpg
│ ├── analytics.jpg
│ ├── calculator.jpg
│ ├── pipeline.jpg
│ └── merchant_health.jpg
│
├── src/
│ ├── data/
│ │ ├── pipeline/ # DATA ENGINEERING LAYER
│ │ │ ├── etlProcessor.js # Extract → Transform → Load pipeline
│ │ │ ├── aggregator.js # Group-by, rollup, KPI calculations
│ │ │ ├── anomalyDetector.js # Outlier, velocity, off-hours detection
│ │ │ └── statsEngine.js # Descriptive stats, time series, correlation
│ │ ├── mockTransactions.js # 50 realistic transaction records
│ │ ├── mockMerchants.js # 12 merchant profiles with health data
│ │ └── processorRates.js # Fee structures: Stripe, Square, PayPal, TryBetter
│ │
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Sidebar.jsx # Navigation with TryBetter branding
│ │ │ ├── TopBar.jsx # Page header with date selector
│ │ │ └── Layout.jsx # Wrapper with Outlet for routing
│ │ ├── ui/
│ │ │ ├── StatCard.jsx # Metric cards with change indicators
│ │ │ ├── Badge.jsx # Status badges (success/warning/danger)
│ │ │ ├── Button.jsx # Styled action buttons
│ │ │ └── Tooltip.jsx # Hover tooltips
│ │ ├── charts/
│ │ │ ├── RevenueLineChart.jsx # 6-month volume trend (purple gradient)
│ │ │ ├── SavingsBarChart.jsx # Processor fee comparison bars
│ │ │ ├── TransactionHeatmap.jsx # Hour × Day volume heatmap
│ │ │ └── ProcessorPieChart.jsx # Payment method distribution
│ │ └── widgets/
│ │ ├── SavingsCalculator.jsx # Interactive fee comparison tool
│ │ ├── MerchantHealthScore.jsx # SVG arc score card per merchant
│ │ ├── ChargebackAlert.jsx # Risk flagged transaction list
│ │ └── RecentTransactions.jsx # Latest 8 transactions table
│ │
│ ├── pages/
│ │ ├── Dashboard.jsx # Main overview page
│ │ ├── Analytics.jsx # Stats + anomaly detection page
│ │ ├── DataPipeline.jsx # ETL monitor page
│ │ ├── SavingsCalculator.jsx # Full calculator page
│ │ ├── Transactions.jsx # Filterable transactions table
│ │ ├── MerchantHealth.jsx # Health score grid page
│ │ └── Reports.jsx # Aggregated BI reports
│ │
│ ├── utils/
│ │ ├── feeCalculator.js # Core fee math for all processors
│ │ ├── healthScorer.js # Merchant risk scoring logic
│ │ └── formatters.js # Currency, date, percent formatters
│ │
│ ├── App.jsx # Router configuration
│ ├── main.jsx # React entry point
│ └── index.css # Global styles + Tailwind base
│
├── public/
│ └── index.html
├── tailwind.config.js # Brand colors + font config
├── vite.config.js
├── package.json
└── README.md
```
## 我是如何一步步构建这个项目的 — 逐步说明
本项目使用 Visual Studio 构建，采用结构化提示驱动的开发流程。每个组件、工具与页面都经过精心设计。
### 阶段 1 — 项目初始化
```
# 使用 Vite + React 模板搭建项目
npm create vite@latest trybetter-merchant-dashboard -- --template react
cd trybetter-merchant-dashboard
# 安装所有依赖项
npm install react-router-dom recharts lucide-react clsx
npm install -D tailwindcss postcss autoprefixer gh-pages
# 初始化 Tailwind CSS
npx tailwindcss init -p
```
### 阶段 2 — 数据层与模拟数据
在编写任何 UI 组件之前，创建了三个模拟数据文件和处理器费率配置。**数据优先，UI 其次** — 这是数据分析师的心态。
**创建的文件：**
- `src/data/processorRates.js` — Stripe、Square、PayPal、TryBetter 的费率结构
- `src/data/mockTransactions.js` — 10 家商户的 50 笔真实交易
- `src/data/mockMerchants.js` — 12 家商户档案，包含健康评分与流失风险
### 阶段 3 — 数据工程管道
这是核心数据工程工作。构建了四个 JavaScript 模块以模拟生产 ETL 管道。
### 阶段 4 — 工具函数
```
// src/utils/feeCalculator.js
// Core fee math — used by both the Calculator widget and Reports page
calculateFees(volume, avgTicket, processorKey)
calculateSavings(volume, avgTicket) // Returns all processor fees + maxSavings
// src/utils/formatters.js
formatCurrency(n) // $1,234
formatCurrencyFull(n) // $1,234.56
formatVolume(n) // $50K, $1.2M
formatDate(s) // Apr 20, 2024
formatPercent(n) // +12.4%
```
### 阶段 5 — 布局与 UI 组件
在构建页面内容之前，先完成应用程序外壳。
### 阶段 6 — 图表组件
所有图表均使用 **Recharts**，并一致应用 TryBetter 品牌颜色。
### 阶段 7 — 页面
每个页面遵循相同模式：导入数据 → 运行管道/聚合函数 → 将结果传递给图表与小部件组件。
### 阶段 8 — 部署到 GitHub Pages
```
# 将 gh-pages 添加到 package.json scripts
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
# 在 vite.config.js 中添加基础路径
base: '/trybetter-merchant-dashboard/'
# 初始化 git 并推送
git init
git add .
git commit -m "feat: initial TryBetter merchant intelligence dashboard"
git remote add origin https://github.com/YOURUSERNAME/trybetter-merchant-dashboard.git
git push -u origin main
# 部署到 GitHub Pages
npm run deploy
```
## 本地启动指南
```
# 1. 克隆仓库
git clone https://github.com/YOURUSERNAME/trybetter-merchant-dashboard.git
cd trybetter-merchant-dashboard
# 2. 安装依赖项
npm install
# 3. 启动开发服务器
npm run dev
# 4. 在浏览器中打开
# http://localhost:5173
```
**要求：** Node.js 18+ 与 npm 9+
## 品牌对齐
每个设计决策都直接映射到 TryBetter 的现有品牌：
| 元素 | TryBetter 品牌 | 本项目 |
| --- | --- | --- |
| 主色 | 紫色（网站 CTA、标题） | 全局使用 `#7C3AED` |
| 强调色 | 绿色（Logo、高亮） | 用于节省/成功场景的 `#16A34A` |
| 字体 | 粗体标题 | Plus Jakarta Sans 800 权重 |
| 语气 | “无隐藏费用”，直接 | 清晰的数据标签，无行话 |
| 真实商户 | Apna Bazar、A2B 餐厅 | 用作模拟数据中的商户名称 |
## 此项目对 TryBetter 的意义
TryBetter 目前**没有对商户或内部团队可见的数据层**。他们在网站上声称：*“尖端仪表盘 — 通过智能分析、实时报告和直观图表获得 360° 业务视图。”* 但目前市场上并不存在商户可以交互的此类仪表盘。
本项目正是交付了这一点 — 采用其品牌、使用其真实商户名称，并与其实际业务模型对齐。可以通过以下方式集成到其现有商户门户中：
1. 用真实的 Clover/POS API 数据替换模拟数据源
2. 将管道函数迁移到 Python 或 Node 后端
3. 将节省计算器作为 iframe 嵌入其营销网站
4. 将异常检测连接到其实时交易流
## 关于本项目
由 **Sathvik Putta** 构建，作为面向 TryBetter（Better Payments）数据分析师/数据工程岗位的作品集项目。本项目展示了：
- 端到端数据管道设计（提取、转换、加载）
- 金融数据上的统计分析与异常检测
- 带业务上下文的数据可视化
- 数据工程概念的前端实现
- 对 TryBetter 实际产品差距与商业模式的深入研究
**使用工具：** Visual Studio、（IDE）、React、Vite、Tailwind CSS、Recharts、Lucide React、GitHub Pages
*这是一个独立的作品集项目，与 TryBetter / Better Payments 无关或未经其背书。所有商户数据均为虚构，仅用于演示目的。*
分析页面
*交易金额的描述性统计（均值、中位数、标准差、四分位）。按商户类别划分的交易量。异常检测结果表，标记高风险的大额异常值和离时段活动。*
### 节省计算器 — 可嵌入小部件
节省计算器
*Stripe、Square 与 TryBetter 的实时费率对比。业务类型预设（餐厅、零售、电商、医疗）自动填充真实的交易量与客单价默认值。动态显示每月和每年节省金额。*
### 数据管道监控 — ETL 仪表盘
数据管道
*模拟真实提取 → 转换 → 加载管道，包含记录数、通过/失败校验、数据质量逐字段拆解，以及带状态徽章的管道运行历史日志。*
### 商户健康评分 — 流失风险智能
商户健康
*为每个商户提供 0–100 的健康评分卡片，颜色编码风险等级（优秀 / 良好 / 高风险 / 危急），带流失风险徽章的可筛选视图。*
## 数据工程亮点
这一部分使该项目区别于标准的前端构建。数据管道层模拟了真实数据工程师在支付处理系统之上构建的内容。
### ETL 管道 — `src/data/pipeline/etlProcessor.js`
一个三阶段管道，用于处理原始交易记录：
```
EXTRACT → TRANSFORM → LOAD
```
**提取阶段** 验证每条传入记录：
- 检查必需字段：`id`、`date`、`amount`、`merchantName`、`category`、`status`
- 标记包含空值或无效金额的记录
- 在任何转换运行前将记录分为 `passed` 与 `failed`
**转换阶段** 为每条有效记录添加派生字段：
```
// Fields added during transformation:
date_iso // Normalized ISO 8601 timestamp
category_normalized // "restaurant" → "QSR/Dining"
fee_saved // What merchant would have paid at Stripe: vol*0.029 + 0.30
day_of_week // "Mon", "Tue" ... derived from date
hour_of_day // Integer 0-23
is_weekend // Boolean
transformed_at // Pipeline run timestamp
```
**加载阶段** 输出一个 `pipeline_summary` 对象以及清洗后的数据：
```
{
total_records: 50,
records_passed: 48,
records_failed: 2,
transformation_time_ms: 24,
run_timestamp: "2024-04-20T10:42:17.000Z",
status: "SUCCESS"
}
```
### 异常检测 — `src/data/pipeline/anomalyDetector.js`
三种检测算法在交易数据上运行：
**1. 高价值异常检测**
使用标准差标记高于均值 2σ 的交易。任何 `amount > mean + (2 * stdDev)` 的交易都会被标记并赋予风险评分。
**2. 离时段活动检测**
标记发生在晚上 11 点至早上 5 点之间的交易。支付行业认为营业时间外的支付活动是已知的拒付风险信号。
**3. 速度激增检测**
按商户和日期对交易分组。任何单日交易量超过平均日交易量 3 倍的商户会被标记 — 这是经典的欺诈速度模式。
每个被标记的记录返回：
```
{
transactionId: "TXN-0042",
merchantName: "Metro Electronics",
amount: 489.00,
anomalyType: "High Value Outlier",
riskScore: 87,
reason: "Amount $489 is 3.8 std devs above mean ($147)"
}
```
### 统计分析引擎 — `src/data/pipeline/statsEngine.js`
数据分析师用于支付报告的函数：
```
calculateDescriptiveStats(values)
// Returns: mean, median, std_dev, min, max, q25, q75, count
buildTimeSeriesData(transactions, months)
// Returns: [{month, volume, count, fees_saved}] for last N months
calculateGrowthRate(current, previous)
// Returns: percentage change between periods
calculateCorrelation(xArray, yArray)
// Returns: Pearson correlation coefficient (-1 to 1)
```
### 数据聚合 — `src/data/pipeline/aggregator.js`
为图表层提供清洗后的聚合函数：
```
aggregateByCategory(transactions)
// Groups by category → { count, total_volume, avg_ticket, fees_saved }
aggregateByDayOfWeek(transactions)
// Returns volume heatmap indexed Monday–Sunday
aggregateByHour(transactions)
// Returns volume distribution by hour 0-23 (feeds heatmap chart)
calculateMerchantKPIs(merchants)
// Per merchant: revenue_per_day, projected_annual_savings, health_trend
```
## 费用计算逻辑 — `src/utils/feeCalculator.js`
节省计算器的核心。计算每个处理器的精确月度费用：
```
// Stripe: 2.9% of volume + $0.30 per transaction
stripe_fee = (volume * 0.029) + (transactions * 0.30)
// Square: 2.6% of volume + $0.10 per transaction
square_fee = (volume * 0.026) + (transactions * 0.10)
// PayPal: 3.49% of volume + $0.49 per transaction
paypal_fee = (volume * 0.0349) + (transactions * 0.49)
// TryBetter: $0
trybetter_fee = 0
// Savings = max competitor fee
savings = Math.max(stripe_fee, square_fee, paypal_fee)
```
## 技术栈
| 层级 | 技术 | 用途 |
| --- | --- | --- |
| 前端框架 | React 18 | 组件化 UI |
| 构建工具 | Vite | 快速开发服务器与打包器 |
| 样式 | Tailwind CSS | 匹配 TryBetter 品牌的实用优先 CSS |
| 图表 | Recharts | 折线图、柱状图、饼图 |
| 路由 | React Router v6 | 多页面导航 |
| 图标 | Lucide React | 一致的图标体系 |
| 数据管道 | Vanilla JS 模块 | ETL 模拟、统计引擎、异常检测 |
| 字体 | Plus Jakarta Sans + Inter | 匹配 TryBetter 的品牌排版 |
**无需后端。** 所有数据管道逻辑在浏览器中通过纯 JavaScript 模块运行 — 证明逻辑是可靠且可移植的，未来可对接 Python/Node/SQL 并连接真实数据。
## 项目结构
```
trybetter-merchant-dashboard/
│
├── screenshots/ # Dashboard preview images for README
│ ├── dashboard.jpg
│ ├── analytics.jpg
│ ├── calculator.jpg
│ ├── pipeline.jpg
│ └── merchant_health.jpg
│
├── src/
│ ├── data/
│ │ ├── pipeline/ # DATA ENGINEERING LAYER
│ │ │ ├── etlProcessor.js # Extract → Transform → Load pipeline
│ │ │ ├── aggregator.js # Group-by, rollup, KPI calculations
│ │ │ ├── anomalyDetector.js # Outlier, velocity, off-hours detection
│ │ │ └── statsEngine.js # Descriptive stats, time series, correlation
│ │ ├── mockTransactions.js # 50 realistic transaction records
│ │ ├── mockMerchants.js # 12 merchant profiles with health data
│ │ └── processorRates.js # Fee structures: Stripe, Square, PayPal, TryBetter
│ │
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Sidebar.jsx # Navigation with TryBetter branding
│ │ │ ├── TopBar.jsx # Page header with date selector
│ │ │ └── Layout.jsx # Wrapper with Outlet for routing
│ │ ├── ui/
│ │ │ ├── StatCard.jsx # Metric cards with change indicators
│ │ │ ├── Badge.jsx # Status badges (success/warning/danger)
│ │ │ ├── Button.jsx # Styled action buttons
│ │ │ └── Tooltip.jsx # Hover tooltips
│ │ ├── charts/
│ │ │ ├── RevenueLineChart.jsx # 6-month volume trend (purple gradient)
│ │ │ ├── SavingsBarChart.jsx # Processor fee comparison bars
│ │ │ ├── TransactionHeatmap.jsx # Hour × Day volume heatmap
│ │ │ └── ProcessorPieChart.jsx # Payment method distribution
│ │ └── widgets/
│ │ ├── SavingsCalculator.jsx # Interactive fee comparison tool
│ │ ├── MerchantHealthScore.jsx # SVG arc score card per merchant
│ │ ├── ChargebackAlert.jsx # Risk flagged transaction list
│ │ └── RecentTransactions.jsx # Latest 8 transactions table
│ │
│ ├── pages/
│ │ ├── Dashboard.jsx # Main overview page
│ │ ├── Analytics.jsx # Stats + anomaly detection page
│ │ ├── DataPipeline.jsx # ETL monitor page
│ │ ├── SavingsCalculator.jsx # Full calculator page
│ │ ├── Transactions.jsx # Filterable transactions table
│ │ ├── MerchantHealth.jsx # Health score grid page
│ │ └── Reports.jsx # Aggregated BI reports
│ │
│ ├── utils/
│ │ ├── feeCalculator.js # Core fee math for all processors
│ │ ├── healthScorer.js # Merchant risk scoring logic
│ │ └── formatters.js # Currency, date, percent formatters
│ │
│ ├── App.jsx # Router configuration
│ ├── main.jsx # React entry point
│ └── index.css # Global styles + Tailwind base
│
├── public/
│ └── index.html
├── tailwind.config.js # Brand colors + font config
├── vite.config.js
├── package.json
└── README.md
```
## 我是如何一步步构建这个项目的 — 逐步说明
本项目使用 Visual Studio 构建，采用结构化提示驱动的开发流程。每个组件、工具与页面都经过精心设计。
### 阶段 1 — 项目初始化
```
# 使用 Vite + React 模板搭建项目
npm create vite@latest trybetter-merchant-dashboard -- --template react
cd trybetter-merchant-dashboard
# 安装所有依赖项
npm install react-router-dom recharts lucide-react clsx
npm install -D tailwindcss postcss autoprefixer gh-pages
# 初始化 Tailwind CSS
npx tailwindcss init -p
```
### 阶段 2 — 数据层与模拟数据
在编写任何 UI 组件之前，创建了三个模拟数据文件和处理器费率配置。**数据优先，UI 其次** — 这是数据分析师的心态。
**创建的文件：**
- `src/data/processorRates.js` — Stripe、Square、PayPal、TryBetter 的费率结构
- `src/data/mockTransactions.js` — 10 家商户的 50 笔真实交易
- `src/data/mockMerchants.js` — 12 家商户档案，包含健康评分与流失风险
### 阶段 3 — 数据工程管道
这是核心数据工程工作。构建了四个 JavaScript 模块以模拟生产 ETL 管道。
### 阶段 4 — 工具函数
```
// src/utils/feeCalculator.js
// Core fee math — used by both the Calculator widget and Reports page
calculateFees(volume, avgTicket, processorKey)
calculateSavings(volume, avgTicket) // Returns all processor fees + maxSavings
// src/utils/formatters.js
formatCurrency(n) // $1,234
formatCurrencyFull(n) // $1,234.56
formatVolume(n) // $50K, $1.2M
formatDate(s) // Apr 20, 2024
formatPercent(n) // +12.4%
```
### 阶段 5 — 布局与 UI 组件
在构建页面内容之前，先完成应用程序外壳。
### 阶段 6 — 图表组件
所有图表均使用 **Recharts**，并一致应用 TryBetter 品牌颜色。
### 阶段 7 — 页面
每个页面遵循相同模式：导入数据 → 运行管道/聚合函数 → 将结果传递给图表与小部件组件。
### 阶段 8 — 部署到 GitHub Pages
```
# 将 gh-pages 添加到 package.json scripts
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
# 在 vite.config.js 中添加基础路径
base: '/trybetter-merchant-dashboard/'
# 初始化 git 并推送
git init
git add .
git commit -m "feat: initial TryBetter merchant intelligence dashboard"
git remote add origin https://github.com/YOURUSERNAME/trybetter-merchant-dashboard.git
git push -u origin main
# 部署到 GitHub Pages
npm run deploy
```
## 本地启动指南
```
# 1. 克隆仓库
git clone https://github.com/YOURUSERNAME/trybetter-merchant-dashboard.git
cd trybetter-merchant-dashboard
# 2. 安装依赖项
npm install
# 3. 启动开发服务器
npm run dev
# 4. 在浏览器中打开
# http://localhost:5173
```
**要求：** Node.js 18+ 与 npm 9+
## 品牌对齐
每个设计决策都直接映射到 TryBetter 的现有品牌：
| 元素 | TryBetter 品牌 | 本项目 |
| --- | --- | --- |
| 主色 | 紫色（网站 CTA、标题） | 全局使用 `#7C3AED` |
| 强调色 | 绿色（Logo、高亮） | 用于节省/成功场景的 `#16A34A` |
| 字体 | 粗体标题 | Plus Jakarta Sans 800 权重 |
| 语气 | “无隐藏费用”，直接 | 清晰的数据标签，无行话 |
| 真实商户 | Apna Bazar、A2B 餐厅 | 用作模拟数据中的商户名称 |
## 此项目对 TryBetter 的意义
TryBetter 目前**没有对商户或内部团队可见的数据层**。他们在网站上声称：*“尖端仪表盘 — 通过智能分析、实时报告和直观图表获得 360° 业务视图。”* 但目前市场上并不存在商户可以交互的此类仪表盘。
本项目正是交付了这一点 — 采用其品牌、使用其真实商户名称，并与其实际业务模型对齐。可以通过以下方式集成到其现有商户门户中：
1. 用真实的 Clover/POS API 数据替换模拟数据源
2. 将管道函数迁移到 Python 或 Node 后端
3. 将节省计算器作为 iframe 嵌入其营销网站
4. 将异常检测连接到其实时交易流
## 关于本项目
由 **Sathvik Putta** 构建，作为面向 TryBetter（Better Payments）数据分析师/数据工程岗位的作品集项目。本项目展示了：
- 端到端数据管道设计（提取、转换、加载）
- 金融数据上的统计分析与异常检测
- 带业务上下文的数据可视化
- 数据工程概念的前端实现
- 对 TryBetter 实际产品差距与商业模式的深入研究
**使用工具：** Visual Studio、（IDE）、React、Vite、Tailwind CSS、Recharts、Lucide React、GitHub Pages
*这是一个独立的作品集项目，与 TryBetter / Better Payments 无关或未经其背书。所有商户数据均为虚构，仅用于演示目的。*标签：ETL, JavaCC, React, Recharts, Syscalls, Tailwind, 交互式分析, 交易异常, 代码示例, 仪表盘, 储蓄计算器, 商业智能平台, 商户健康评分, 商户智能, 异常检测, 投资组合项目, 描述性统计, 支付处理, 数据分析, 数据分析师, 数据工程, 数据工程师, 数据管道模拟, 数据质量监控, 流失风险评分, 端口硬件, 紫色主题, 统计分析引擎, 绿色主题, 自定义脚本, 行为统计, 零处理费