Skip to content

ForOneIce/web3-FTW

Repository files navigation

Web3-FTW (For The Win)

Challenge Camp Finish To Win - Web3 Version
基于区块链的挑战营地系统,让每一次挑战都成为胜利的起点

License: MIT Solidity React Node.js

🎯 项目概述

Web3-FTW是一个基于以太坊区块链的挑战营地系统,通过智能合约实现去中心化的挑战管理。组织者可以创建挑战营地,参与者通过支付押金参与挑战,完成关卡后获得押金返还,未完成者押金将被罚没给组织者。

🌟 核心特性

  • 去中心化挑战管理: 基于智能合约的透明、不可篡改的挑战系统
  • 押金激励机制: 通过押金机制激励参与者完成挑战
  • 多关卡挑战: 支持多关卡配置,每关独立密码验证
  • 实时状态同步: 链上链下数据实时同步,提供流畅的用户体验
  • 权限分离设计: 组织者和参与者权限明确分离,确保公平性

🏗️ 技术架构

整体架构图

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端应用      │    │   后端服务      │    │   智能合约      │
│   (React)       │    │   (Node.js)     │    │   (Solidity)    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
│ • 用户界面      │    │ • API服务       │    │ • 营地管理      │
│ • 钱包连接      │    │ • 事件监听      │    │ • 押金管理      │
│ • 状态管理      │    │ • 数据缓存      │    │ • 密码验证      │
│ • 多语言支持    │    │ • 数据库同步    │    │ • 权限控制      │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         └───────────────────────┼───────────────────────┘
                                 │
                    ┌─────────────────┐
                    │   数据库        │
                    │   (SQLite)      │
                    └─────────────────┘

技术栈

层级 技术 版本 说明
前端 React 18.0.0 用户界面框架
前端 ethers.js 5.7.0 区块链交互
前端 SCSS - 样式预处理
后端 Node.js 14.0.0+ 运行环境
后端 Express.js 4.18.0 Web框架
后端 SQLite3 - 数据库
区块链 Solidity 0.8.19 智能合约语言
区块链 Hardhat 2.17.0 开发框架

🚀 快速开始

环境要求

  • Node.js >= 14.0.0
  • npm >= 6.0.0
  • Git

安装步骤

  1. 克隆项目
git clone https://github.com/your-username/web3-FTW.git
cd web3-FTW
  1. 快捷部署
node setup-local-env.js
  1. 访问应用

📖 使用指南

组织者流程

  1. 连接钱包: 使用MetaMask等钱包连接应用
  2. 创建营地: 配置营地名称、时间、关卡数、参与者限制等
  3. 配置关卡: 设置各关卡截止时间和密码
  4. 管理营地: 监控参与者进度,处理押金分配

参与者流程

  1. 连接钱包: 使用MetaMask等钱包连接应用
  2. 浏览营地: 查看可参与的营地列表
  3. 报名参与: 支付押金报名参与营地
  4. 完成挑战: 按时完成各关卡挑战
  5. 提取押金: 完成所有关卡后提取押金

🔧 项目结构

web3-FTW/
├── client/                 # 前端应用
│   ├── src/
│   │   ├── components/     # React组件
│   │   ├── pages/         # 页面组件
│   │   ├── context/       # React上下文
│   │   ├── styles/        # 样式文件
│   │   └── utils/         # 工具函数
│   └── public/            # 静态资源
├── server/                # 后端服务
│   ├── models/            # 数据模型
│   ├── routes/            # API路由
│   ├── services/          # 业务服务
│   └── data/              # 数据库文件
├── contracts/             # 智能合约
│   ├── solidity/          # 合约源码
│   ├── test/              # 测试文件
│   └── scripts/           # 部署脚本
└── docs/                  # 项目文档

🎨 界面展示

首页设计

  • 钢琴键盘主题: 以钢琴键盘为设计元素,象征挑战的阶梯
  • 价值观展示: 8个核心价值观的半透明展示
  • 双入口设计: "发起"和"参加"两个主要操作入口

营地详情页

  • 时间轴设计: 以钢琴键盘展示营地生命周期
  • 状态可视化: 不同状态用不同颜色区分
  • 操作按钮: 根据用户身份和营地状态显示相应操作

🔒 安全特性

智能合约安全

  • 代理模式: 支持合约升级,保持数据不变
  • 权限控制: 严格的权限验证机制
  • 密码哈希: 原始密码不存储,只存储哈希值
  • 重入攻击防护: 防止重入攻击的安全设计

应用安全

  • 输入验证: 全面的输入参数验证
  • 地址验证: 以太坊地址格式验证
  • 私钥保护: 私钥仅在内存中临时使用
  • HTTPS传输: 所有数据传输使用HTTPS

📊 数据架构

链上数据

  • 营地状态: 报名、开营、闯关、结营等状态
  • 参与者信息: 报名状态、完成进度、押金状态
  • 关卡配置: 截止时间、密码哈希、完成统计
  • 资金管理: 押金收取、退还、罚没记录

链下数据

  • 营地详情: 名称、描述、配置信息
  • 事件日志: 所有智能合约事件记录
  • 用户关系: 组织者和参与者的营地关系
  • 缓存数据: 提升查询性能的缓存数据

📈 性能优化

前端优化

  • 代码分割: React.lazy实现组件懒加载
  • 状态管理: 合理使用React状态和上下文
  • 缓存策略: 本地缓存减少重复请求

后端优化

  • 数据库索引: 为常用查询字段创建索引
  • 连接池: 数据库连接复用
  • 事件队列: 异步处理事件同步

区块链优化

  • 代理模式: 减少部署成本
  • 批量操作: 减少交易次数
  • Gas优化: 优化合约代码减少Gas消耗

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢


Web3-FTW - 让每一次挑战都成为胜利的起点 🏆

本项目为开源项目,欢迎社区贡献和反馈。如果您觉得这个项目有价值,请给我们一个 ⭐️

About

Challenge Camp Finish To Win - Web3 version

Resources

License

Stars

Watchers

Forks