Marketplace UI (NextJS)


Want to go straight to the code?

Check out the github


NOTE: This documentation is for the v1 marketplace, go here for v2 marketplace docs

Reservoir Market is an open source marketplace that enables communities to easily launch their own NFT marketplace, accessing instant liquidity aggregated from other major marketplaces.

The marketplace supports 3 different modes:

  1. Single collection (e.g. Crypto Coven)

  1. Multi collection community (e.g. BAYC)

  1. All Collections (e.g. Reservoir Market)

With each deployment, communities are given full control over their marketplace from designing their look and feel to setting their own marketplace fees.


  1. Install Node.js and NPM
  2. Install Yarn
  3. Request free Reservoir API key

Built With


Fork this repo and follow these instructions to install dependancies.

With yarn:

$ yarn install

With NPM:

$ npm install


Reservoir Market is built to be fully configurable using environment variables. To preview your configuration locally you can copy the values you want to use from env.development or env.production into a new file called .env.local

Note: Environment variables can also be added during deployment via deployment platforms like vercel.

Admin Configuration

Environment VariableRequiredDescriptionExample
NEXT_PUBLIC_RESERVOIR_API_BASEtrueThe Reservoir API base URL. Available Mainnet, Optimism and Goerli.,,
NEXT_PUBLIC_CHAIN_IDtrueThe Ethereum network to be used. 1 for Etherem Mainnet and 5 for Goerli Testnet.1, 5, 10
NEXT_PUBLIC_PROXY_API_BASEtrueThe proxy API used to pass the Reservoir API key without exposing it to the client./api/reservoir
NEXT_PUBLIC_RESERVOIR_API_KEYtrueReservoir API key provided by the Reservoir Protocol. Get your own API key.123e4567-e89b-12d3-a456-426614174000
NEXT_PUBLIC_ALCHEMY_IDtrueAlchemy API key required for buying items on mobile. Get your own API key here.123e4567-e89b-12d3-a456-426614174000
NEXT_PUBLIC_DATADOG_CLIENT_TOKENfalseDatadog client token for configuring analytics.pub4bec8e12515ec3458fe1acced2bidb321
NEXT_PUBLIC_DATADOG_APPLICATION_IDfalseDatadog application id for configuring analytics.1dabcdsdaad-3953-125a-b412-815dgf31sfsd190

Marketplace Configuration

Environment VariableRequiredDescriptionExample
NEXT_PUBLIC_SOURCE_IDtrueDEPRECATED: The source ID used to attribute listings and offers from your marketplace.Reservoir Market
NEXT_PUBLIC_SOURCE_DOMAINtrueThe source ID used to attribute listings and offers from your marketplace. Must be in a domain
NEXT_PUBLIC_SOURCE_NAMEfalseThe source name used to attribute listings and offers from your marketplace, falls back to the domain.Reservoir Market
NEXT_PUBLIC_ORDER_KINDfalseThe order kind to be used when listing or making offers on your marketplace. Default will use seaport if not set.zeroex-v4. wyvern-v2.3, seaport
NEXT_PUBLIC_FEE_BPSfalseThe marketplace fee that will be earned from native listings and offers on your marketplace. Configured as bps.100
NEXT_PUBLIC_FEE_RECIPIENTfalseThe address that will receive marketplace fee.0xF296178d553C8Ec21A2fBD2c5dDa8CA9ac905A00
NEXT_PUBLIC_COLLECTIONfalseUse this to configure a single collection marketplace or set the default collection for your community marketplace.0x8d04a8c79ceb0889bdd12acdf3fa9d207ed3ff63
NEXT_PUBLIC_COLLECTION_SET_IDfalseUse this to configure a community marketplace. Generate your collection set ID here.f566ba09c14f56aedeed3f77e3ae7f5ff28b9177714d3827a87b7a182f8f90ff
NEXT_PUBLIC_COMMUNITYfalseUse this to configure a community marketplace. Note: Community IDs are only available for certain communities.artblocks
NEXT_PUBLIC_REDIRECT_HOMEPAGEfalseIf enabled, homepage will automatically redirect to collection page set in NEXT_PUBLIC_COLLECTION.true
NEXT_PUBLIC_EXTERNAL_LINKSfalseExternal links to be displayed in the top navigation bar.Blog::<<<<,Docs::>>>>
NEXT_PUBLIC_COLLECTION_DESCRIPTIONSfalseCustomize descriptions on a per collection basis.0xb74bf94049d2c01f8805b8b15db0909168cabf46::test description,0xc751c84678d8e229e361f9b04c080256516f4a0a::another description
NEXT_PUBLIC_NAVBAR_LOGO_LINKfalseCustomize the marketplace navbar logo's link.
NEXT_PUBLIC_DEFAULT_TO_SEARCHfalseIf enabled, search bar will be displayed instead of collection switcher.true
NEXT_PUBLIC_LISTING_CURRENCIESfalseCustomize which currency users can list in.[{"symbol": "ETH", "decimals": 18, "contract": "0x0000000000000000000000000000000000000000"},{"symbol": "USDC", "decimals": 6, "contract": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"}]

Design Configuration

Environment VariableRequiredDescriptionExample
NEXT_PUBLIC_NAVBAR_LOGOfalseThe logo of your marketplace that appears on mobile.
NEXT_PUBLIC_DESKTOP_NAVBAR_LOGOfalseThe logo of your marketplace that appears on desktop.
NEXT_PUBLIC_FAVICONfalseThe favicon for your marketplace.
NEXT_PUBLIC_SOURCE_ICONfalseThe icon that appears on native listings.
NEXT_PUBLIC_DISABLE_POWERED_BY_RESERVOIRfalseUse this to disable the Powered by Reservoir tag on modals.true
NEXT_PUBLIC_DARK_MODEfalseUse this to enable dark mode theme.true
NEXT_PUBLIC_THEME_SWITCHING_ENABLEDfalseUse this to allow users to toggle between the dark and light theme. If NEXT_PUBLIC_DARK_MODE is enabled then that will be the default theme selected.true
NEXT_PUBLIC_PRIMARY_COLORfalseUse this to select your primary color.default, red, orange, lime, green, blue
NEXT_PUBLIC_FONT_FAMILYfalsePrimary sans font used in your marketplace.Inter, Montserrat, Open Sans, Playfair Display, Roboto, Druk, Nunito Sans, Lucida Grande, Gazpacho, Frank Ruh Libre, Chalkboard, Gothicus Roman, Styrene B Black, Montserrat Uppercase Bold Italic
NEXT_PUBLIC_BODY_FONT_FAMILYfalseSecondary font family used in your marketplace.Inter, Montserrat, Open Sans, Playfair Display, Roboto, Druk, Nunito Sans, Lucida Grande, Gazpacho, Frank Ruh Libre, Chalkboard, Gothicus Roman, Styrene B Black, Montserrat Uppercase Bold Italic
NEXT_PUBLIC_FONT_URLSfalseUse in conjunction with NEXT_PUBLIC_FONT_FAMILY and NEXT_PUBLIC_BODY_FONT_FAMILY to pull in a remote font, using services like google fonts, adobe fonts etc.,
NEXT_PUBLIC_BANNER_IMAGEfalseThe background banner image used on collection pages. If not set this will use the default collection banner.
NEXT_PUBLIC_DISABLE_COLLECTION_BGfalseUse this to hide the background banners on collection pages.true
NEXT_PUBLIC_TAGLINEfalseA tagline to be displayed in the homepage. Only available if NEXT_PUBLIC_COLLECTION and NEXT_PUBLIC_COMMUNITY are unset.Buy, sell and collect NFTs!
NEXT_PUBLIC_FOOTER_ENABLEDfalseIf enabled, a footer will be displayed on the homepage and the list of trending collections will be capped at 100.true

SEO Configuration

Environment VariableRequiredDescriptionExample
NEXT_PUBLIC_META_TITLEfalseThe text used in the tag.Reservoir Market | Open Source NFT Marketplace
NEXT_PUBLIC_META_DESCRIPTIONfalseThe text used in the meta descriptionReservoir Market is an open source NFT marketplace built with Reservoir.
NEXT_PUBLIC_META_OG_IMAGEfalseThe image used in the meta og images .

Run the App

Once you have your setup ready, run:

With yarn:

$ yarn dev

With npm:

$ npm run dev

Deploy with Vercel

This is a Next.js app that can be easily deployed using Vercel. For more information on how to deploy your Github reposistory with Vercel visit their docs.

(back to top)


Twitter: @reservoir0x
Discord: Reservoir Protocol
Project Link: Reservoir Protocol

(back to top)

What’s Next