# monad_hack

**Repository Path**: beta_zhao/monad_hack

## Basic Information

- **Project Name**: monad_hack
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-15
- **Last Updated**: 2026-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Monad Developer Growth System

🚀 为Monads黑客松打造的Web3开发者成长系统完整Demo

## ✨ 核心功能

### 1. 🎯 能力测评系统
- **8道精选题目**，覆盖8个技术领域
- 智能等级评估：入门级/中级/高级
- 自动积分奖励和等级升级
- 实时进度跟踪和答题导航

### 2. 📚 三条学习路径
- **🚀 快速启动路径** (3周，15小时)
  - Monads生态、区块链基础、钱包管理、Solidity入门、测试网交互
- **🔧 全栈开发路径** (8周，40小时)
  - 智能合约进阶、代币和NFT标准、DApp前端、Web3.js、钱包集成
- **⚡ 高级优化路径** (12周，60小时)
  - Gas优化、安全审计、高级模式、L2/跨链、DAO治理、数据分析、生产级项目

### 3. 💻 Monads测试网合约沙盒
- **4个预设模板**：ERC20、NFT(ERC721)、投票合约、抽奖合约
- 在线代码编辑器
- 模拟合约部署和函数执行
- 测试网信息速查
- 常见问题解答

### 4. 🔗 生态资源库
- **文档资源** (3个)：Monads、Solidity、Web3.js官方文档
- **开发工具** (4个)：Remix、Hardhat、Foundry、MetaMask
- **社区平台** (3个)：Discord、Stack Exchange、ETH Research
- **学习课程** (3个)：CryptoZombies、Buildspace、Alchemy University
- **高级筛选**：按分类、类型、关键词搜索
- **学习路线推荐**：从入门到专家的递进式资源建议

### 5. 💰 钱包登录与链上积分NFT激励
- **钱包连接**：支持输入钱包地址或快速生成测试地址
- **链上积分系统**：
  - 首次连接：+10积分
  - 完成测评：+50积分
  - 完成学习路径：+100/200/300积分
  - 部署合约：+30积分
- **等级系统**：
  - Lv.1 入门级 (0-100积分)
  - Lv.2 中级 (100-300积分)
  - Lv.3 高级 (300+积分)
- **NFT奖励**：
  - 完成每条路径获得1个专属NFT
  - 升级等级解锁特殊权限

## 🚀 快速开始

### 一键启动（推荐）

```bash
# 进入项目目录
cd monad_hack

# 安装依赖
npm install

# 启动开发服务器（自动打开浏览器）
npm run dev

# 或使用快速启动命令
npm start
```

访问 `http://localhost:3000` 即可看到完整应用！

### 项目构建

```bash
# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

## 📁 项目结构

```
monad_hack/
├── src/
│   ├── App.tsx                 # 主应用组件和路由逻辑
│   ├── main.tsx                # React应用入口
│   ├── index.css               # 全局样式和Tailwind导入
│   ├── components/
│   │   ├── Header.tsx          # 顶部导航栏
│   │   └── WalletManager.tsx   # 钱包连接管理器
│   └── pages/
│       ├── Dashboard.tsx       # 首页仪表板
│       ├── Assessment.tsx      # 能力测评页面
│       ├── LearningPaths.tsx   # 学习路径页面
│       ├── ContractSandbox.tsx # 合约沙盒页面
│       └── ResourceLibrary.tsx # 资源库页面
├── public/
│   └── index.html              # HTML模板
├── package.json                # 项目依赖配置
├── vite.config.ts              # Vite构建配置
├── tsconfig.json               # TypeScript配置
├── tailwind.config.js          # TailwindCSS配置
├── postcss.config.js           # PostCSS配置
└── README.md                   # 本文件
```

## 🛠 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| React | 18.2.0 | 前端框架 |
| TypeScript | 5.3.2 | 类型安全 |
| TailwindCSS | 3.3.6 | 样式框架 |
| Vite | 5.0.8 | 构建工具 |
| Tailwind Forms | 0.5.7 | 表单组件 |

## 💡 核心特性

✅ **完全响应式设计** - 适配所有设备尺寸  
✅ **深色主题** - 专为Web3应用优化的视觉风格  
✅ **Monad主题色** - 紫色系统与发光效果  
✅ **无需额外依赖** - 使用原生API和React Hooks  
✅ **模拟环境** - 完整的交互体验，无需区块链连接  
✅ **TypeScript完整** - 全类型覆盖和最佳实践  

## 🎮 演示功能

### 测评系统演示
1. 点击"能力测评"进入测评页面
2. 点击"开始测评"开始8道题目的答题
3. 选择答案并通过进度导航快速跳转
4. 完成后查看详细成绩分析和等级评估
5. 获得积分奖励和等级升级

### 学习路径演示
1. 进入"学习路径"模块
2. 点击展开任何路径查看详细模块列表
3. 勾选模块完成学习
4. 完成所有模块后获得积分和NFT奖励
5. 查看个人成就和里程碑

### 合约沙盒演示
1. 选择预设的合约模板或编写自定义代码
2. 点击"部署合约"进行模拟部署
3. 获得模拟合约地址
4. 输入函数名称和参数执行函数
5. 获得部署奖励（+30积分）

### 资源库演示
1. 使用搜索栏搜索资源
2. 按分类或类型进行高级筛选
3. 点击资源卡片访问官方网站
4. 查看学习路线推荐

### 钱包系统演示
1. 点击右下角"连接钱包"按钮
2. 选择快速测试（生成模拟地址）或输入真实地址
3. 成功连接后显示地址、积分、等级、NFT数量
4. 完成任务自动更新积分和等级
5. 点击断开连接解绑钱包


#### 后续内容
1. 学习者免费学习，学习可以获得奖励
2. 各个级别都有教师，可以一对一教，学生能够做出demo教师可以获得奖励
3. 学习者也可以是教师


## 📊 数据流向

```
用户操作 → App组件状态管理 → 页面组件渲染
   ↓
页面交互（测评、任务完成等）
   ↓
onUpdateProfile回调 → 更新用户个人资料
   ↓
实时显示积分、等级、NFT数量
```

## 🔐 安全特性

- ✅ 类型安全的TypeScript代码
- ✅ 模拟钱包地址验证 (0x+40位十六进制)
- ✅ 本地状态管理，无服务器依赖
- ✅ 无敏感数据存储
- ✅ CORS安全的资源链接

## 🌍 Monads生态集成

### 网络配置
- **RPC 端点**: https://testnet-rpc.monads.xyz
- **链 ID**: 10143 (示例)
- **区块浏览器**: https://explorer.monads.xyz
- **钱包支持**: MetaMask + Web3钱包标准

### 生态资源
- Monads官方文档完整链接
- 生态开发工具集成指南
- 测试网水龙头和代币申请
- 开发者社区和支持渠道

## 📱 浏览器兼容性

- ✅ Chrome/Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ 移动浏览器 (iOS Safari, Chrome Mobile)

## 🚢 部署到生产

### 构建静态资源
```bash
npm run build
```

产物位置: `dist/` 目录

### 部署选项
- **Vercel** (推荐): `vercel --prod`
- **Netlify**: 连接Git仓库自动部署
- **GitHub Pages**: `npm run build` 后上传dist目录
- **自托管**: 上传dist文件夹到任意Web服务器

## 🐛 常见问题

**Q: 如何修改Monad主题色？**  
A: 编辑 `tailwind.config.js` 中的 `monad` 色系。

**Q: 能否连接真实钱包？**  
A: 当前为演示环境。生产版本需要集成Web3库（wagmi/ethers）。

**Q: 如何保存用户数据？**  
A: 修改App.tsx集成localStorage或后端API。

**Q: 合约沙盒支持真实部署吗？**  
A: 当前为模拟环境。真实部署需要使用Hardhat/Foundry。

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启Pull Request

## 📄 许可证

MIT License - 自由使用和修改

## 🎯 下一步

- [ ] 集成真实Web3钱包（wagmi库）
- [ ] 连接Monads测试网智能合约
- [ ] 添加用户数据持久化（数据库）
- [ ] 实现推荐系统AI
- [ ] 添加实时排行榜
- [ ] 多语言国际化支持
- [ ] 深色/浅色主题切换
- [ ] 社区论坛和讨论板

## 📞 联系我们

- 📧 Email: dev@monads.xyz
- 💬 Discord: https://discord.gg/monads
- 🐦 Twitter: @MonadsXYZ
- 📖 文档: https://docs.monads.xyz

---

**Made with ❤️ for the Monads Developer Community**

在Monads生态中构建、学习、成长！🚀