手册
类似 OpenSea 的信息架构 (Opensea)
Bare Crypto 市场 SPA 建立了一个信息架构,该架构清楚地将 OpenSea 复制为产品参考:主页、市场、查看器、个人资料和铸币表单。
类似 OpenSea 的市场 UI
部分 1 的 3
Bare Crypto 市场 SPA:类似 OpenSea 的信息架构(主页、市场、查看器、个人资料、铸币形式)、通过扫描 TotalSupply 列出发现、与 Rinkeby Infura 和主网铸币客户共享的实用程序分离 — ADR、速率限制和 30 秒的民意调查陈旧列表失败。
隐藏产品参考会破坏架构
2021 年,Bare Crypto 市场客户端有意借用了用户已经了解的 NFT 发现语言。 OpenSea 在这里并不是竞争对手的主张,而是产品参考:发现网格、单一 NFT 查看器、个人资料收集和铸币形式共享相同的思维模型。 React Router + Redux/saga 框架将这些表面组合成 SPA;它通过 Rinkeby 与 Infura 链连接。```text Bare Marketplace SPA (OpenSea-like IA) ├─ / Home (keşif / trending) ├─ /marketplace Listing ızgarası (Reserve) ├─ /nft/:TokenId Viewer (al / sat / güncelle) ├─ /profile Sahip olunan koleksiyon └─ Minter form IPFS metadata + mint ↓ Web3 utils → Rinkeby Infura RPC (no keys in docs)
## 第一次提到的概念```text
📦 Ürün Referansı
Kopyalanan rakip değil; kullanıcıların zaten taşıdığı zihinsel modelin bilinçli ödünç alınması.
📦 Bilgi Mimarisi (IA)
Rotaların, sayfa işlerinin ve nesne sınırlarının (NFT, listing, profil) nasıl ayrıldığı.
📦 Viewer
`/nft/:TokenId` altında tek token için metadata, sahiplik ve listing etkileşiminin birleştiği yüzey.
📦 Mint Formu
Dosya + metadata alanlarını IPFS'e yazıp ardından sözleşmeye mint gönderen istemci formu.
```提及 OpenSea 并不可耻;隐藏它会让团队忘记它所遵循的用户体验章程。
## 五个表面,一个心智模型
家承诺发现;市场列出开放清单;观看者展示单一NFT的真实性;个人资料扫描钱包的资产; Minter 创建新实体。 OpenSea 也有同样的分工——Bare Crypto 将其压缩成一个小型 SPA。```text
OpenSea mental model
discover → browse listings → open asset → own / sell
Bare Crypto routes
Home → Marketplace → Viewer → Profile / Minter
```## 路由器协议
带有参数 `/nft/:TokenId` 的查看器会从列表卡和个人资料收集卡转到唯一真正的详细信息页面。 Marketplace 页面嵌入了 Reserve 容器;列表发现是一个独立于 UI 的 util 循环(下一节)。
## Redux/saga 和本地状态的混合
虽然全局变量和用户状态位于 Redux 中,但在大多数地方,列表网格都会使用容器级 `useState` + `setInterval` 进行刷新。这种混合技术可以在没有 OpenSea 规模索引器的情况下实现快速原型设计;模糊了所有权的界限。```text
ADR sketch
Decision: copy OpenSea IA into a single CRA SPA
Why: shared NFT mental model; ship on Rinkeby fast
Trade-off: no indexer, poll-heavy UI, IA ≠ protocol maturity
```## 显然意味着 OpenSea
不要隐藏案例研究中的“灵感”。比较应该是诚实的:Bare Crypto 不是协议竞争对手;它是在 Rinkeby 上学习到的客户端克隆。如果产品参考很清楚,那么以下部分中的 RPC 扫描和测试网/主网区别就有意义。
## 本期最令人困惑的对决```text
❌ OpenSea'yi anmamak = orijinal görünmek
✓ Referansı gizlemek IA kararını belirsizleştirir
❌ Her marketing sayfası (About/Careers) çekirdek IA'dır
✓ Çekirdek: Home, Marketplace, Viewer, Profile, Minter
❌ Viewer sadece görsel galeridir
✓ Viewer sahiplik, listing ve fiyat güncelleme etkileşimidir
❌ Mint formu marketplace'ten bağımsızdır
✓ Aynı NFT sözleşmesi + IPFS metadata hattını paylaşır
您自己的系统清单
- 路线列表中哪五个表面带有“OpenSea 心智模型”?
- 哪些卡片提供查看器的链接?
- Profile 是否使用与 Marketplace 相同的总供应量筛选?
- Minter 元数据字段在查看器中具有哪些特征?
- 你能用 OpenSea 将差异写在一张图表中吗?
本节中需要记住的事情
- Bare Crypto 市场 IA 是一个有意识的 OpenSea 产品参考。
- 主页/市场/查看器/个人资料/Minter 五重奏承载了心智模型。
- 隐藏参考会使后续的 ADR 缩放变得毫无意义。
抄袭OpenSea并不丢人;不知道自己在抄袭哪一部分真是太遗憾了。
FAQ
Frequently asked questions
什么是产品参考?
被抄袭的不是竞争对手,而是竞争对手。有意识地借用用户已有的心理模型。
什么是信息架构(IA)?
路由、页面作业和对象边界(NFT、列表、配置文件)如何分离。
“不提 OpenSea = 看起来很原始”是真的吗?
隐藏参考会掩盖 IA 决策
本节修复了什么?
本节阐述了为什么信息架构被归入这组页面,并且没有隐藏与 OpenSea 的比较。 2021 年,Bare Crypto 市场客户端有意借用了用户已经了解的 NFT 发现语言。 OpenSea 在这里并不是竞争对手的主张,而是产品参考:发现网格、单一 NFT 查看器、个人资料收集和铸币形式共享相同的思维模型。 React Router + Redux/saga 框架将这些表面组合成 SPA;它通过 Rinkeby 与 Infura 链连接。
学到的工程原理
- 清楚地写出产品参考号; IA 的决定不应该是猜测。
- 用 NFT 探索术语来说,路线契约先于视觉主题。
- Mint、Viewer 和 Marketplace 必须共享相同的实体模型。
继续阅读
继续阅读
系列中的下一个
通过扫描totalSupply发现列表
getListings 读取 NFT TotalSupply 并对每个 tokenId 进行多次 RPC 调用。 N×call 不可扩展;产生 30 秒的民意调查陈旧列表和 Infura 速率限制。
同系列
Rinkeby 测试网和主网客户端分离
Collection Mint 客户强化到主网,而 Marketplace SPA 锁定 Rinkeby Infura。具有共享 web3/IPFS 实用程序的网络特定配置...
相关文章
钱包品牌落地 vs 实际拓展范围
Bare Wallet 应用程序实际上是一个营销 SPA/下载渠道 - 它不是 Chrome MV3 扩展程序。 CRA PWA 清单不应被误认为是扩展架构。