Code Monkey home page Code Monkey logo

my-cool-auction-house's Introduction

Create Auction House ☼☽

Auction House Montage

A repo to bootstrap your own permissionless auction house with the Zora protocol. This template will get you started with the display of any Erc721 token collection using Zora's rendering components and data hooks along with the inclusion of web3 components so users can connect their wallets and manage NFT's that they own within a specified collection.

More about the Zora Auction House on Mirror

Features

  1. uses @zoralabs/nft-components to render NFTs and auction info.
  2. includes @zoralabs/nft-hooks for more custom applications.
  3. uses @zoralabs/manage-auction-hooks for auction interactions.
  4. uses @zoralabs/simple-wallet-provider for an easy wallet login flow.
  5. uses @emotion: emotion.sh for styling.
  6. uses typescript
  7. based on next.js

Getting Started

Simply use this repo as a next.js template replacing [project-name] with the title of your auction house.

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 need to specify the network ID along with either a Curator ID or a Contract Address:

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]

NEXT_PUBLIC_RPC_URL=[address to web3 rpc url provider]

If you include a rpcUrl on the manage auction hooks provider it enables walletconnect, without that rpcUrl walletconnect will not work work. We have set included and .env variable for this: NEXT_PUBLIC_RPC_URL. Further reading on RPC providers / Alchemy Ethereum API Docs.

Develop

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Or click the button below:

Deploy with Vercel

...Don't forget to add the necessary environment variables!

Extras!

  • Start of 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 & styled components. None of this is 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.

  • We've included a markdown rendering component to allow for the easy addition of formatted copy. See it in action in the about page.

    import readMe from '../README.md'
    ...
    export default function About() {
      return (
        <>
          ...
            <Markdown markdown={readMe}/>
          ...
        </>
      )
    }

my-cool-auction-house's People

Contributors

dblodorn avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.