Build an NFT Minting Site with No-code Using Makeswift

Build an NFT Minting Site with No-code Using Makeswift - thirdweb

In this guide, we'll show you how to use Makeswift, a no-code tool for building Next.js applications to create an NFT Minting web application powered by our NFT drop smart contract!

Pre-requisites

In order to make sure you are able to follow this tutorial make sure you have the following setup:

Creating the Project

Let's start building by going to Makeswift's thirdweb template Github Repo and clicking Deploy in the README.md file.

Click on the Deploy button
Click on the Deploy button

Now let's name the repo makeswift-thirdweb-example.

Create a new repository from the template
Create a new repository from the template

Click Create and wait for it to complete.

Once that's done, add a Makeswift integration:

Add the makeswift integration
Add the makeswift integration

This will take you to the Makeswift setup page, where you will input some details about your project and take you to the page below to Pick a template.

Pick the Ecommerce - thirdweb template
Pick the Ecommerce - thirdweb template

Make sure to choose Ecommerce - thirdweb and click on Use this site.

It may take some time, so wait for it to finish loading.

After that, your Vercel application will start deploying.

Upon the completion of the deployment click the link to check the website.

The site is successfully deployed
The site is successfully deployed

That's it for the deployment! Now it's time to customize our NFT Drop website!

Customizing The Website

In order to customize your NFT Drop website, go and head over to Makeswift's visual builder.

Makeswift's visual builder
Makeswift's visual builder

Make sure you're on the Home page on the left panel under Pages.

Select Home page under Pages
Select Home page under Pages

Now click the component housing your NFT Drop.

Click component housing your NFT Drop
Click component housing your NFT Drop

Upon clicking, it will expose some properties on the right that can be customized. Two of which are your Chain and Contract Address.

Update the chain and Contract Address

Head on over to this NFT Drop guide in order to learn how to deploy your own NFT Drop contract without writing any code!

Release an NFT Drop on your own site without writing any code
Learn How To Deploy An ERC721 NFT Collection (Drop) Using the No-Code Capabilities of the thirdweb Dashboard.

Once you're done with deploying your own collection it's time to change the Chain and Contract Address properties of your NFT Drop website.

Makeswift will update your preview and you should have something similar below.

You can customize your NFT Drop website even further by clicking on the elements and changing their contents.

You can also drag elements from the toolbar on the left to add more visuals to your NFT Drop website!

Drag and drop elements from the toolbar
Drag and drop elements from the toolbar

Conclusion

If you're not ready to use the SDK to write your own custom applications, you can use Makeswift to create and deploy an NFT minting application powered by our NFT drop contracts.

If you have any questions, reach out to us on Discord to speak with the team directly!