Using Web3.js with a Non-Fungible Token (NFT) Marketplace

Creating an NFT marketplace involves several steps, including setting up a smart contract for the NFTs, integrating Web3.js for blockchain interactions, and building a user interface. This guide will walk you through the process of building a simple NFT marketplace using Web3.js and Solidity.

1. Prerequisites

Before you start, ensure you have the following:

  • Node.js and npm installed on your machine
  • A local Ethereum node or access to a test network (e.g., Ganache)
  • Basic understanding of Solidity and JavaScript

2. Set Up Your Project

Create a new project directory and initialize it:

mkdir nft-marketplace
cd nft-marketplace
npm init -y

3. Install Web3.js

Install the Web3.js library using npm:

npm install web3

4. Create the Smart Contract

For this example, we will create a simple NFT marketplace smart contract. Below is the Solidity code for the contract:

pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract NFTMarketplace is ERC721URIStorage, Ownable {
    uint public tokenCounter;

    constructor() ERC721("NFTMarketplace", "NFTM") {
        tokenCounter = 0;
    }

    function createNFT(string memory tokenURI) public onlyOwner returns (uint) {
        uint newItemId = tokenCounter;
        _safeMint(msg.sender, newItemId);
        _setTokenURI(newItemId, tokenURI);
        tokenCounter++;
        return newItemId;
    }
}

Deploy this contract using Remix IDE or Truffle to your local Ethereum node or a test network.

5. Create the Frontend

Create an index.html file in your project directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NFT Marketplace</title>
    <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>NFT Marketplace</h1>
    <input type="text" id="tokenURI" placeholder="Token URI">
    <button id="createNFTButton">Create NFT</button>
    <p id="statusMessage"></p>
</body>
</html>

6. Create the JavaScript File

Create an app.js file in your project directory:

const Web3 = require('web3');

// Connect to your local Ethereum node or test network
const web3 = new Web3('http://localhost:8545'); // Change to your node URL

// Replace with your deployed contract address
const contractAddress = '0xYourContractAddress'; 

// ABI of the NFTMarketplace contract
const contractABI = [ 
    {
        "inputs": ["string"],
        "name": "createNFT",
        "outputs": ["uint"],
        "stateMutability": "nonpayable",
        "type": "function"
    }
];

// Create contract instance
const nftMarketplace = new web3.eth.Contract(contractABI, contractAddress);

// Function to create an NFT
async function createNFT() {
    const accounts = await web3.eth.getAccounts();
    const tokenURI = document.getElementById('tokenURI').value;

    await nftMarketplace.methods.createNFT(tokenURI).send({ from: accounts[0] });
    document.getElementById('statusMessage').innerText = 'NFT created successfully!';
}

// Add event listener
document.getElementById('createNFTButton').addEventListener('click', createNFT);

7. Run Your NFT Marketplace

To run your NFT marketplace, you can use a simple HTTP server. If you have Python installed, you can run:

python -m http.server 8000

Then, open your browser and navigate to http://localhost:8000 to interact with your NFT marketplace.

8. Conclusion

By following these steps, you can create a simple NFT marketplace using Web3.js. This marketplace allows users to create NFTs by providing a token URI, demonstrating the capabilities of non-fungible tokens and decentralized applications.