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.
- Deployed contracts
- First txn (Blocto)
- Second txn (Lilico)
- Third txn (Lilico)
- 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 toAlice
account, needed to switch it manually toEmulator-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
- 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