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.
1. Prerequisites
A Web3 API project on Infura.
​Truffle installed.
A MetaMask wallet for testing purposes.
2. Install the Truffle Box
Install the Truffle Box and create your project directory: 
truffle unbox infura-nft-sdk my_project
cd into your project directory.
cd my_project
3. Authorize your Infura account
Create a .env file at the project root which stores your project authorization details from a Web3 API project.
REACT_APP_INFURA_PROJECT_ID=<API-KEY>
REACT_APP_INFURA_PROJECT_SECRET=<API-KEY-SECRET>
4. Run the application
We are using the Goerli testnet. 
Ensure you have enough ETH in your account for the network.
Check the docs for the current supported networks.
Run npm start. 
Connect the app to your MetaMask wallet with the button in the top right. 
Connected Truffle Box app
5. Add new contract
Click Add New Contract.
Add new contract
6. Select contract type
Currently, we have one contract type. More coming soon.
Click Unlimited.
Select contract type
7. Deploy contract
Add the Token Name and Token Symbol.
Add the hosted Contract URI link. You can use the example contract URI link.
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.
Deploy contract
Wait for the deployment to complete.
NFT contract deploying
8. Mint NFTs
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.
9. View the NFT album
Click Album in the menu.
View Album
View the minted NFTs.
My music NFT album
10. Load a contract
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.
Load contract
The Truffle Box loads your NFT collection in the Album view.
NFT Album view
11. Create your own hosted content with Truffle preserve
The application supports uploading user-defined NFT content to IPFS with the truffle preserve command.
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.json file with your own information. 
Example contract-meta.json
{
    "name": "Infura Melodies",
    "description": "Experience (and own) the wide vocal range of the Infura band.",
    "image": "thumbnail image",
    "external_link": "link to collection info",
    "seller_fee_basis_points": 1000,
    "fee_recipient": "0x60793cAbCAD5C05AF694c03502ee44609E521244"
}
You can define royalties here instead of in the UI, along with the address for the recipient.
12. Run the Truffle preserve script
From the project root, run the following command.
npm run preserve
The script adds the contract-meta.json file, all images and sound files to IPFS, and returns the hashes of the hosted files.
Next, create the json descriptors that reference the IPFS files for each NFT.
Example music-1.json
{
    "description": "A relaxing sound to meditate to",
    "external_url": "link to a page for this nft",
    "image": "https://bafybeigiywxygpfr55gxuje7q7kkqlea3epf7nmywpdeic7wkyujupghtq.ipfs.infura-ipfs.io/",
    "name": "Primordial Nuisance",
    "animation_url": "https://bafybeidn3lefyybhwtiwfhxfi6rfej2hmntojbxf6aktwv6ncqvttvl3jm.ipfs.infura-ipfs.io/"
  }
Remove all other files, and run preserve again to upload the music NFT json descriptions separately, and use the returned hashes to mint your NFTs.

Last modified 7mo ago