OpenSea-like Information Architecture (Opensea Like Information Architecture)

Hiding the product reference breaks the architecture story

In 2021 the Bare Crypto marketplace client borrowed the NFT discovery language users already knew. OpenSea is not a competitor claim here — it is a product reference: discovery grid, single-asset viewer, profile collection, and mint form share one mental model. A React Router + Redux/saga skeleton composes those surfaces in one SPA and talks to chain through Infura on Rinkeby.

Bare Marketplace SPA (OpenSea-like IA)
  ├─ /              Home (discovery / trending)
  ├─ /marketplace   Listing grid (Reserve)
  ├─ /nft/:TokenId  Viewer (buy / sell / update)
  ├─ /profile       Owned collection
  └─ Minter form    IPFS metadata + mint
         ↓
  Web3 utils → Rinkeby Infura RPC (no keys in docs)

This part frames why the page set exists — and why comparing openly to OpenSea is part of the architecture, not marketing fluff.

Concepts, defined where they first appear

📦 Product Reference
A deliberate borrow of a mental model users already carry — not a claim of parity.

📦 Information Architecture (IA)
How routes, page jobs, and object boundaries (NFT, listing, profile) are separated.

📦 Viewer
The `/nft/:TokenId` surface where metadata, ownership, and listing actions meet for one token.

📦 Mint Form
Client form that writes file + metadata to IPFS, then submits mint to the NFT contract.

Naming OpenSea is not embarrassment; hiding it erases which UX contract the team shipped.

Five surfaces, one mental model

Home promises discovery; Marketplace lists open listings; Viewer shows one NFT's truth; Profile scans what a wallet owns; Minter creates new assets. OpenSea shares that job split — Bare Crypto compresses it into a small SPA.

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

Router contract

/nft/:TokenId is the single detail page linked from listing cards and Profile collection cards. Marketplace embeds the Reserve container; listing discovery is a util loop separate from chrome (next part).

Redux/saga mixed with local state

Globals and user state live in Redux while listing grids often refresh via container useState + setInterval. That hybrid ships a prototype without an OpenSea-scale indexer — and blurs ownership of freshness.

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

Say OpenSea out loud

Do not hide 'inspiration' in a case study. Be honest: Bare Crypto is not a protocol rival — it is a client clone learned on Rinkeby. When the product reference is explicit, the RPC-scan and testnet/mainnet ADRs in later parts make sense.

The mappings that get confused most often

❌ Avoid naming OpenSea to look original
✓ Hiding the reference makes the IA decision illegible

❌ Every marketing page is core IA
✓ Core is Home, Marketplace, Viewer, Profile, Minter

❌ Viewer is only a gallery
✓ Viewer is ownership, listing, and price-update interaction

❌ Mint form is unrelated to marketplace
✓ It shares the same NFT contract + IPFS metadata path

A checklist for auditing your own system

1. Which five surfaces carry the OpenSea mental model in your route table?
2. Which cards deep-link into Viewer?
3. Does Profile reuse the same totalSupply scan as Marketplace?
4. Which mint metadata fields become traits on Viewer?
5. Can you draw one diagram of differences vs OpenSea?

What to take away from this part

1. Bare Crypto marketplace IA is an intentional OpenSea product reference.
2. Home / Marketplace / Viewer / Profile / Minter carry the mental model.
3. Hiding the reference empties later scaling ADRs of meaning.

Copying OpenSea is not shameful; not knowing which parts you copied is.