🦅 BirdBlock Flow NFTs

Live demo: https://birdblock-nft.vercel.app/

My first dapp built on Flow - a NFT minting site that lets you easily mint bird NFTs. Log in with just an email through Blocto or sign up for a Lilico wallet to begin minting. Once your wallet is connected, mint an NFT and view your collection at the bottom of the screen!

I used Cadence (resource-oriented programming) for the Flow contracts/scripts/transactions, and React for the frontend. The GIFs are stored on IPFS through NFT.Storage and the site is deployed on Vercel.

📷 Screenshots

Landing page

Mint screen

Console when minting

🔗 Links

• Deployed contracts
• First txn (Blocto)
• Second txn (Lilico)
• Third txn (Lilico)

🚧 Friction Log

• Location of flow.json file. Not sure if it should be in root (first-flow-dapp) or FlowNFTs, but placing it in root seems to be working
• When running flow emulator, it would default connect to Alice account, needed to switch it manually to Emulator-account
• Got many errors when opening the repo up for first time. Needed to go to NonFungibleToken.cdc and deploy there first, then BottomShot.cdc, and finally mintNFT.cdc (since they're dependent on each other)
• Common fix for errors is to restart VS Code and flow emulator
• Lilico was originally giving invalid for chain flow-testnet --> wallet was on mainnet, needed to go to developer mode and switch to testnet
• Sometimes got transaction execute failed: [Error Code: 1101] cadence runtime error: Execution failed: error: panic: Could not get receiver reference to the NFT Collection but retried couple of minutes later and it worked. Not sure why.
• NFTs aren't showing in wallet or in Flowscan under transfers, not sure why
• First successful attempt was actually with Blocto, but it stopped working, rest of successful attempts were with Lilico
• With Blocto: DEPRECATION NOTICE Received FCL::CHALLENGE::RESPONSE, please use FCL:VIEW:RESPONSE for this and future versions of FCL. When I try to log in and click confirm, nothing happens afterwards.
• Not Flow related: I kept getting "The git repository has too many active changes, only a subset of Git features will be enabled", turns out forgot to add a .gitignore
• Need to create a destory button to delete NFTs
• It keeps printing out only the fourth NFT, not incrementing correctly
• Vercel wasn't working because I needed to switch framework from Other --> React, and add frontend as root directory

Note

• Everyone has the ability to mint and we're passing in the NFT metadata from the frontend
• Better way: use NFTMinter resource and store IPFS hash on contract + increment file number using Cadence so people can't mint all sorts of NFTs