Create an NFT Collection on Your Site Without Writing Any Code
Tags: nft, blockchain, smartcontract
Published: 2022-06-16 17:13:58

Learn how to use the Flair dashboard to reduce dependency on web3 development.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3h63tz5rb5dom9gxuqf.png)  

In this blog post, I am going to show you how to release an NFT collection on your site without knowing all the complexity and best practices of smart contract and Web3 development; while having full ownership and visibility into the code that you are deploying. To get all these features and benefits, we are going to use Flair dashboard.


## Create a new collection
The first step in our journey is to create an NFT collection in Flair dashboard.

You can consider the collection as a specific entity on the blockchain that has its own unique address and properties. With this NFT collection, you will be able to issue digital assets in an immutable way. E.x if you issue 5K gaming assets as NFTs for your next gaming project, those 5K NFTs will remain untouchable on the blockchain and everyone can verify their authenticity.

Also, another important aspect of creating and deploying an NFT collection for developers is to make sure they fully own the NFT contract, which is the case for Flair’s smart contracts.

After clicking on the “Create new collection”, you can choose which type of collection you like to create. For now we are going to choose the “Full Featured Collection”. Please note that with this collection, you are going to deploy an ERC721 smart contract, which means all the NFTs in this collection will be unique.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0zqxwhtaacdsgf4i7t9.png)
 
This is a collection that gives us all the necessary building blocks we need to release our NFTs. Some of these building blocks are Pre-Sale and Public Sale features which we are going to talk about later. Also, you get an estimate for how much gas you are going to spend when deploying this contract. Since we are on the Rinkeby testnet in this example, we get the estimate of ~10.89USD for the gas fee of this deployment. If you are just testing things, make sure to choose a testnet in dashboard’s top corner, so you don’t have to actually pay for gas.

Upon choosing this option, there are few sections that we need to fill for our NFT collection.

## **Your collection**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgk2papwqad2evgehp53.png)
 
Here, we are trying to define the general information about our NFT collection that will appear in marketplaces like OpenSea. Here is an example:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu1spvem0znrn0uwoswd.png)

 

## **Tokens**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2a8jh2yw6axop160hlj.png)
 
This is the section which you define the Symbol of your NFT collection which will appear in Etherscan. Also, the max supply will define an immutable number of NFTs that can ever exist in your collection.

## **Pre-reveal placeholder**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5avghlyoqmzmak3cp6l.png)
 
It is usually the case where you need to have a pre-reveal placeholder for your NFT collection before actually revealing the NFT assets. Via this section, you can define the name, image and description of NFTs that you want to be shown in different marketplaces before your NFTs are revealed. Let’s see an example for this:


## **Sales and Royalty**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggtd29j9zrh4w8kigp6t.png)

Now, we can set some basic sales information about our NFT collection. For example, we can add pre-sale and public-sale prices for the NFTs, while having control over how many NFTs users can mint in the pre-sale per wallet while defining how many mints are allowed per transaction in the public-sale.

Additionally, you can set royalty percentage over secondary sales and also who should be the recipient of those royalty earnings.

## **Inspect the code**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ekllrldufnzkllih3ve.png)
 
After you are done with this stage, you can click on “Preview” to go to the next step to be able to deploy your contract; while you also have the option to click on the “Inspect the code”. This option gives you full transparency over the code that you are going to deploy. You even have the option to manually deploy the contract yourself, but Flair just make it easier through the dashboard.

## **Saving the collection**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnxkrl76cuuhy3wfn8n5.png)
 
After clicking on the “Preview” section, you are welcomed by this page, you can see the overview of your collection on the left, while on the right side of the page you can see the status of your collection and pre-reveal metadata being uploaded to IPFS to make it persistent and immutable. When all the check-marks are green, you can click on “Save now” to go to the next step.

## Deploy

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9930dajooalcmbznwiw.png)
 
One more step before we have our contract up and running on the blockchain; and that is deploying the contract. In this page you can see that the status of the contract is still set to “Not deployed yet”. After hitting the deploy, you can see the status changed to “Successfully deployed”. Also, the Deploy Transaction and Contract Address are visible and can be examined further on Etherscan.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqie9f8wmumva8xd6gxu.png)
 

Congratulations :) You now have successfully have deployed an ERC721 smart contract. But what comes after this?

With Flair’s dashboard, you can easily manage your Pre-Sale, Public-Sale, Metadata Management and Royalty Settings (a feature coming soon); but we are going to cover those use-cases in future posts and focus on embedding the minting widget for our collection in our site and allow our community members to easily mint their NFTs.

## **Minting**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doq5vxklfnich7w3u7lb.png)
 
When you click on the “Minting” section, you will have access to the “Minting Widget” section. You can either use the “Public Minting Wage” which offers you a basic URL, or alternatively you can use the “Public Minting Widget” and easily embed the minting widget into your website as an iframe. And that’s it.

https://www.youtube.com/watch?v=AnIv73eD1y8