Created 3/2024 by Emma Nasseri through the University of Kansas Blockchain Institute

Revised 3/2025 by Micah Borghese for the Midwest Block-a-Thon

<aside> 💡

This is a walk-through on how to create a simple NFT gallery using the Web3 stack.

• This tutorial is designed to give you a strong sense of what is required to build with blockchain and web3 technologies, so that you can easily and confidently build your own
• For this tutorial, we are providing almost an almost complete front end so that you can focus less on the React and JavaScript and more on the smart contracts and IPFS.

If you’d like to see a completed version of what your project will look like, you can view that here.

</aside>

For the frontend, we will use:

• JavaScript
• Next.js (a React framework)
• Chakra UI (for UI/UX design)
• Vercel (for free web hosting)

These are all Web2 technologies

For the backend, we will use:

• Solidity (for writing smart contracts)
• Remix (IDE for deploying smart contracts)
• Pinata and IPFS (to ensure content of the NFTs is available and distributed)
• MetaMask and Ethers.js (for wallet functions)

These are all Web3 technologies

Part 1: Prerequisites

i. MetaMask (wallet) Setup