Create NFT music album with Truffle Box
Truffle Boxes contain boilerplate code that sets up your development environment to support popular web3 technologies. They are basic web3 applications that developers can spin up quickly to get started with web3.
The following tutorial uses the Infura NFT SDK to build a simple React web app that creates and displays NFT music album collections.
- Install the Truffle Box and create your project directory:
truffle unbox infura-nft-sdk my_project
cdinto your project directory.
.envfile at the project root which stores your project authorization details from a Web3 API project.
- We are using the Goerli testnet.
- Ensure you have enough ETH in your account for the network.
- Connect the app to your MetaMask wallet with the button in the top right.
Connected Truffle Box app
- Click Add New Contract.
Add new contract
Currently, we have one contract type. More coming soon.
- Click Unlimited.
Select contract type
- Add the Token Name and Token Symbol.
- See the section below on Create your own hosted content with Truffle preserve for more info on creating NFT content and hosting it.
- We are using a ready-baked contract URI hosted on IPFS for the examples.
- For more information on hosting NFT data on IPFS, see the IPFS documentation and check out getting set up on the Infura IPFS network.
- Click Deploy.
- Wait for the deployment to complete.
NFT contract deploying
- Click the new Contract menu item.
Contract menu after successful deployment
- Add the URI link and click Mint.
Mint an NFT
We're using ready-baked IPFS URIs to mint NFT music files.
Once you have minted the whole collection, set an optional royalty value that goes to the artist when someone buys an NFT. Add the value for royalty, where 100bps = 1% and 10,000bps = 100%, and click Set Royalties.
Set royalty for the collection
The royalty value applies to every NFT in the collection.
- Click Album in the menu.
- View the minted NFTs.
My music NFT album
The application does not maintain user account information. When you reconnect MetaMask, you have to load the contract into the app once more.
- To get the contract address, check your activity on MetaMask, find the deployment transaction, and follow the link to Etherscan.
Contract Deployment transaction in MetaMask
- Copy the contract address.
Contract details on Etherscan
- In the Truffle Box UI menu, select Load Contract, click Unlimited, paste the contract address, and click Load.
- The Truffle Box loads your NFT collection in the Album view.
NFT Album view
The application supports uploading user-defined NFT content to IPFS with the
- Navigate to the ipfs folder to see the example content.
IPFS content folder
- Replace the artwork and music files with your own.
- Remove the music definition json files.
- Edit the
contract-meta.jsonfile with your own information.
"name": "Infura Melodies",
"description": "Experience (and own) the wide vocal range of the Infura band.",
"image": "thumbnail image",
"external_link": "link to collection info",
You can define royalties here instead of in the UI, along with the address for the recipient.
From the project root, run the following command.
npm run preserve
The script adds the
contract-meta.jsonfile, all images and sound files to IPFS, and returns the hashes of the hosted files.
Next, create the
jsondescriptors that reference the IPFS files for each NFT.
"description": "A relaxing sound to meditate to",
"external_url": "link to a page for this nft",
"name": "Primordial Nuisance",
Remove all other files, and run
preserveagain to upload the music NFT json descriptions separately, and use the returned hashes to mint your NFTs.