Building a NFT Marketplace with Next.js, Tailwind, Solidity, Hardhat, Ethers.js, Infura and IPFS - Moralis

Prerequisites:

To be successful in this guide, you must have the following:

1. Node.js installed on your machine
2. Metamask wallet extension installed as a browser extension

The Stack

We will built full stack application using:

• Web application Framework - Next.js
• Solidity development environment - Hardhat
• IPFS File Storage - Moralis
• Ethereum Web Client Library - Ethers.js
• Hosting Servies - Infura (use any Ropsten, Rinkeby, Goerli Testnet)

Setup Project

git clone https://github.com/Aun-Shahbaz-Awan/NFT-Marketplace-with-Hardhat-and-NextJs.git 

cd NFT-Marketplace-with-Hardhat-and-NextJs 

Install node modules by running this command

npm install 

Setting up Tailwind CSS

Next, install the Tailwind dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 

Next, we will create the configuration files needed for Tailwind to work with Next.js (tailwind.config.js and postcss.config.js) by running the following command:

npx tailwindcss init -p 

Finally, delete the code in styles/globals.css and update it with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configuring Hardhat

Next, initialize a new Hardhat development environment from the root of your project:

npx hardhat

? What do you want to do? Create a sample project
? Hardhat project root: <Choose default path>

Now you should see the following files and folders created for you in your root directory:

hardhat.config.js - The entirety of your Hardhat setup (i.e. your config, plugins, and custom tasks) is contained in this file. scripts - A folder containing a script named sample-script.js that will deploy your smart contract when executed test - A folder containing an example testing script contracts - A folder holding an example Solidity smart contract Next, update the configuration at hardhat.config.js with the following:

Be sure to never commit any private keys to Git. To be extra safe, consider storing these values in temporary environment variables when working with wallets that contain real tokens. To omit from Git, add .secret to your .gitignore file. To run the test, run npx hardhat test from your command line:

npx hardhat test

Deployment (Local or Testnet)

1. Local Setup

1. Start the local Hardhat node

npx hardhat node

2. With the network running, deploy the contracts to the local network in a separate terminal window

npx hardhat run scripts/deploy.js --network localhost

___OR

2. Deploy on Infura - Rinkeby

Deploy smart contract on Infura using testnet

npx hardhat run scripts/deploy.js --network rinkeby

I used rinkeby, you can use any testnet i.e. Ropsten, Rinkeby, Goerli, Kovan

Run the app

To start the app, run the following command in your CLI:

npm run dev

Screenshots

My Collection

Creater Dashboard

Create or Mint NFT

Note: This is ERC721 Token.