How to Create an NFT Marketplace with React & Thirdweb
Introduction
Blockchain is a very fast-growing technology field so tech companies and startups are trying to get into this new technology. But there are not too many developers working in this field so companies can’t easily find blockchain developers. If they find — they have to pay too much for hiring them.
So if you are a startup owner it would be hard to hire a blockchain developer for coding a smart contract for you or it would be also hard to learn blockchain development from zero.
ThirdWeb is a good fit for problems like this!
What is ThirdWeb?
Launched in December 2021, thirdweb is the product of Steven Bartlett and Furqan Rydhan. It’s invested $5m by a series of A-list investors including Gary Vaynerchuck.
And what it is?
Thirdweb is a platform that provides a suite of tools for creators, artists, and entrepreneurs to easily build, launch and manage a Web3 project. It enables users to add features such as NFTs, marketplaces, and social tokens to their Web3 projects without writing a line of code.
So if you want to start your own Blockchain-based business such as these:
This article is for you!
Note: If you are a blockchain developer you can also connect your project with ThirdWeb. There are many chain options:
Near is still not supported but coming soon — you can find my articles near development articles inside my blog.
I forgot to say: ThirdWeb is completely free🤑
How To Create a Thirdweb App With React
So let’s think that you chose to create an NFT marketplace.
First, go to the website and click for the example project published on Github.
Then go to the documentation!
I will only introduce you to some basic functions declared in the documentation!
First: What is a Marketplace
A Marketplace is a contract where you can buy and sell NFTs, such as OpenSea.
You can list your NFTs for auctions or direct sells with the Marketplace contract.
Other users can list, buy and get NFTs by auctions. So you will not be the only seller. But you will be able to get commissions from the sales inside the Marketplace.
You could use the Marketplace contract to:
- Sell your NFTs on your marketplace
- Create auctions where the highest bidder, after a certain period, wins the NFT
- Create an open marketplace where any user can list NFTs for sale, like OpenSea.
Create a Marketplace Contract
It is easy as creating a js function!
Your very first contract container(with only pure js).
const contractAddress = await sdk.deployer.deployMarketplace({
name: “My Marketplace”,
primary_sale_recipient: “your-address”,
});Creating a direct listing
It is also very simple! But these codes are just js codes. You must connect them with React.js. (a very simple task — so I won’t show it to you)
// Data of the listing you want to create
const listing = {
// address of the contract the asset you want to list is on
assetContractAddress: “0x…”,
// token ID of the asset you want to list
tokenId: “0”,
// when should the listing open up for offers
startTimestamp: new Date(),
// how long the listing will be open for
listingDurationInSeconds: 86400,
// how many of the asset you want to list
quantity: 1,
// address of the currency contract that will be used to pay for the listing
currencyContractAddress: NATIVE_TOKEN_ADDRESS,
// how much the asset will be sold for
buyoutPricePerToken: “1.5”,
}const tx = await contract.direct.createListing(listing);
const receipt = tx.receipt; // the transaction receipt
const id = tx.id; // the id of the newly created listing
Thanks for reading. You can learn more about Thirdweb by reading the documentation from Thirdweb docs.
Don’t forget to contact me on LinkedIn!
Have a nice day
