Playbook
OpenSea-ähnliche Informationsarchitektur (Opensea Aehnliche Informationsarchitektur)
Die Bare-Crypto-Marketplace-SPA spiegelt bewusst OpenSeas mentales Modell: Home, Marketplace, Viewer, Profile und Mint-Formular.
OpenSea-ähnliche Marketplace-UI
Teil 1 von 3
Bare-Crypto-Marketplace-SPA: OpenSea-ähnliche Informationsarchitektur (Home, Marketplace, Viewer, Profile, Mint-Formular), Listing-Entdeckung per totalSupply-Scan und Rinkeby-Infura- vs. Mainnet-Mint-Client-Trennung mit geteilten Utils — ADRs, Rate-Limits und 30s-Poll-Stale-Listings.
Das Produkt-Referenz verschweigen zerstört die Architektur-Story
2021 übernahm der Bare-Crypto-Marketplace-Client die NFT-Entdeckungssprache, die Nutzer schon kannten. OpenSea ist hier kein Konkurrenzanspruch — sondern Produkt-Referenz: Discovery-Grid, Einzel-Asset-Viewer, Profil-Sammlung und Mint-Formular teilen ein mentales Modell. React Router + Redux/Saga komponieren diese Flächen in einer SPA und sprechen über Infura auf Rinkeby mit der Chain.
Bare Marketplace SPA (OpenSea-like IA)
├─ / Home (Discovery / Trending)
├─ /marketplace Listing-Grid (Reserve)
├─ /nft/:TokenId Viewer (kaufen / verkaufen / updaten)
├─ /profile Besitzte Sammlung
└─ Minter-Form IPFS-Metadaten + Mint
↓
Web3-Utils → Rinkeby Infura RPC (keine Keys in Docs)
Dieser Teil rahmt ein, warum dieses Seiten-Set existiert — und warum der offene OpenSea-Vergleich Architektur ist, kein Marketing-Fluff.
Begriffe, dort definiert, wo sie zuerst auftauchen
📦 Produkt-Referenz
Bewusstes Ausleihen eines mentalen Modells — kein Paritätsanspruch.
📦 Informationsarchitektur (IA)
Wie Routen, Seitenaufgaben und Objektgrenzen (NFT, Listing, Profil) getrennt sind.
📦 Viewer
Die `/nft/:TokenId`-Fläche, in der Metadaten, Besitz und Listing-Aktionen für ein Token zusammentreffen.
📦 Mint-Formular
Client-Formular, das Datei + Metadaten nach IPFS schreibt und dann mintet.
OpenSea zu nennen ist keine Peinlichkeit; es zu verstecken löscht den UX-Vertrag.
Fünf Flächen, ein mentales Modell
Home verspricht Discovery; Marketplace listet offene Listings; Viewer zeigt die Wahrheit eines NFT; Profile scannt Besitz; Minter erzeugt Assets. OpenSea teilt diese Arbeitsteilung — Bare Crypto komprimiert sie in eine kleine SPA.
OpenSea mental model
discover → browse listings → open asset → own / sell
Bare Crypto routes
Home → Marketplace → Viewer → Profile / Minter
Router-Vertrag
/nft/:TokenId ist die einzige Detailseite von Listing- und Profil-Karten. Marketplace bettet den Reserve-Container ein; Listing-Discovery ist eine Util-Schleife (nächster Teil).
Redux/Saga gemischt mit lokalem State
Globals und User leben in Redux; Listing-Grids refreshen oft per useState + setInterval. Hybrid ohne OpenSea-Indexer — und unklare Freshness-Ownership.
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 laut sagen
Verstecken Sie 'Inspiration' nicht. Bare Crypto ist kein Protokoll-Rivale — ein Client-Klon auf Rinkeby. Ist die Referenz klar, gewinnen die RPC- und Testnet/Mainnet-ADRs Sinn.
Die am häufigsten verwechselten Zuordnungen
❌ OpenSea nicht nennen = original wirken
✓ Referenz verstecken macht die IA-Entscheidung unlesbar
❌ Jede Marketing-Seite ist Kern-IA
✓ Kern: Home, Marketplace, Viewer, Profile, Minter
❌ Viewer ist nur Galerie
✓ Viewer ist Besitz-, Listing- und Preis-Interaktion
❌ Mint-Form ist unabhängig vom Marketplace
✓ Sie teilt NFT-Vertrag + IPFS-Metadaten-Pfad
Checkliste zur Prüfung des eigenen Systems
- Welche fünf Flächen tragen das OpenSea-Modell in der Routentabelle?
- Welche Karten linken in den Viewer?
- Nutzt Profile denselben totalSupply-Scan wie Marketplace?
- Welche Mint-Felder werden Traits im Viewer?
- Können Sie Unterschiede zu OpenSea in einem Diagramm zeichnen?
Was aus diesem Teil bleiben sollte
- Die Marketplace-IA ist eine bewusste OpenSea-Produkt-Referenz.
- Home / Marketplace / Viewer / Profile / Minter tragen das mentale Modell.
- Referenz verstecken entleert spätere Scaling-ADRs.
OpenSea zu kopieren ist keine Schande; nicht zu wissen, welche Teile, schon.
FAQ
Häufige Fragen
Was ist Produkt-Referenz?
Bewusstes Ausleihen eines mentalen Modells — kein Paritätsanspruch.
Was ist Informationsarchitektur (IA)?
Wie Routen, Seitenaufgaben und Objektgrenzen (NFT, Listing, Profil) getrennt sind.
Stimmt es, dass „OpenSea nicht nennen = original wirken“?
Referenz verstecken macht die IA-Entscheidung unlesbar
Was legt dieser Teil fest?
Dieser Teil rahmt ein, warum dieses Seiten-Set existiert — und warum der offene OpenSea-Vergleich Architektur ist, kein Marketing-Fluff. 2021 übernahm der Bare-Crypto-Marketplace-Client die NFT-Entdeckungssprache, die Nutzer schon kannten. OpenSea ist hier kein Konkurrenzanspruch — sondern Produkt-Referenz: Discovery-Grid, Einzel-Asset-Viewer, Profil-Sammlung und Mint-Formular teilen ein mentales Modell. React Router + Redux/Saga komponieren diese Flächen in einer SPA und sprechen über Infura auf Rinkeby mit der Chain.
Gelernte Engineering-Prinzipien
- Produkt-Referenz explizit schreiben — IA darf keine Spekulation sein.
- In der NFT-Discovery schlagen Routenverträge visuelle Themes.
- Mint, Viewer und Marketplace müssen ein Asset-Modell teilen.
Weiterlesen
Weiterlesen
Nachster Teil der Serie
Listing-Entdeckung per totalSupply-Scan
getListings liest NFT-totalSupply und fächert mehrere RPC-Aufrufe pro tokenId auf. N×Calls skalieren nicht; 30s-Polls erzeugen stale Listings und…
Aus derselben Serie
Rinkeby-Testnet vs. Mainnet-Client-Trennung
Die Marketplace-SPA hängt an Rinkeby-Infura; Collection-Mint-Clients härten auf Mainnet. Geteilte web3/IPFS-Utils bleiben netz-agnostisch; Config nicht.
Verwandte Beitrage
Wallet-Marken-Landing vs. echte Extension-Scope
Die Bare-Wallet-App ist ehrlich eine Marketing-SPA / Download-Funnel — keine Chrome-MV3-Extension. Ein CRA-PWA-Manifest ist keine Extension-Architektur.