Skip to main content

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.
info

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​

info

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.
info

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

danger

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"
}
info

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 updated on