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.
The key modules that represent an NFT marketplace include:
- User Account and Registration
- Minting Page
- Actual Marketplace
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
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
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
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."