NFT Minting Front-end
In this tutorial you’ll learn how to create a simple NFT front-end and mint a "Go Team" NFT on the NEAR blockchain straight from your web browser.
The app is fairly simple: the user signs in and hits the Mint NFT button. Once the user hits the mint button, a "Go Team" NFT is minted and sent to their NEAR Wallet.
Smart Contract code
The contract methods used in this application are as follows:
nft_mint: Function used to mint tokens.
check_token: Custom function created to check for the existence of a token. This helps to ensure one token per user.
The front-end of the contract was implemented using
create-near-app. React Bootstrap was used for the styling of the application.
To bootstrap your React front-end, run the following command on your terminal:
npx create-near-app --frontend react --contract rust
Then, simply import the contract files from the
7.events branch, and you’ll have the needed structure to run the application.
Upon mounting the application’s components, the app checks for the existence of a non-fungible token.
If no prior NFT has been minted, the mint button will be available for use.
Here is the function behind the mint button. The meta data has been filled out for the user already:
token_idis set by the user’s account id,
- and the
medialink is hard-coded to a
goteam-gif.gifhosted on IPFS.
After hitting the Mint NFT button the user will be able to check out the newly minted NFT at wallet.testnet.near.org, under the Wallet’s
You can find the complete application repository on GitHub to clone and run.
In the configuration folder you can see that this smart contract has been deployed to
- You can also check out the explorer link here to see how many individuals have been minting their own Go Team NFTs. Happy Minting!
Clone and run this example from https://github.com/near-examples/nft-tutorial-frontend