Create your own custom NFT minting page using thirdweb's NFT Drop contract

Related tags

Learning resource nft-drop
Overview

Customizable NFT Drop Minting Page

In this example, you can create your own NFT Drop minting page just by customising the template with your branding, and plugging in your NFT Drop contract address.

Tools

Using This Repo

To create your own version of this template, you can use the following steps:

Run this command from the terminal to clone this project:

npx create-tw-app --example custom-minting-page

1. Deploy Your Own NFT Drop on thirdweb

Head to the thirdweb dashboard and create your own NFT Drop contract.

You can learn how to do that with our guide Release an NFT drop on your own site without writing any code.

Be sure to configure a name, description, and image for your NFT drop in the dashboard.

2. Configure the styles to your branding

You can fully customize the colors and style of this template by editing the values in the globals.css file.

You can configure:

  • The color of the background with --background-color
  • The color of the text with --text-color
  • The color of the button (is a gradient from primary to secondary color) with --color-primary and --color-secondary
  • The font with --font
  • The border colors with --border-color

3. Plug in your NFT Drop contract address

Replace the value of the myNftDropContractAddress inside index.tsx with your NFT Drop contract address you can find in the dashboard.

Join our Discord!

For any questions, suggestions, join our discord at https://discord.gg/thirdweb.

You might also like...

Ethereum NFT minting bot 🍌 🔥

Mineth – Open source Ethereum bot for minting NFTs. This repository provides a code for deploying it on server and calling from your local network. Fo

Aug 6, 2022

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

Jun 21, 2022

PokemonNFT started as Buildspace Project - "Create your own mini turn-based NFT browser game" - ROSE Emerald Paratime Testnet

PokemonNFT started as Buildspace Project -

Welcome to PokemonNFTGame 👋 Buildspace Project - Create your own mini turn-based NFT browser game ✨ Demo Install npm install Usage npm run dev Blockc

Oct 3, 2022

Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

💎 Fullstack Dynamic NFT Mini Game 🎮 💎 Using Diamond Standard Play On 💎 🎮 ⏩ http://diamond-dapp.vercel.app/ Project Description 📝 Fullstack Dynam

Dec 23, 2022

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

Oct 23, 2022

Reward your community using NFTs and thirdweb's signature based minting.

Reward your community using NFTs and thirdweb's signature based minting.

Community Rewards Example Introduction In this guide, we will utilize signature-based minting of NFTs as a mechanism to reward users of a specific com

Jan 2, 2023

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia 💊 Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Dec 29, 2022

Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .

Nov 27, 2022

Solidity NFT whitelist contract example using MerkleTree.js for constructing merkle root and merkle proofs.

MerkleTree.js Solidity NFT Whitelist example Allow NFT minting only to whitelisted accounts by verifying merkle proof in Solidity contract. Merkle roo

Dec 29, 2022
Comments
  • Type error: Property 'quantityLimitPerTransaction' does not exist on type

    Type error: Property 'quantityLimitPerTransaction' does not exist on type

    Hello @jarrodwatts

    I'm getting this error now too when exporting! Any idea? Thanks

    `./pages/index.tsx:124:47 Type error: Property 'quantityLimitPerTransaction' does not exist on type '{ metadata?: string | undefined; snapshot?: { price?: string | undefined; currencyAddress?: string | undefined; address: string; maxClaimable: string; }[] | null | undefined; maxClaimableSupply: string; ... 8 more ...; currencyMetadata: { ...; }; }'.

    122 | quantity >= 123 | parseInt(

    124 | activeClaimCondition?.quantityLimitPerTransaction || "0" | ^ 125 | ) 126 | } 127 | >`

    opened by 3web3 2
  • The demo is not working! It stays on the loading screen!

    The demo is not working! It stays on the loading screen!

    Hello guys,

    I am working on this repo.

    It works successfully on localhost. However, when I get build with next.js and export it, it stays as "loading". Same with the current demo on github right now.

    Is there anyone who has experienced the same problem? Your help is really appreciated.

    opened by 3web3 7
Owner
thirdweb examples
thirdweb examples
GitHub https://custom-minting-page.thirdweb-example.com
Use thirdweb's token, edition drop, and a custom contract using thirdweb deploy to build a Play-to-Earn game!

thirdweb Play-to-Earn Example This example project is a simple Play-to-Earn (P2E) game! The Idea The game is a "mining" game, where your character min

thirdweb templates 28 Jan 2, 2023
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
CandyPay SDK lets you effortlessly create NFT minting functions for Candy Machine v2 collections.

@candypay/sdk CandyPay SDK lets you effortlessly create NFT minting functions for Candy Machine v2 collections. Simulate minting transactions for mult

Candy Pay 33 Nov 16, 2022
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022
This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

Solana-NFT minting Dapp Create your own NFT's on Solana, and mint them from your custom front-end Dapp. Tools used Metaplex -> Metaplex is the NFT sta

Udit Sankhadasariya 12 Nov 2, 2022
Use signature-based minting to allow users who have contributed to your github repositories to claim an NFT!

GitHub contributors NFT rewards This project demonstrates how you can build a full-stack web3 application that allows github contributors of certain r

thirdweb templates 8 Nov 5, 2022
This React-Based WebPage allows the client/user system to create their own blog, where users can publish their own opinions.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Gauri Bhand 4 Jul 28, 2022
Bootstrap an NFT minting site with Merkle tree whitelists.

??️ nft-merkle-whitelist-scaffold Bootstrap an NFT minting site with merkle tree whitelists. Go to nft-merkle-whitelist.vercel.app to see the latest d

jaclyn 87 Dec 24, 2022
This is NFT minting and marketplace website.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

NAJI2329 15 Oct 10, 2022
Elven Tools Dapp - Elrond blockckchain frontend dapp demo. Primarily for NFT minting, but it can be used for other purposes.

Elven Tools Dapp Docs: elven.tools/docs/landing-page.html Demo: dapp-demo.elven.tools Sneak peek: youtu.be/ATSxD3mD4dc The Dapp is built using Nextjs

Elven Tools 24 Jan 1, 2023