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ı.
Ü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
- Rota listesinde hangi beş yüzey 'OpenSea zihinsel modeli'ni taşıyor?
- Viewer'a hangi kartlardan link veriliyor?
- Profile, Marketplace ile aynı totalSupply taramasını mı kullanıyor?
- Minter metadata alanları Viewer'da hangi trait'lere dönüşüyor?
- OpenSea ile farkları tek diyagramda yazabiliyor musunuz?
Bu bölümden aklında kalması gerekenler
- Bare Crypto marketplace IA'sı bilinçli bir OpenSea ürün referansıdır.
- Home / Marketplace / Viewer / Profile / Minter beşlisi zihinsel modeli taşır.
- 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
totalSupply Tarayarak Listing Keşfi
getListings, NFT totalSupply'ı okuyup her tokenId için birden fazla RPC çağrısı yapar. N×çağrı ölçeklenmez; 30s poll stale listing ve Infura rate-limit…
Ayni seriden
Rinkeby Testnet ve Mainnet İstemci Ayrımı
Marketplace SPA Rinkeby Infura'ya kilitlenirken koleksiyon mint istemcileri mainnet'e sertleşir. Paylaşılan web3/IPFS util'leri ile ağ-spesifik config…
Ilgili yazilar
Cüzdan Marka Landing vs Gerçek Extension Kapsamı
Bare Wallet uygulaması dürüstçe bir pazarlama SPA / indirme hunisidir — Chrome MV3 extension değildir. CRA PWA manifest'i extension mimarisi sanılmamalıdır.…