数据资产交易平台

一个基于React + TypeScript + Vite + Supabase的现代化数据资产交易平台。

功能特性

• 🚀 现代化的前端技术栈
• 🔐 基于Supabase的用户认证系统
• 💳 集成Stripe支付系统
• 📱 响应式设计，支持移动端
• 🧪 完整的测试覆盖
• 📊 性能优化和代码分割

技术栈

• 前端: React 18 + TypeScript + Vite
• UI组件: Material-UI (MUI)
• 状态管理: Redux + Redux Thunk
• 路由: React Router v6
• 后端: Supabase (PostgreSQL + Auth + Storage)
• 支付: Stripe
• 测试: Jest + Cypress
• 构建工具: Vite
• 部署: Vercel

快速开始

环境要求

• Node.js 18+
• npm 或 yarn
• Git

本地开发

1. 克隆项目

git clone <repository-url>
cd testcb

2. 安装依赖

cd frontend
npm install

3. 配置环境变量

# 复制环境变量模板
cp .env.example .env.local

# 编辑 .env.local 文件，填入实际的配置值

4. 启动开发服务器

npm run dev

5. 打开浏览器访问 http://localhost:3000

测试

# 运行单元测试
npm run test:unit

# 运行集成测试
npm run test:integration

# 运行端到端测试
npm run test:e2e

# 运行所有测试
npm test

部署到Vercel

准备工作

1. 确保项目已经推送到GitHub仓库
2. 在Vercel官网注册账号并连接GitHub
3. 准备好Supabase和Stripe的配置信息

部署步骤

方法一：通过Vercel Dashboard

1. 访问 Vercel官网
2. 点击"New Project"
3. 导入你的GitHub仓库
4. 配置项目设置：
   • Framework Preset: Vite
   • Root Directory: frontend
   • Build Command: npm run build
   • Output Directory: dist
5. 添加环境变量：
   • VITE_SUPABASE_URL: 你的Supabase项目URL
   • VITE_SUPABASE_ANON_KEY: 你的Supabase匿名密钥
   • VITE_STRIPE_PUBLISHABLE_KEY: 你的Stripe发布密钥（可选）
6. 点击"Deploy"

方法二：通过Vercel CLI

1. 安装Vercel CLI

npm i -g vercel

2. 登录Vercel

vercel login

3. 部署项目

cd frontend
vercel

4. 按照提示配置项目

环境变量配置

在Vercel中需要配置以下环境变量：

变量名	描述	必需
VITE_SUPABASE_URL	Supabase项目URL	✅
VITE_SUPABASE_ANON_KEY	Supabase匿名密钥	✅
VITE_STRIPE_PUBLISHABLE_KEY	Stripe发布密钥	❌
VITE_APP_NAME	应用名称	❌

自定义域名（可选）

1. 在Vercel项目设置中点击"Domains"
2. 添加你的自定义域名
3. 按照提示配置DNS记录

项目结构

testcb/
├── frontend/                 # 前端项目
│   ├── src/
│   │   ├── components/      # React组件
│   │   ├── pages/           # 页面组件
│   │   ├── services/        # API服务
│   │   ├── utils/           # 工具函数
│   │   └── types/           # TypeScript类型定义
│   ├── tests/               # 测试文件
│   ├── public/              # 静态资源
│   └── dist/                # 构建输出
├── docs/                    # 文档
├── scripts/                 # 脚本文件
├── supabase/                # Supabase配置
└── vercel.json              # Vercel部署配置

开发指南

代码规范

• 使用Prettier进行代码格式化
• 使用ESLint进行代码检查
• 遵循TypeScript严格模式
• 编写单元测试覆盖核心功能

提交规范

# 提交前运行测试
npm test

# 提交前格式化代码
npm run lint:fix

故障排除

常见问题

1. 构建失败

   • 检查Node.js版本是否符合要求
   • 确认所有依赖都已正确安装
   • 检查环境变量配置是否正确

2. 环境变量未生效

   • 确保环境变量名称以VITE_开头
   • 在Vercel中重新部署项目

3. Supabase连接失败

   • 检查Supabase项目URL和密钥是否正确
   • 确认Supabase项目已启用

贡献指南

1. Fork项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建Pull Request

许可证

MIT License

联系方式

如有问题，请通过以下方式联系：

• 项目Issues
• 邮箱：[email protected]