Decentralized applications, known as dApps, are open-source applications developed using cryptocurrency and smart contracts, then deployed on a blockchain network.
In this tutorial, we’ll launch an example dApp built with Alchemy and React on the Ethereum Testnet Ropsten. Then, we’ll create a series of functions that allow us to mint an NFT that uses an image asset stored on the IPFS network through Filebase.
Read below to learn how to create a full-stack dApp for minting NFTs using Alchemy and Filebase.
Prerequisites:
This tutorial assumes you know what NFTs are and how the NFT minting process works. For more information on NFTs and how they’re minted, check out our deep dive on NFTs
1. Start by cloning the Github repository for this project:
This repo contains two directories, minter-starter-files and nft-minter. We’ll be using the nft-minter tutorial directory, so navigate inside of that:
cd nft-minter-tutorial
2. Next, install the alchemy-web3 package:
npm install @alch/alchemy-web3
3. Navigate to the minter-starter-files directory:
cd minter-starter-files
4. Next, install the required dependencies of the project:
npm install
Then start the app with the command:
npm start
6. Now let’s edit this app. Open the file located in the src directory called Minter.js and open this file in your code editor of choice.
This file has 3 main sections:
State Variables: This section contains variables such as walletAddress, status, name, description, and URL. These variables will be used to store information about our NFT and its status inside the dApp.
Functions: These functions are unimplemented as the code currently stands, and are used to run functions in the dApp like connecting your wallet to the app, and minting the NFT when a button is clicked.
User Interface: The user interface used to interact with the dApp’s functions and variables.
8. Next, create a new directory called utils in the src directory.
Then create a new file called interact.js inside the new utils directory.
mkdir src/utils
touch src/utils/interact.js
9. Open this interact.js file in your code editor. Input the following code into this file:
export const connectWallet = async () => {
if (window.ethereum) {
try {
const addressArray = await window.ethereum.request({
method: "eth_requestAccounts",
});
const obj = {
status: "👆🏽 Write a message in the text-field above.",
address: addressArray[0],
};
return obj;
} catch (err) {
return {
address: "",
status: "😥 " + err.message,
};
}
} else {
return {
address: "",
status: (
<span>
<p>
{" "}
🦊{" "}
<a target="_blank" href={`https://metamask.io/download.html`}>
You must install Metamask, a virtual Ethereum wallet, in your
browser.
</a>
</p>
</span>
),
};
}
};
export const getCurrentWalletConnected = async () => {
if (window.ethereum) {
try {
const addressArray = await window.ethereum.request({
method: "eth_accounts",
});
if (addressArray.length > 0) {
return {
address: addressArray[0],
status: "👆🏽 Write a message in the text-field above.",
};
} else {
return {
address: "",
status: "🦊 Connect to Metamask using the top right button.",
};
}
} catch (err) {
return {
address: "",
status: "😥 " + err.message,
};
}
} else {
return {
address: "",
status: (
<span>
<p>
{" "}
🦊{" "}
<a target="_blank" href={`https://metamask.io/download.html`}>
You must install Metamask, a virtual Ethereum wallet, in your
browser.
</a>
</p>
</span>
),
};
}
};
10. Head back to the Minter.js file. Add the following line to the top of the file:
import { connectWallet, getCurrentWalletConnected } from "./utils/interact.js";
11. Then, in the functions section in the connectWalletPressed function, add the following code to call the connectWallet function:
Your react app running at localhost:3000 will update automatically. You will now be able to click the ‘Connect Wallet’ button and will be prompted to connect your Metamask wallet to the website. Once connected, your dApp will reflect your wallet’s address:
14. Next, in your Minter.js file, we need to add the function addWalletListener.
This function tracks the wallet’s state, such as if it disconnects or if the user switches accounts. In the Minter.js file, add the following function:
function addWalletListener() {
if (window.ethereum) {
window.ethereum.on("accountsChanged", (accounts) => {
if (accounts.length > 0) {
setWallet(accounts[0]);
setStatus("👆🏽 Write a message in the text-field above.");
} else {
setWallet("");
setStatus("🦊 Connect to Metamask using the top right button.");
}
});
} else {
setStatus(
<p>
{" "}
🦊{" "}
<a target="_blank" href={`https://metamask.io/download.html`}>
You must install Metamask, a virtual Ethereum wallet, in your
browser.
</a>
</p>
);
}
}
Then, edit the useEffect function to reflect the following code:
15. Now we need an image to use as an NFT. We’ll start by uploading an image to Filebase for us to use.
Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.
17. Enter a bucket name and choose the IPFS storage network to create the bucket.
Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.
18. Next, select the bucket from your list of buckets, then select ‘Upload’ in the top right corner to upload an image file.
19. Select your images to be uploaded.
Once uploaded, they will be listed in the bucket.
20. You can view the object’s IPFS CID in the CID column, or you can click on your uploaded object to display the metadata for the object, which includes the IPFS CID.
Choose the method you prefer, and take note of the IPFS CID. We will reference this later.
22. From the Alchemy dashboard, we need to create an app.
Select the ‘Create App’ button to get started.
23. Create a new app. For our example, we called our app NFTs.
Set the environment to ‘Staging’, the chain to ‘Ethereum’, and the network to ‘Göerli’.
24. Then, from our App’s page, select ‘View Key’:
25. Copy your app’s HTTP Key:
26. Then in your interact.js file, insert the following lines at the top of the file:
30. Now, head over to your dApp running at localhost:3000.
In the ‘Link to asset’ field, enter https://ipfs.filebase.io/ipfs/IPFS_CID replacing IPFS_CID with the CID from one of your files uploaded to Filebase earlier in the tutorial. Then give your NFT a name and a description.
31. It’s time to mint!
Click the ‘Mint NFT’ button. You’ll be prompted to sign the transaction with your connected Metamask wallet.
32. Your transaction will be returned in your dApp for you to view on Etherscan:
Congrats! You’ve deployed your own full-stack dApp that can be used to mint your own NFTs!
5. Your default app will be launched at . It should look like this:
7. Next, head over to the and send your wallet some fake ETH to use with our dApp:
To do this, navigate to . If you don’t have an account already, , then log in.
16. Select ‘Buckets’ from the left side bar menu, or navigate to .
21. Now, let’s head over to Alchemy and either for an account or .
