The following article provides an initial tutorial on building an NFT marketplace on Ethereum blockchain using React and Next.Js. We will be leveraging React, NextJS, Web3, and OpenZeppelin to create our application. The following article will focus on app development, but here are the libraries for now.

Modular Design

The key modules that represent an NFT marketplace include:

  1. User Account and Registration
  2. Dashboard
  3. Minting Page
  4. Actual Marketplace

Steps

Step 1: Create a React application.

We will create an NFT marketplace for pogs.

npx create-next-app nft-marketplace-pogs

Step 2: Install libraries

Interact with Ethereum blockchain using ethers. Ethers is an excellent library for interacting with the Etherium blockchain.

npm i ethers --save

Step 3: Create a development environment

hardhat is the technology that will enable us to compile and deploy smart contracts. Another popular library is truffle but we will use that for a future blog article.

npm i hardhat --save
npm i ethereum-waffle --save
npm i @nomiclabs/hardhat-waffle --save
npm i @nomiclabs/hardhat-ethers --save

Step 4: Install web3

We use web3modal to bridge the front-end with the back-end.

npm i web3modal --save

Step 5: Testing

Introduce assertion testing via chai

npm i chai

Step 6: Manage Smart Contracts

OpenZepplin contains ERC721 contracts, built to a standard, saving us time by not building our tokens from scratch.

npm i @openzeppelin/contracts --save

Step 7: Host pog content on a decentralized host

We want to make sure the content remains on the web forever. To accomplish this, we store it in a decentralized way using IPFS.

npm i ipfs-http-client --save

Async JS Requests via axios

We will use Axios, but you can certainly write Promises in ES6.

npm i axios --save

UIX CSS design using Tailwind

Goodbye Bootstrap, hello tailwind.

npm i add -D tailwindcss@latest postcss@latest autoprefixer@latest --save-dev

Start Building

Now let's initialize tailwind and create a configuration file.

npx tailwindcss init -p

Now let's focus on getting Hardhat to initialize our contracts and start building out some smart contracts for us. This command will initialize a virtual developer environment of smart contracts to get us started. After typing in this command, select "Create a basic sample project."

npx hardhat