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.
App Overview
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 code for the NFT smart contract can be found in the Zero to Hero NFT tutorial's GitHub repository, under the main
branch.
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.
Front-end
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 main
branch, and you'll have the needed structure to run the application.
Start
Upon mounting the application's components, the app checks for the existence of a non-fungible token.
Loading...
If no prior NFT has been minted, the mint button will be available for use.
Mint button
Here is the function behind the mint button. The meta data has been filled out for the user already:
token_id
is set by the user's account id,- and the
media
link is hard-coded to agoteam-gif.gif
hosted on IPFS.
Loading...
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 Collectibles
tab.
Final remarks
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 nft-frontend-simple-mint.blockhead.testnet
:
Loading...
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