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