Day 68：产品架构梳理 — momoweb3 技术全景

核心概念

什么是产品架构梳理？

一句话定义：对项目的技术栈、页面结构、组件体系、数据流和代码质量进行全面盘点和评估。

类比理解：就像搬进新房子后做一次全屋检查 — 水电通不通（API）、墙面有没有裂缝（Bug）、布局合不合理（架构）、还有什么需要添置的（待开发功能）。

为什么在 Day 68 做这件事？

• 前 67 天一直在"边学边做"，功能是逐步叠加的
• 进入 Week 10（产品完善），需要先全面了解"家底"
• 为后续 UI优化（Day 69）、响应式（Day 70）、PRD（Day 71）打基础
• 上线部署（Day 74）前必须确认架构健康

---

知识点详解

知识点1：系统架构总览

momoweb3 架构图：

┌───────────────────── momoweb3 架构 ─────────────────────┐
│                                                          │
│  Pages (5 个路由)                                        │
│  ├── /           Dashboard (价格+Gas+模拟器+池子+资产)   │
│  ├── /analytics  Dune 嵌入 + 市场洞察                    │
│  ├── /whale      Whale 监控看板                          │
│  ├── /blog       知识库列表 (进度条+笔记卡片)            │
│  └── /blog/[slug] 笔记详情 (自定义 Markdown 渲染)       │
│                                                          │
│  Components (9 个)                                       │
│  ├── Navbar         导航栏 (响应式 + RainbowKit)         │
│  ├── EthPrice       ETH 实时价格                         │
│  ├── GasTracker     Gas 追踪 (3 档)                     │
│  ├── TxSimulator    交易模拟器 (3 Tab, 602行, 最大组件)  │
│  ├── SubgraphPools  Uniswap V3 池子数据                  │
│  ├── Portfolio      多链资产组合 (5 链)                   │
│  ├── WhaleMonitor   Whale 追踪表格                       │
│  ├── WhaleSummary   Whale 摘要卡片                       │
│  └── WalletInfo     钱包信息 (⚠️ 未使用)                │
│                                                          │
│  Data Layer                                              │
│  ├── CoinGecko API      → ETH 价格                      │
│  ├── Etherscan API      → Gas 价格                      │
│  ├── The Graph (GraphQL) → Uniswap V3 数据              │
│  ├── Wagmi/Viem (RPC)   → 链上余额 (5 链)              │
│  ├── Blog posts (TS)    → 学习笔记 + 实战项目           │
│  └── Constants (TS)     → Whale 监控列表                │
│                                                          │
│  Infrastructure                                          │
│  ├── Next.js 16 (App Router + Static Export)             │
│  ├── React 19 + TypeScript 5.9 (Strict)                 │
│  ├── Tailwind CSS 4 (Dark Theme)                         │
│  ├── React Query (缓存 60s)                              │
│  └── RainbowKit + Wagmi (钱包连接)                       │
└─────────────────────────────────────────────────────────┘

知识点2：技术栈盘点

技术选型评价：全部使用行业标准库，无偏门依赖。唯一可优化的是 Apollo Client 使用率低（仅 Subgraph），可考虑用 React Query + fetch 替代。

知识点3：组件盘点

总代码量：~2100 行应用代码

知识点4：数据流架构

外部 API 层 (HTTP/GraphQL)
├── CoinGecko  ──→ EthPrice, TransactionSimulator
├── Etherscan  ──→ GasTracker, TransactionSimulator
└── The Graph  ──→ SubgraphPools

链上数据层 (JSON-RPC via Wagmi)
├── ETH 余额查询   ──→ Portfolio
├── ERC20 余额查询  ──→ Portfolio (USDC/USDT/DAI/WETH)
└── 链 ID / 地址    ──→ Portfolio, WalletInfo

静态数据层 (TypeScript 模块)
├── week1-9.ts + practice.ts ──→ Blog 系统
├── whaleWatchlist.ts        ──→ Whale 看板
└── Token/Chain 配置          ──→ Portfolio

状态管理层
├── React Query  → API 数据缓存 (staleTime: 60s)
├── Wagmi        → 钱包连接/链/余额状态
└── React State  → UI 本地状态 (Tab/展开/刷新)

关键特点：

• 纯只读 Dashboard，不与合约交互（无写操作）
• 静态导出（Static Export），适合 Edge 部署
• 无 Redux/Zustand，轻量级状态管理

知识点5：代码质量评估

知识点6：已完成 vs 待开发功能

已完成（CLAUDE.md 功能路线）：

✅ 钱包连接 (RainbowKit)
✅ ETH 价格展示
✅ Gas 追踪
✅ Portfolio 基础 + 多链支持
✅ Uniswap V3 池子数据 (Subgraph)
✅ 交易模拟器 (Gas + 滑点 + 多链)
✅ Whale 地址监控 (静态数据)
✅ 知识库 Blog 系统 (67 天笔记)
✅ Dune Analytics 嵌入

待开发：

☐ DeFi 收益率聚合看板
☐ DEX 价格对比器
☐ 空投追踪器
☐ NFT Gallery
☐ DAO 提案跟踪
☐ Whale 数据接入真实 API

知识点7：待优化问题清单

---

对比分析

momoweb3 vs 典型 Web3 Dashboard 项目

定位差异：momoweb3 不追求功能全面，而是作为"学习过程的可展示产物"。核心价值在于展示 Web3 PM 的技术理解和产品思维。

---

链上实操记录

操作1：项目架构盘点

步骤：

1. 遍历 app/ 目录，确认 5 个路由页面
2. 遍历 src/components/，清点 9 个组件
3. 检查 src/lib/、src/hooks/、src/constants/ 辅助模块
4. 审查 package.json 依赖列表（17 个 npm 包）
5. 确认环境变量配置（4 个 NEXT_PUBLIC_ 变量）

观察：

• 项目结构清晰，分层合理
• 无循环依赖
• 静态导出模式适合当前只读 Dashboard 定位
• 最大组件 TransactionSimulator（602 行）可考虑拆分

操作2：构建验证

步骤：

1. 运行 npx next build
2. 确认所有 62 个页面静态生成成功
3. 无 TypeScript 错误
4. 构建耗时 ~5 秒（Turbopack）

结果：构建 100% 通过，无警告

---

今日思考

问题1：作为求职作品集，架构是否足够？

足够。对于 Web3 PM 角色，面试官关注的不是代码量，而是：

• 你能理解并集成 Web3 基础设施（钱包/链上数据/Subgraph）
• 你能设计合理的产品架构（页面/组件/数据分离）
• 你能展示学习过程和思考深度（67 天笔记 + 5 篇分析文章）

问题2：静态导出 vs 服务端渲染？

当前用 Static Export 是正确选择：

• 只读 Dashboard，无需服务端 API
• 可部署到 Vercel/Cloudflare Edge，速度快且免费
• 如果未来需要后端（如 Dune API 代理），可迁移到服务端模式

问题3：Week 10 应该重点优化什么？

优先级排序：

1. UI/UX 视觉统一（Day 69）— 第一印象很重要
2. 响应式适配（Day 70）— 面试官可能用手机看
3. PRD 文档（Day 71）— 证明 PM 能力的核心产出
4. 部署上线（Day 74）— 有一个可访问的 URL 是刚需

---

面试题准备

Q：描述一下你的 Web3 项目架构

30秒版本： momoweb3 是一个 Next.js 16 + TypeScript 的 Web3 Dashboard，集成了 RainbowKit 钱包连接、CoinGecko/Etherscan API 数据和 Uniswap V3 Subgraph。包含 5 个页面、9 个组件，支持 5 条链，采用 Static Export 部署。核心功能包括 ETH 价格追踪、Gas 监控、交易模拟器、多链资产组合和 Whale 监控。

2分钟版本：

• 技术栈：Next.js 16 + React 19 + TypeScript + Tailwind CSS + Wagmi + RainbowKit
• 架构：分层设计 — Pages（路由）→ Components（UI）→ Data Layer（API/链上/静态）→ State（React Query + Wagmi）
• 数据集成：CoinGecko 价格、Etherscan Gas、The Graph Subgraph、Wagmi 链上余额
• 特色功能：交易模拟器（滑点计算用 x*y=k 公式 + 多链 Gas 对比）
• 知识库：67 天学习笔记 + 5 篇产品分析文章，自定义 Markdown 渲染
• 部署：Static Export，可部署到 Edge 平台

可能追问：

• Q：为什么选 Static Export？→ 只读 Dashboard 不需要服务端，Edge 部署更快且免费
• Q：最大的技术挑战？→ 多链余额查询的统一接口设计，以及 Subgraph 的学习模式/真实模式切换
• Q：如果要加 DeFi 交易功能？→ 需要集成 Wagmi 的 write 操作，添加交易确认 UI，考虑 Gas 估算和错误处理

---

学习资源

文档阅读

工具网站

---

明日预告

Day 69：UI/UX 优化

• 视觉一致性检查（间距、颜色、字体）
• 组件交互体验改进
• 清理未使用代码
• 关键路径用户体验优化