Alchemy: Create a Full-Stack dApp
Learn how to create a full-stack dApp for minting NFTs using Alchemy and Filebase.
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.
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 here.
git clone https://github.com/alchemyplatform/nft-minter-tutorial
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
npm install @alch/alchemy-web3
cd minter-starter-files
npm install
Then start the app with the command:
npm start

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.

Then create a new file called
interact.js
inside the new utils
directory.mkdir src/utils
touch src/utils/interact.js
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>
),
};
}
};
import { connectWallet, getCurrentWalletConnected } from "./utils/interact.js";
const connectWalletPressed = async () => {
const walletResponse = await connectWallet();
setStatus(walletResponse.status);
setWallet(walletResponse.address);
};
useEffect(async () => {
const {address, status} = await getCurrentWalletConnected();
setWallet(address)
setStatus(status);
}, []);
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:
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:useEffect(async () => {
const {address, status} = await getCurrentWalletConnected();
setWallet(address)
setStatus(status);
addWalletListener();
}, []);
To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.
Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.

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.


Once uploaded, they will be listed in the bucket.

Choose the method you prefer, and take note of the IPFS CID. We will reference this later.

Select the ‘Create App’ button to get started.

Set the environment to ‘Staging’, the chain to ‘Ethereum’, and the network to ‘Göerli’.



const alchemyKey = "ALCHEMY_API_KEY";
const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
const web3 = createAlchemyWeb3(alchemyKey);
const contractABI = require('../contract-abi.json')
const contractAddress = "0x4C4a07F737Bf57F6632B6CAB089B78f62385aCaE";
Replace ALCHEMY_APY_KEY with your Alchemy HTTP key.
export const mintNFT = async(url, name, description) => {
if (url.trim() == "" || (name.trim() == "" || description.trim() == "")) {
return {
success: false,
status: "❗Please make sure all fields are completed before minting.",
}
}
const metadata = new Object();
metadata.name = name;
metadata.image = url;
metadata.description = description;
const tokenURI = url;
window.contract = await new web3.eth.Contract(contractABI, contractAddress);//loadContract();
const transactionParameters = {
to: contractAddress, // Required except during contract publications.
from: window.ethereum.selectedAddress,
'data': window.contract.methods.mintNFT(window.ethereum.selectedAddress, tokenURI).encodeABI() //make call to NFT smart contract
};
try {
const txHash = await window.ethereum
.request({
method: 'eth_sendTransaction',
params: [transactionParameters],
});
return {
success: true,
status: "✅ Check out your transaction on Etherscan: <https://ropsten.etherscan.io/tx/>" + txHash
}
} catch (error) {
return {
success: false,
status: "😥 Something went wrong: " + error.message
}
}
}
Edit the import statement to include your newly exported
mintNFT
function from the interact.js
file:import { connectWallet, getCurrentWalletConnected, mintNFT } from "./utils/interact.js";
const onMintPressed = async () => {
const { status } = await mintNFT(url, name, description);
setStatus(status);
};
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.
Click the ‘Mint NFT’ button. You’ll be prompted to sign the transaction with your connected Metamask wallet.


Congrats! You’ve deployed your own full-stack dApp that can be used to mint your own NFTs!
If you have any questions, please join our Discord server, or send us an email at [email protected]