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

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.
  • 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.
Copy link
On this page
1. Prerequisites
2. Install the Truffle Box
3. Authorize your Infura account
4. Run the application
5. Add new contract
6. Select contract type
7. Deploy contract
8. Mint NFTs
9. View the NFT album
10. Load a contract
11. Create your own hosted content with Truffle preserve
12. Run the Truffle preserve script