Before we begin, it's important to note that building a complete DApp involves a wide range of skills and technologies, including blockchain development, smart contract programming, and front-end development. This guide will provide a basic overview of the steps involved, but keep in mind that it may require further research and learning to fully understand and implement each component. Let's get started!
Step 1: Set up the development environment
To start, ensure you have the following tools installed:
A text editor or integrated development environment (IDE) for writing code (e.g., Visual Studio Code, Sublime Text)
Node.js and npm (Node Package Manager) for installing dependencies
A web browser for testing the DApp
Step 2: Initialize the project
Open your terminal and create a new project folder. Navigate to the folder and run the following command to initialize a new Node.js project:
npm init -y
Step 3: Install necessary dependencies
In your project folder, run the following commands to install the required dependencies:
npm install web3
npm install truffle-hdwallet-provider
These dependencies are essential for interacting with the Ethereum blockchain and deploying smart contracts.
Step 4: Write the smart contract
Create a new file called NFTContract.sol and add the following code:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
contract NFTContract is ERC721URIStorage {
using Counters for Counters.Counter;
Counters.Counter private _tokenIds;
constructor() ERC721("NFTContract", "NFTC") {}
function mintNFT(address recipient, string memory tokenURI)
public
returns (uint256)
{
_tokenIds.increment();
uint256 newTokenId = _tokenIds.current();
_mint(recipient, newTokenId);
_setTokenURI(newTokenId, tokenURI);
return newTokenId;
}
}
This is a simple implementation of an ERC721-based NFT contract using the OpenZeppelin library. It allows you to mint new NFTs with a unique token ID and associated metadata.
Step 5: Write the JavaScript code
Create a new file called app.js and add the following code:
const Web3 = require("web3");
const HDWalletProvider = require("truffle-hdwallet-provider");
const contractABI = require("./build/contracts/NFTContract.json");
const mnemonic = "your mnemonic phrase";
const infuraURL = "https://mainnet.infura.io/v3/your_infura_project_id";
const provider = new HDWalletProvider(mnemonic, infuraURL);
const web3 = new Web3(provider);
const contractAddress = "your_contract_address";
const contractInstance = new web3.eth.Contract(
contractABI.abi,
contractAddress
);
async function mintNFT(tokenURI) {
const accounts = await web3.eth.getAccounts();
const recipient = accounts[0];
const result = await contractInstance.methods.mintNFT(recipient, tokenURI).send({ from: recipient });
console.log("NFT minted:", result);
}
// Call the mintNFT function with the desired token URI
mintNFT("https://your-token-uri.com");
Replace "your mnemonic phrase" with your own mnemonic phrase (for accessing your Ethereum account) and "your_infura_project_id" with your Infura project ID. Additionally, replace "your_contract_address" with the address where you deployed the NFT contract.
This JavaScript code initializes the necessary dependencies, connects to the Ethereum network using your mnemonic and Infura project, and interacts with the deployed NFT contract to mint a new NFT.
Step 6: Create an HTML file for the user interface
Create a new file called index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFT Web3 Pinterest DApp</title>
</head>
<body>
<h1>NFT Web3 Pinterest DApp</h1>
<form id="mintNFTForm">
<input type="text" id="tokenURIInput" placeholder="Enter Token URI">
<button type="submit">Mint NFT</button>
</form>
<script src="app.js"></script>
</body>
</html>
This HTML code creates a basic user interface with an input field for the token URI and a button to trigger the NFT minting process.
Step 7: Test the DApp
To test the DApp, open your terminal, navigate to the project folder, and run the following command to start a local web server:
npx serve
This command serves the HTML file at a local URL. Open your web browser and visit the provided URL.
You should see a form with an input field and a "Mint NFT" button. Enter a token URI in the input field (e.g., a link to an image hosted online) and click the button. Check the console in the browser's developer tools to see the result of the minting process.
Congratulations! You have created a simple NFT Web3 Pinterest DApp using HTML, JavaScript, and a smart contract. Remember that this is just a starting point, and there are many other aspects you can explore and improve upon, such as adding authentication, integrating with IPFS for decentralized file storage, or enhancing the user interface.
Please note that deploying smart contracts and interacting with the Ethereum blockchain may involve costs, such as gas fees. Ensure you have a funded Ethereum account to cover any associated expenses.
Happy coding!
Top comments (0)