NFT Market Dapp (Solidity & React)

Step 1: In this exercise, we will create a simple Ethereum Dapp (Solidity Smart Contract + React UI + Node Js backend) that can buy and tranfer NFTs on the blockchain. We will be using hardhat to deploy the smart contract on a local Ganache blockchain. We will then use React, to build a web app that can interact with the deployed smart contract. We will use Metamask to interact with the smart contract and use node js backend .

Step 2: First step is to create a hardhat project. Normally, we can use 'npx hardhat' command to create a hardha project with new hardhat.config.js file. But in this case, we will be using a pre-created hardhat project.

Step 3: Clone already created hardhat project from github repo.

Step 4: Switch to 'VS Code' and check the cloned 'solidity-nodejs-NFT-dapp' directory. You will be able to see 'contact'and 'webapp' directories. In this contract all the directories are related to hardhat or contract and webapp is related to react app.

Step 5: Open the Smart Contract written in solidity language in 'contracts' folder. The smart contract consists of the functions used for minting NFTs and tranferring NFTs to other ethereum account. Minitng refers to buying an NFT

Step 6: Before running hardhat, we will have to install all the dependencies. This can be done using 'npm install' command. In terminal, from the cloned directory (use 'cd contract), run the command.

Step 7: Compile the hardhat source code to generate byte code. This can be done using 'npx hardhat compile' command. Run the compilation command. Make sure you are in the cloned project directory.

Step 8: open a new terminal and run Ganache to start a local blockchain. Ganache is a personal blockchain for Ethereum development that can be used to deploy contracts, develop applications, and run tests.

Step 9: Let Ganache run in the current tab and Open a new terminal tab to proceed with the next steps.

Step 10: In this case, we have already added private keys of second account (accounts[1]) provided by Ganache to 'hardhat.config.js' file. This will be used to deploy the Smart contract to Ganache blockchain. We will have to change this with appropriate private keys if we want to deploy it on public Testnets or Mainnet.

Step 11: We are now ready to deploy this contract. Switch to 'scripts' folder. deploy.js is the deployment script written in Javascript which will deploy the smart contract using the hardhat configuration.

Step 12: Switch to terminal and run deployment script to deploy the smart contract on 'ganache' network.

Step 13: A successful deployment will generate a new file called 'NFTMarketplace.json' in the 'artifacts/contracts' folder. This file contains the contract address and ABI for the deployed smart contract.

Step 14: Contarct is deployed and we can interact with it. Now, let's proceed to create a react project to build a web app that can interact with the deployed smart contract

Step 15: At this point, the next step is to create a react project using 'npx create-react-app [project_name]' command. But, we already have a project named 'frontend' in the cloned repo. So, we will be using that.

Step 16: Change the project directory to frontend code of webapp from the root directory.

Step 17: Let's install create-react-app tool that makes it easy to bootstrap a new React project. Make sure to run this command in 'frontend' directory.

Step 18: Now, we need to make some changes in the 'webpack.config.js' file. This file is used to configure the webpack bundler. We need to exclude some files from bundling. Open './node-modules/react-scripts/config/webpack.config.js' file and add the following mentioned code rules section.

Step 19: Launch local app server. This will serve the web app over port 3000. Keep this command running in the terminal and use new terminal tab for next steps.

Step 20: Switch to 'localhost:3000' tab, press 'Go' button. If you are facing issues and seeing a warning in a browser regarding 'Embedded page not allowed', then please use the provided button to access this link in a new browser tab. Then, you should be able to see the frontend page.

Step 21: The react web app contains code to interact with the deployed 'NFTMarketplace' smart contract. However, we wil have to make some changes for it to work.

Step 22: Switch to VS Code and check 'App.js' in 'frontend/src' directory. This is the main app file. Replace the Contract address 'contractAddress' present in this file with the contract address acquired in the previous steps.

Step 23: Similarly, in folder 'frontend/src/components' you wil find two javascript files i.e. 'MintNFT.js', 'TransferModal.js' and 'OwnNFT.js' that are in components folder. As the name suggests, These are components to be used in the parent component 'App.js' (imported in lines 4-5). As the name suggests, 'MintNFT.js' use to mint NFTs on ethereum blockchain, whereas 'OwnNFT.js' and 'TransferModal' uses to show the NFTs that can be tranferred and on transferring a modal appears to get receivers address.

Step 24: Note: If the Nft shown to transfer is not minted already so the smart contract function first mint the NFT and then transfer it to the receiver address.

Step 25: As we will be using Metamask to interact with the smart contract, we will need to add our local Ganache network to Metamask. To do so, click on the provided button. This will take you through the process of adding a custom RPC to Metamask.

Step 26: Now, we need to add an address to Metamask which has some test Ether. Click on Account section of Metamask and select 'Import Account'.

Step 27: Enter the private key of the second account (accounts[1]) provided by Ganache. This will import the account to Metamask. This account has 1000 test Ether.

Step 28: Now, let's test it out. Go to localhost tab . You will be able to see some cute dog faces images which you can buy and tranfer each one is of 0.01 ether. SO click on Buy button and then confirm the transaction. Once it is done you will be able to see an alert and on metmask you can check your transaction;

Step 29: let's check out transfer functionality. Click on Transfer button and then enter the address of the receiver you can copy the below address which is account[2] and click on transfer. Once it is done you will be able to see an alert and on metmask you can check your transaction;

Step 30: So, we have successfully created a simple Ethereum Dapp that can buy and tranfer NFTs on the ethereum blockchain using ganache network.