プレイブック

OpenSea のような情報アーキテクチャ (Opensea)

Bare Crypto マーケットプレイス SPA は、OpenSea を製品リファレンス (ホーム、マーケットプレイス、ビューアー、プロファイル、ミント フォーム) として明確にコピーする情報アーキテクチャを確立します。

OpenSea のようなマーケットプレイス UI

一部 1 の 3

Bare Crypto マーケットプレイス SPA: OpenSea のような情報アーキテクチャ (ホーム、マーケットプレイス、ビューアー、プロファイル、ミント フォーム)、totalSupply のスキャンによるリストの検出、Rinkeby Infura およびメインネットのミント クライアントと共有されるユーティリティの分離 — ADR、レート制限、および 30 秒投票の古いリストの失敗。

OpenSea-like marketplace UI architecture diagram

製品参照を非表示にするとアーキテクチャが壊れます

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 について言及することは恥ずかしいことではありません。それを隠すと、チームはどの UX 憲章を遵守しているかを忘れてしまいます。

## 5 つのサーフェス、1 つのメンタル モデル

家は発見を約束します。マーケットプレイスは公開中のリストをリストします。ビューアは単一の 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` を持つビューアは、リスト カードとプロフィール コレクション カードから唯一の実際の詳細ページに移動します。マーケットプレイス ページには、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

独自のシステムのチェックリスト

  1. ルート リスト内の 5 つのサーフェスに「OpenSea メンタル モデル」が組み込まれているのはどれですか?
  2. ビューアへのリンクを提供するカードはどれですか?
  3. プロファイルはマーケットプレイスと同じ totalSupply スクリーニングを使用しますか?
  4. Minter メタデータ フィールドは Viewer ではどのような特性になりますか?
  5. OpenSea との違いを 1 つの図に記述できますか?

このセクションで覚えておくべきこと

  1. Bare Crypto マーケットプレイス IA は、意識的な OpenSea 製品リファレンスです。
  2. ホーム / マーケットプレイス / ビューアー / プロフィール / ミンター クインテットはメンタル モデルを担っています。
  3. 参照を非表示にすると、後続のスケーリング ADR は無意味になります。

OpenSea をコピーすることは恥ではありません。どの作品をコピーしているのかわからないのは残念です。

FAQ

よくある質問

製品リファレンスとは何ですか?

コピーされるのは競合他社ではありません。ユーザーがすでに持っているメンタルモデルを意識的に借用します。

情報アーキテクチャ (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 のレート制限を生成します。

同じシリーズ

関連記事

Paylaş