Mint NFTs from a web app
This tutorial shows you how to create a web application that interacts with the Tezos blockchain to mint non-fungible tokens (NFTs). NFTs are unique digital assets that can represent art, collectibles, or virtually any kind of digital content on the blockchain. Specifically, this application will be the user-facing web front end for a smart contract that performs operations such as mint.
You will learn:
- How to create a web application and import JavaScript libraries that access Tezos blockchain
- How to call a smart contract from a web application
- How to connect to a user's wallet
- How to mint NFTs on behalf of a user
This tutorial covers creating a web application to interact with Tezos and mint NFTs. For simplicity, it uses an existing backend application, a smart contract running on Tezos. To create your own NFTs in a production application, you must deploy your own smart contract and backend application. For a tutorial that covers creating both the frontend and backend application, see Create a contract and web app that mints NFTs.
Prerequisites
This tutorial uses JavaScript, so it will be easier if you are familiar with JavaScript.
- You do not need any familiarity with any of the libraries in the tutorial, including Taquito, a JavaScript library that helps developers access Tezos.
Before start creating this dApp, we will need a wallet and some ghostnet tez(ꜩ).
The smart contract
The backbone of this application is the smart contract deployed on the Tezos blockchain. The contract we'll be using is already deployed and is written in SmartPy. It defines the rules and processes for interactions with the Tezos blockchain, such as minting NFTs. All you need to do is integrate it into your web app.
You can view the contract in a block explorer such as this one: https://better-call.dev/ghostnet/KT1Lr8m7HgfY5UF6nXDDcXDxDgEmKyMeds1b/operations
The source code of the contract is here: https://github.com/trilitech/tutorial-applications/blob/main/simple-nft-svelte/contract/simple-nft.py
The tutorial application
In this tutorial, you build a web application that allows users to mint NFTs via the smart contract. The interface of the application will look like this:
The application can perform many individual actions, including:
- Connecting and disconnecting users' wallets
- Displaying users' information, including their wallet address and tez balance
- Allowing users to mint NFTs on the Tezos blockchain
The application is based on JavaScript, so it uses several JS and TS-based tools to build and package the application:
- Svelte for the JavaScript framework
- JavaScript to make the JavaScript code safer and more expressive
- Vite (pronounced like veet) to bundle the application and provide the libraries to the user's browser
Also, to access the user's wallet and run transactions on Tezos, the application uses these libraries:
You can see the completed tutorial application here: https://github.com/trilitech/tutorial-applications/tree/main/simple-nft-svelte
When you're ready, move to the next section to begin setting up the application.