An NFT Marketplace built with NextJS, Hardhat and Solidity

Overview

🖼️ NFT Marketplace

https://img.shields.io/badge/made%20with-hardhat-yellow https://img.shields.io/badge/made%20with-nextjs-blue

This is a fullstack DApp NFT Marketplace built as a study project to learn more about blockchain and smart contract development.
Made with NodeJS, Hardhat, Solidity, ReactJS, NextJS and Vercel.

Demo

Demo

Checkout the live demo: https://nft-marketplace-markkop.vercel.app/


Market basic actions

You can create (mint) new tokens, uploading their image and metadata on IPFS using Pinata.
If you've created or bought an NFT, you may also sell it by setting a price and paying a listing fee.
When buying an NFT, the price will be transferred to the seller and the listing fee to the NFT Marketplace owner.
It's also possible to cancel a market item, transferring it back to the owner.


Lean NFTs Visualization

There are only two pages to view market's NFTs:

  • Market Page

Shows all NFTs that are available to be bought.
This page will show NFTs even if the user doesn't have the Metamask extension or isn't connected to the dapp.

NFTs available
NFTs available


  • My NFTs Page

Show all account's created, owned and on sale NFTs.
Here you keep track of NFT's you've created and check for how much they've been last sold and their current owner.
You can also list your current owned NFTs or cancel existing ones.
To view this page, you must have Metamask installed and have it connected to Polygon's Testnet network.

Created and owned NFTs
Created and owned NFTs


User Experience

If the Metamask extension is not detected on "My NFTs" page, a message with a download button will be prompted to the user.

Download metamask message and buttons Download metamask message and buttons


If the user has the extension, but is not connected, a message and a connect button will be shown.

Connect wallet message and button
Connect wallet message and button


If the Polygon's Testnet network is not detected, a message and an ADD/CHANGE network button will be available.

Add/Change Network message and button
Add/Change Network message and button


If the connected account is low on balance of Matic tokens, a message with a faucet link is provided.

A low on balance message with a faucet link
A low on balance message with a faucet link


When changing account or network, the page will refresh updating only the affected components.

Components update on account change
Components update on account change


When performing an action, a loading feedback is shown and the card updates to its new state automatically.

Buying an NFT and its feedbacks
Buying an NFT and its feedbacks

Easy Deployment

Frontend is automatically deployed using Vercel's Github integration, but contracts have to be manually deployed to keep a better control on them.
However, new deployed contract addresses can be updated on the frontend simply by running a script that modifies Vercel's project environment variables and triggers a new frontend deployment.

How to run

  • Copy .env.local.example to .env.local and fill it with environment variables
  • Run npm run node to start a local EVM blockchain testnet
  • Run npm run setup to deploy NFT and Marketplace contracts and perform some initial actions to the local blockchain
  • Run npm run dev to start frontend application
  • Make sure to use Localhost 8545 as the Metamask's network
  • Make sure to import local Account #0 and #1 into Metamask accounts.

How to deploy

  • Frontend is deployed automatically on main branch using Vercel's github integration
  • Set ACCOUNT_PRIVATE_KEY in .env.local and send it some Polygon's Testnet Matic tokens
  • Run npm run deploy:mumbai to deploy contracts to Polygon`s Testnet (Mumbai)
  • Optional: do the same for ACCOUNT2_PRIVATE_KEY env and run npm run setup-marketplace:mumbai to setup the marketplace with existing tokens and sales.
  • Run npm run env to update Vercel's environment variables with the new deployed contract addresses.*
  • Make sure to use Polygon Testnet Mumbai as Metamask's network

* You'll need to create the envs on Vercel first

Development Challenges

* They're usually caused by incorrect contract addresses and wrong default gas values

Wishlist

  • Refactor frontend code to accept other networks besides Mumbai
  • Lazyload for NFTs images and metadata
  • Add support for custom ERC20 tokens as payment (started on #2)

Troubleshooting

Mumbai marketplace setup command is breaking with a 'estimate gas failed' error

Try changing hardhat.config.js mumbai gas values.
I'm using the ones I've found here:
https://forum.moralis.io/t/deploy-to-polygon-matic-mumbai-fails/700

Nouce is too high

Reset your Metamask account transaction history.
Find out more on:
https://medium.com/@thelasthash/solved-nonce-too-high-error-with-metamask-and-hardhat-adc66f092cd

References

You might also like...

Solidity starter combining foundry and hardhat because both are great and I can't live without either...

Combination Pizza Hut & Taco Bell Foundry && HardHat starter template. Motivation I like them both. With this set-up we get: Unit tests written in sol

Aug 23, 2022

Lying flat is a 20 NFT collection on a custom marketplace built on Zora's protocol

Lying flat is an NFT Marketplace powered by ZORA 🌜 🌞 🌛 The codebase is open for everyone to use it as a boilerplate, customize it and deploy their

Sep 20, 2022

Decentralized twitter using Solidity, Ethereum, hardhat, ethers, IPFS, Next.JS, TypeScript, TailwindCSS.

DWITTER: Decentralized Twitter Check out the deployed version of this app at https://dwtr.wajeshubham.in Transactions on Ethereum are slow. Therefore,

Sep 2, 2022

Introductory fullstack ethereum dapp using: solidity, hardhat, react.js, ethers.js

Intro to Fullstack Ethereum Development Check out deployed dapp here! (Make sure you're connected to the Rinkeby Testnet) This article will help you e

Dec 21, 2022

This is a fully functional DAO, a Web3 project made using Solidity, Hardhat, JS, Next.js, Openzeppelin, CSS, HTML, using the Rinkerby network!

My First DAO! This is made for a DAO-Tutorial via learnweb3.io This is a DAO, a decentralised autonomous organisation, essentially a more collective a

Jun 20, 2022

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

🐲 Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued

Oct 22, 2022

A professional truffle solidity template with all necessary libraries that support developer to develop, debug, test, deploy solidity smart contract

solidity-truffle-template A professional truffle solidity template with necessary libraries that support to develop, compile, test, deploy, upgrade, v

Nov 4, 2022

🚀👩‍🚀This repo contains all the files to follow along and implement a MultiChain NFT MarketPlace! Be sure to watch my Youtube tutorials so you can learn and follow along!

🚀👩‍🚀This repo contains all the files to follow along and implement a MultiChain NFT MarketPlace! Be sure to watch my Youtube tutorials so you can learn and follow along!

Multi-Chain NFT Marketplace 🚀 👩‍🚀 This repo contains all the files to follow along and implement a MultiChain NFT MarketPlace! Be sure to watch my

Jan 5, 2023

This is NFT minting and marketplace website.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Oct 10, 2022
Comments
  • unable to run repo in local

    unable to run repo in local

    I am getting below error while running code in my local. Can someone please help on this. Also can I get ALCHEMY_KEY ,PINATA_API_KEY,PINATA_SECRET_KEY for testing purpose.

    Unhandled Runtime Error Error: invalid contract address or ENS name (argument="addressOrName", value=undefined, code=INVALID_ARGUMENT, version=contracts/5.7.0)

    opened by priyankakumari3 0
  • Not connecting to POLYGON MAINNET

    Not connecting to POLYGON MAINNET

    Hi there, I deployed on polygon mainnet and create both smart contracts with hardhat, replace the code with the POLYGON network and contract but still unable to connect. It's there something missing?

    Please help.

    import { createContext, useEffect, useState } from 'react' import Web3Modal from 'web3modal' import { ethers } from 'ethers' import NFT from '../../../artifacts/contracts/NFT.sol/NFT.json' import Market from '../../../artifacts/contracts/Marketplace.sol/Marketplace.json' import axios from 'axios'

    const contextDefaultValues = { account: '', network: 'maticmum', balance: 0, connectWallet: () => {}, marketplaceContract: null, nftContract: null, isReady: false, hasWeb3: false }

    const networkNames = { maticmum: 'POLYGON', unknown: 'LOCALHOST' }

    export const Web3Context = createContext( contextDefaultValues )

    export default function Web3Provider ({ children }) { const [hasWeb3, setHasWeb3] = useState(contextDefaultValues.hasWeb3) const [account, setAccount] = useState(contextDefaultValues.account) const [network, setNetwork] = useState(contextDefaultValues.network) const [balance, setBalance] = useState(contextDefaultValues.balance) const [marketplaceContract, setMarketplaceContract] = useState(contextDefaultValues.marketplaceContract) const [nftContract, setNFTContract] = useState(contextDefaultValues.nftContract) const [isReady, setIsReady] = useState(contextDefaultValues.isReady)

    useEffect(() => { initializeWeb3() }, [])

    async function initializeWeb3WithoutSigner () { const alchemyProvider = new ethers.providers.AlchemyProvider(137) setHasWeb3(false) await getAndSetWeb3ContextWithoutSigner(alchemyProvider) }

    async function initializeWeb3 () { try { if (!window.ethereum) { await initializeWeb3WithoutSigner() return }

      let onAccountsChangedCooldown = false
      const web3Modal = new Web3Modal()
      const connection = await web3Modal.connect()
      setHasWeb3(true)
      const provider = new ethers.providers.Web3Provider(connection, 'any')
      await getAndSetWeb3ContextWithSigner(provider)
    
      function onAccountsChanged (accounts) {
        // Workaround to accountsChanged metamask mobile bug
        if (onAccountsChangedCooldown) return
        onAccountsChangedCooldown = true
        setTimeout(() => { onAccountsChangedCooldown = false }, 1000)
        const changedAddress = ethers.utils.getAddress(accounts[0])
        return getAndSetAccountAndBalance(provider, changedAddress)
      }
    
      connection.on('accountsChanged', onAccountsChanged)
      connection.on('chainChanged', initializeWeb3)
    } catch (error) {
      initializeWeb3WithoutSigner()
      console.log(error)
    }
    

    }

    async function getAndSetWeb3ContextWithSigner (provider) { setIsReady(false) const signer = provider.getSigner() const signerAddress = await signer.getAddress() await getAndSetAccountAndBalance(provider, signerAddress) const networkName = await getAndSetNetwork(provider) const success = await setupContracts(signer, networkName) setIsReady(success) }

    async function getAndSetWeb3ContextWithoutSigner (provider) { setIsReady(false) const networkName = await getAndSetNetwork(provider) const success = await setupContracts(provider, networkName) setIsReady(success) }

    async function getAndSetAccountAndBalance (provider, address) { setAccount(address) const signerBalance = await provider.getBalance(address) const balanceInEther = ethers.utils.formatEther(signerBalance, 'ether') setBalance(balanceInEther) }

    async function getAndSetNetwork (provider) { const { name: network } = await provider.getNetwork() const networkName = networkNames[network] setNetwork(networkName) return networkName }

    async function setupContracts (signer, networkName) { if (!networkName) { setMarketplaceContract(null) setNFTContract(null) return false } const { data } = await axios(/api/addresses?network=${networkName}) const marketplaceContract = new ethers.Contract(data.marketplaceAddress, Market.abi, signer) setMarketplaceContract(marketplaceContract) const nftContract = new ethers.Contract(data.nftAddress, NFT.abi, signer) setNFTContract(nftContract) return true }

    return ( <Web3Context.Provider value={{ account, marketplaceContract, nftContract, isReady, network, balance, initializeWeb3, hasWeb3 }} > {children} </Web3Context.Provider> ) };

    opened by cikejoae 1
  • Running on localhost

    Running on localhost

    Thanks for such a wonderful repo. I followed the steps in the readme, but each time I get a couple of errors. This is one of them

    Unhandled Runtime Error Error: call revert exception (method="fetchAvailableMarketItems()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)

    opened by izzyx6 6
  • createMarketSale have nftContractAddress as argument

    createMarketSale have nftContractAddress as argument

    Hello, first of all thank you very much for contributing with a marketplace code that people can use as an example.

    And secondly, i think that the createMarketSale would have to get the contract address directly from the mapping array marketItemIdToMarketItem not as a function argument.

    Because it could allow an external user to shop a token through a different contract address, not the address of the market item.

    enhancement 
    opened by ghettoaliens 1
Owner
Marcelo Kopmann
Mark Kop | Software Engineer
Marcelo Kopmann
Kittos is NFT Marketplace built with Next Js, Hardhat, Solidity, Arweave + Bundlr Client and All The CSS Magic with TailwindCSS. 😺

Kittos NFT Marketplace ?? Built with Next Js, Hardhat, Solidity, Arweave, Bundlr and Tailwind CSS. Functionalities New Listed Assets Mint NFT Buy NFT

Aakrut 7 Dec 24, 2022
Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js

Building a Digital Marketplace on Ethereum The technologies used in this workshop are React, Next.js, Tailwind CSS, HardHat, Solidity, and Ethers. Get

Nader Dabit 114 Nov 15, 2022
A hardhat solidity template with necessary libraries that support to develop, compile, test, deploy, upgrade, verify solidity smart contract

solidity-hardhat-template A solidity hardhat template with necessary libraries that support to develop, compile, test, deploy, upgrade, verify solidit

ChimGoKien 4 Oct 16, 2022
Solidity Quickstart is an extensive solidity guide for the solidity newbies out there.

?? Solidity Quickstart Solidity Quickstart is an extensive solidity guide for the solidity newbies out there. ?? How does it work? All the guides rela

Kira 8 Aug 6, 2022
Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

null 3 Sep 21, 2022
Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop (IN BETA) Intro Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minu

LIQNFT 111 Dec 15, 2022
⚡⚡NextJS Full NFT Marketplace Application Running with Alchemy SDK. Deploy In Minutes with Smart Contracts Attached

+ Alchemy SDK Easy Polygon NFT Marketplace NextJS App Be sure to watch my Youtube video so you can learn and follow along! ** THE FILES ATTACHED TO TH

Net2Dev 9 Nov 16, 2022
A Bed and Breakfast dApp run on Ethereum. Includes a token + schedule system (Solidity) and full front-end (React + ethers.js) built with Hardhat.

Hotel ETH - Watch Demo Video Hotel ETH A (fictional) Bed-and-Breakfast run on Ethereum Come Book a Room on Kovan or Rinkeby Networks View the Demo » C

Ryan Lambert 20 Aug 20, 2022
Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

?? Fullstack Dynamic NFT Mini Game ?? ?? Using Diamond Standard Play On ?? ?? ⏩ http://diamond-dapp.vercel.app/ Project Description ?? Fullstack Dynam

Shiva Shanmuganathan 21 Dec 23, 2022
Foundry-Hardhat plugins: Use Foundry for Hardhat projects

This repo contains hardhat plugins to use foundry tools in hardhat environments. Installation See in each plugin anvil forge foundryup Documentation F

Foundry 77 Nov 3, 2022