How to create your own NFT Auction House using ZORA

We are excited to announce the release of our decentralized Next.js template! The intention behind its design is to get you started with the display of any ERC-721 token collection using ZORA's rendering components: @zoralabs/nft-components and NFT data hooks: @zoralabs/nft-hooks. We have included the necessary Web3 components so users can connect their wallets and manage the NFT's that they own within a specified collection.

Over the past few weeks, we launched a series of permissionless auction houses, Punks.house and Blit.house, both of which have allowed us to iterate on our vision of an open permissionless auction house. The community responded with an eagerness to spin up similar auction houses for various collections. We are now responding in kind with this repo.

The prerequisites for use are fluency in Next/React.js and Vercel or another similar serverless platform. If you have that covered, then all you need is the address of the ERC-721 token contract you would like to make available for auction.

• Example using Zora’s Testnet Contract ID
• Github repository
• Figma template to get you started with your designs

The best part? On ZORA, you only pay the gas fee to list.

Getting Started

Jump into your console and use the below command to bootstrap a fresh repo with this Next.js template:

yarn create next-app [project-name] -e https://github.com/ourzora/create-auction-house 

# or 

npx create-next-app [project-name] -e https://github.com/ourzora/create-auction-house

The application accepts the below environment variables. You WILL however need to specify the network ID along with either a Curator ID or a Contract Address. Once you have created your repo locally, make sure to install all dependencies by running yarn.

Next, modify the values below in the .env file:

NEXT_PUBLIC_APP_TITLE=[default app title]

NEXT_PUBLIC_DEFAULT_DESCRIPTION=[default meta description]

NEXT_PUBLIC_BASE_URL=[production-url]

# NETWORK ID: 1 for Ethereum Mainnet / 4 for Rinkeby Testnet

NEXT_PUBLIC_NETWORK_ID=1

NEXT_PUBLIC_CURATORS_ID=[The address of a curator or creator]

NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS=[the address of the token contract]

To run the development server locally, use the below command:

yarn dev

Open localhost:3000 with your browser to see the result. The app automatically updates as you edit the files.

Going Live

The easiest way to deploy your auction house is to use the Vercel Platform. Check out the Next.js deployment documentation for more details. Don't forget to add the necessary environment variables.

Make it Yours

It’s been incredible to launch these custom auction sites. Extending the story of the artworks with unique designs and creative approaches to styling and interactivity has proven to be engaging and energizing. While a template should be relatively simple and impartial, we did leave some of the more custom aspects of the codebase in place to serve as a starting point or something to overwrite with your own preferences. Below are some extras:

• Start off with some static designs using this .sketch design template – if you prefer Figma you can import the sketch.app file.
• Minimal styling has been added to the styles/GlobalStyles.tsx, we love @emotion as it integrates with @zoralabs/nft-components – go ahead and uncomment the styling in styles/theme.ts to see it in action.
• A few additional styling patterns have been included: the usage of css variables, styling mixins, and styled components. None of these are necessary – feel free to style as you wish!
• An example page is included – custom-thumbnails.tsx – in this page we are adding some css classes to the NFT thumbnails based on auction state. Console log the NFT object token object to peep the data you have to work with.
• We've included a markdown rendering component to allow for the easy addition of formatted copy. See it in action in the about page.

Please leave feedback in the repository’s issues. And if you think there are areas to improve, submit a pull request.

We can’t wait to see what auctions the community kicks off next with this template. Have fun!