How to Build your own Auction House

0x7A6f726121030CaDf9923333d5b6F29277024027

zora.mirror.xyz

May 28th, 2021

With the release of Auction House, Zora is working to move ownership from centralized auction houses to decentralized auction houses. However, the smart contracts are only the first piece of the puzzle, and we're setting out to fill in the blueprints for anyone to spin up and remix their own auction house experience.

Creators and curators can now seamlessly create their own permissionless, customizable auction house experiences. Zora has created a suite of technical tools for accessing, rendering, and contextualizing both auction information and media information.

These libraries are open for the world to use and improve – MIT-licensed and developed in public.

This code is free to use, inspect, remix, and to make your own.

Foundation + Scaffolding: Accessing the data

Fetching blockchain data is difficult – we have wrapped all the difficult work of fetching and organizing blockchain data of the Zora Auction House and Media into our @zoralabs/nft-hooks library. This library makes fetching media and auctions a one-line React or Javascript library call. This library will allow for rapid building of auction houses that have a strong, shared foundation.

Key features of `nft-hooks`:

🌐 Decodes blockchain auction data status and pricing information
💰 USD and ETH values are associated from Uniswap
✨ Intelligently handles caching and batching
🌈 Gracefully handles rendering and loading states
⚙️ Configuration-optional: works out of the box
🧰 Works both in server and client-side environments
🛠 Allows for server-side cached data rehydration and revalidation

Finishings: Building the user interface

Even with all the data, web3 is about interaction with user interfaces in browsers. We've followed up the nft-hooks library with nft-components. These libraries go hand in hand - components show data that is fetched from NFT hooks. nft-components creates an accessible design language and flexible auction-focused components to seamlessly integrate NFTs and marketplaces into community and artist's spaces.

These components work with minimal code to get started and provide a full suite of features to render all the details found on the Zora's full data page and all the information shown on the Zora thumbnail view as well.

This library is also open and owned by the community, pulling in as few external dependencies as possible. The theming, text, styles, and media supported are completely configurable by the user while also working with zero configuration out-of-the-box.

Features:

🖼 Handles displaying text, audio, video, and image content types
- Includes play/pause/mute/un-mute functionality
⏳ Handles partially loaded content gracefully
💅 Supports theming, translation, and complete styling
🎁 Full preset components can be used or broken down elements with custom data display elements are available.

Make it your own

Much like how Uniswap gave anyone the ability to create their own exchange, Zora gives anyone the ability to create their own Auction Houses. You can create an Auction House that can curate and auction any and all ERC721 tokens.

This means there is an entirely new universe of experiences that can be created.

Here are some Auction House ideas:

Generative art
Decentralized Land
Fonts
AR Objects
DAO-owned
Anything, really ✨

Looking ahead, we're planning on removing further barriers for individuals to participate in the NFT ecosystem. Soon, to make your own auction house, coding will be optional.