Oyun Kitabı

OpenSea-Benzeri Bilgi Mimarisi (Opensea Benzeri Bilgi Mimarisi)

Bare Crypto marketplace SPA, OpenSea'yi ürün referansı olarak açıkça kopyalayan bir bilgi mimarisi kurar: Home, Marketplace, Viewer, Profile ve mint formu.

OpenSea-Benzeri Marketplace UI

Bolum 1 / 3

Bare Crypto marketplace SPA: OpenSea-benzeri bilgi mimarisi (Home, Marketplace, Viewer, Profile, mint formu), totalSupply tarayarak listing keşfi, Rinkeby Infura ve mainnet mint istemcileriyle paylaşılan util ayrımı — ADR, rate-limit ve 30s poll stale listing başarısızlıkları.

OpenSea-like marketplace UI architecture diagram

Ürün referansı gizlemek mimariyi bozar

2021'de Bare Crypto marketplace istemcisi, kullanıcıların zaten bildiği bir NFT keşif dilini bilerek ödünç aldı. OpenSea burada rakip iddiası değil, ürün referansıdır: keşif ızgarası, tek NFT görüntüleyici, profil koleksiyonu ve mint formu aynı zihinsel modeli paylaşır. React Router + Redux/saga iskeleti bu yüzeyleri bir SPA içinde birleştirir; Rinkeby üzerinden Infura ile zincire bağlanır.

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)

Bu bölüm, OpenSea ile karşılaştırmayı gizlemeden bilgi mimarisinin neden bu sayfa setine indirildiğini çerçeveler.

Kavramlar ilk geçtiği yerde

📦 Ü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'yi anmak utanılacak bir şey değildir; gizlemek, ekibin hangi UX sözleşmesini taşıdığını unutturur.

Beş yüzey, bir zihinsel model

Home keşif vaat eder; Marketplace açık listing'leri listeler; Viewer tek NFT'nin gerçeğini gösterir; Profile cüzdanın sahip olduklarını tarar; Minter yeni varlık yaratır. OpenSea'de de aynı iş bölümü vardır — Bare Crypto bunu küçük bir SPA'ya sıkıştırır.

OpenSea mental model
  discover → browse listings → open asset → own / sell
Bare Crypto routes
  Home → Marketplace → Viewer → Profile / Minter

Router sözleşmesi

/nft/:TokenId parametreli Viewer, listing kartlarından ve Profile koleksiyon kartlarından tek gerçek detay sayfasına gider. Marketplace sayfası Reserve container'ını gömer; listing keşfi UI'dan ayrı bir util döngüsüdür (sonraki bölüm).

Redux/saga ve yerel state karışımı

Globals ve kullanıcı durumu Redux'ta yaşarken listing ızgarası çoğu yerde container-level useState + setInterval ile yenilenir. Bu hibrit, OpenSea ölçeğinde bir indexer yokken hızlı prototip sağlar; sahiplik sınırını bulanıklaştırır.

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

Açıkça OpenSea demek

Case study'de 'esinlenme'yi gizlemeyin. Karşılaştırma dürüst olmalıdır: Bare Crypto bir protokol rakibi değil; Rinkeby üzerinde öğrenilen bir istemci klonudur. Ürün referansı netse, sonraki bölümlerdeki RPC taraması ve testnet/mainnet ayrımı anlam kazanır.

Bu bölümde en çok karışan eşleştirmeler

❌ 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

Kendi sisteminizi denetleme listesi

  1. Rota listesinde hangi beş yüzey 'OpenSea zihinsel modeli'ni taşıyor?
  2. Viewer'a hangi kartlardan link veriliyor?
  3. Profile, Marketplace ile aynı totalSupply taramasını mı kullanıyor?
  4. Minter metadata alanları Viewer'da hangi trait'lere dönüşüyor?
  5. OpenSea ile farkları tek diyagramda yazabiliyor musunuz?

Bu bölümden aklında kalması gerekenler

  1. Bare Crypto marketplace IA'sı bilinçli bir OpenSea ürün referansıdır.
  2. Home / Marketplace / Viewer / Profile / Minter beşlisi zihinsel modeli taşır.
  3. Referansı gizlemek, sonraki ölçekleme ADR'lerini anlamsız bırakır.

OpenSea'yi kopyalamak utanç değil; hangi parçayı kopyaladığınızı bilmemek utançtır.

SSS

Sık sorulan sorular

Ürün Referansı nedir?

Kopyalanan rakip değil; kullanıcıların zaten taşıdığı zihinsel modelin bilinçli ödünç alınması.

Bilgi Mimarisi (IA) nedir?

Rotaların, sayfa işlerinin ve nesne sınırlarının (NFT, listing, profil) nasıl ayrıldığı.

"OpenSea'yi anmamak = orijinal görünmek" doğru mu?

Referansı gizlemek IA kararını belirsizleştirir

Bu bölüm neyi sabitler?

Bu bölüm, OpenSea ile karşılaştırmayı gizlemeden bilgi mimarisinin neden bu sayfa setine indirildiğini çerçeveler. 2021'de Bare Crypto marketplace istemcisi, kullanıcıların zaten bildiği bir NFT keşif dilini bilerek ödünç aldı. OpenSea burada rakip iddiası değil, ürün referansıdır: keşif ızgarası, tek NFT görüntüleyici, profil koleksiyonu ve mint formu aynı zihinsel modeli paylaşır. React Router + Redux/saga iskeleti bu yüzeyleri bir SPA içinde birleştirir; Rinkeby üzerinden Infura ile zincire bağlanır.

Ogrenilen Muhendislik Prensipleri

  • Ürün referansını açık yazın; IA kararı spekülasyon olmasın.
  • NFT keşif dilinde rota sözleşmesi, görsel temadan önce gelir.
  • Mint, Viewer ve Marketplace aynı varlık modelini paylaşmalıdır.

Okumaya devam et

Okumaya devam et

Seride sonraki yazi

Ayni seriden

Ilgili yazilar

Paylaş