This is a small DApp project that show you how to setup a small Marketplace to create and sell NFTs. To implement it, I used:
- Solidity: the principal language used to develop Smart Contracts
- Open Zeppelin: a battle-tested suite to develop your Smart Contracts
- Truffle Suite: a suite of tools for Smart Contract development
- Ganache: a local personal Blockchain used to deploy and test your Smart Contracts
- Infura: the Web3 backend Infrastructure-as-a-Service that allow your to interact with multiple blockchains and IPFS
- NextJS: a ReactJS-based framework that allows your quickly develop web applications
- and much more.
You will need an Infura account to uplaod NFT images and Metadata to IPFS. As the Infura IPFS public gateway was deprecated on August 10, 2022 and is no longer accessible, you need to use dedicated gateways and that requires you enter a Credit Card in your profile, but don't worry: Infura give you a 5GB free IPFS storage, quite enough to start and experiment with your project.
This project is not production ready, and it uses your Project ID and your API Secret in order to upload images and metadata on IPFS through ipfs-http-client
from the end user's browser (check ./src/api/ipfs.js
), so that secret will be in the final bundle (if you don't trust me, try to build your project with npm run build
and look for your API secret).
If you want a more secure solution, you can create an API endpoint in order to call Infura IPFS API and not reveal your secrets.
Start by cloning this repo:
git clone https://github.com/ghiblin/nft-marketplace.git
Go to the project directory
cd nft-marketplace
Install dependencies
npm install
If you don't already have one, create an Infura account follow the instruction in the official documentation and create a new IPFS project.
Setup your .env file:
INFURA_IPFS_PROJECT_ID=<your Infura IPFS Project ID>
INFURA_IPFS_API_SECRET=<your Infura IPFS API Secret>
INFURA_IPFS_SUBDOMAIN=<Your subdomani>
Before to run any code, you need to compile the Smart Contracts and deploy it on your Ganache client.
Using the --db
flag allow you to store your ganache state locally, otherwise you need to redeploy the contract everytime.
Run your Ganache client:
ganache --db="./data/save"
Compile and deploy the Smart Contracts:
npm run deploy
Start your development environment:
npm run dev
Pay attention: this command will start a Ganache instance, so you can:
- stop your previous instance
- start only the frontend through:
npm run dev:next