🖼️

Full Stack NFT Marketplace on Ethereum with Polygon, Next.js, and Tailwind CSS

Jul 6, 2024

Full Stack NFT Marketplace on Ethereum with Polygon, Next.js, and Tailwind CSS

Introduction

  • Project Overview: Building a full-stack NFT marketplace on Ethereum, using:
    • Polygon: for scalability
    • Next.js: as the framework
    • Tailwind CSS: for styling
    • Hardhat: for the Solidity development environment
    • Ethers: for the client library to interact with the blockchain
    • IPFS: for file uploads and downloads
  • Importance:
    • Shows how to integrate various technologies together
    • Highlights the value of NFTs for both digital and physical goods
    • Demonstrates the benefits of using scalability solutions like Polygon

Project Setup

Creating Next.js App

  • Command: npx create-next-app nft-marketplace
  • Directory Change: Navigate into the created directory
  • Dependency Installation:
    • Ethers
    • Hardhat
    • Hardhat Waffle: @nomaticlabs/hardhat-waffle
    • Ethereum Waffle
    • Chai: for testing
    • Hardhat Ethers: @nomadiclabs/hardhat-ethers
    • Web3 Modal: for wallet selection
    • OpenZeppelin Contracts
    • IPFS HTTP Client
    • Axios: for making HTTP requests
    • Tailwind CSS
    • PostCSS
    • Autoprefixer

Tailwind CSS Configuration

  • Initialization: npx tailwindcss init -p
  • Files Created:
    • tailwind.config.js
    • postcss.config.js
  • Base Class Import: Add @tailwind base, @tailwind components, and @tailwind utilities in styles/globals.css

Hardhat Setup

  • Command: npx hardhat
  • Options: Create a sample project, add gitignore
  • Files Created:
    • Contracts
    • Hardhat configuration: hardhat.config.js
    • Sample scripts and tests
  • Configuration: Customize for Polygon:
    • Networks configuration (localhost, mumbai, mainnet)
    • Chain ID for Hardhat
    • Accounts setup using private keys

Wallet Setup

  • Install: MetaMask extension
  • Create Account
  • Export Private Key: Needed for Hardhat configuration

Solidity Contracts

NFT.sol

  • Imports: OpenZeppelin ERC-721, storage extensions, and Counters
  • Constructor: Accepts marketplace address
  • Function: createToken for minting NFT tokens

NFTMarket.sol

  • Imports: Counters, ERC-721, ReentrancyGuard from OpenZeppelin
  • Struct: Define MarketItem properties
  • Mappings: For market items
  • Functions:
    • createMarketItem
    • createMarketSale
    • Viewing functions for unsold, bought, and created items

Testing

  • Test Script: Simulates the creation, listing, and sale of NFTs
  • Command: npx hardhat test

Frontend Development

Basic Setup

  • Run the App: npm run dev
  • Pages Directory:
    • index.js: Main home page
    • app.js: Layout and navigation setup

Navigation and Layout

  • Link Component: For routing between pages
  • Navigation Links: Home, Create Item, My Assets, Creator Dashboard

Fetching NFTs

  • Dependencies: Ethers, React hooks, Axios, Web3Modal
  • Config: Import addresses and ABIs
  • State Management: Using useState and useEffect
  • Load NFTs: Fetch data from smart contracts and set state
  • Buy NFT: Function to connect wallet and execute buy transactions

Creating Items

  • Form: For NFT metadata and file uploading
  • IPFS: Upload and save item metadata
  • Create Item Function: Save item details to IPFS and create token
  • Create Sale Function: List item for sale on marketplace

Creator Dashboard

  • Multiple Views: For created, unsold, and sold items
  • Fetch and Display Data: Similar approach as fetching NFTs but with additional filters

Deployment to Polygon

  • Network Configuration: Use Mumbai testnet
  • Funding: Use Mumbai faucet for test Matic
  • Contract Deployment: Adjust RPC provider and run deployment script for testnet

Testing and Final Deployment

  • Testing on Mumbai: Validate functionality with test transactions
  • Mainnet Deployment: Switch network and deploy with real Matic

Conclusion

  • Comprehensive Project: Covered end-to-end creation and deployment of an NFT marketplace
  • Practical Application: Using various blockchain tools and libraries together
  • Learning Outcome: Understanding both frontend and backend integration for dApps