NFT Drawing Minter

This is a NFT dapp built for evm compatible blockchains (Ethereum, Polygon, BSC,...), it enables user to draw it's own digital art and minted as an NFT

• Solidity
• Hardhat
• React.js
• ethers.js
• web3modal
• material ui

Table of Contents

1. Getting Started
   • Prerequisites
   • Project structure
   • Initial Setup
2. How it Works
   • Contracts
   • User interface
3. How to Use
4. Future developements
5. Contact
6. License

Getting Started

Prerequisites

Please install or have installed the following:

• nodejs and yarn
• MetaMask Chrome extension installed in your browser
• Ganache for local smart contracts deployement and testing

Project structure

This a full stack web3 decentralized application built using Hardhat/React js, so the project is devided into 2 main parts:

• Smart contract/backend side:
Located in the hardhat folder, it contains the blockchain developement envirenment built using Hardhat, with all the smart contracts tests, deployement scripts and the plugins used (openzepplin contracts).
• front-end side:
The code for the UI can be found in the src folder (as in all reactjs apps)

Initial Setup

1. Clone the repository and install all the required packages by running:

   git clone https://github.com/kaymen99/nft-draw-minter.git
   cd nft-draw-minter
   yarn

2. Private key & Network Urls setup: in the hardhat folder you'll find a .env file, it's used to store all the sensible data/keys like your private key, RPC url for mainnet, rinkeby, kovan... (you get RPC url from services like Infura or Alchemy for free), you can also provide Etherscan api key to allow automatic contracts verifications :

    RINKEBY_ETHERSCAN_API_KEY="your etherscan api key"
    RINKEBY_RPC_URL="https://eth-rinkeby.alchemyapi.io/v2/apiKey"
    POLYGON_RPC_URL="Your polygon RPC url from alchemy or infura"
    MUMBAI_RPC_URL="Your mumbai RPC url from alchemy or infura"
    PRIVATE_KEY="ganahce-private-key"

• IMPORTANT : For the purpose of testing you can just provide the ganache private key and ignore all the other variables.

(back to top)

How it Works

contracts

The application is built with ERC721.sol nft standard contract from openzepplin and more specificaly the ERC721URIStorage extension, it allows user to mint an nft and set it's correspanding IPFS metadata URI

User interface

The front end is structured into 4 pages:

• The home page is the landing page of the app, it contains a list of all the previously minted nfts.

• The Mint page is where the user can create a new nft, it uses React Canvas to allow the user to draw whatever he wants and Reacte color for choosing the picture backgound color.After finishing the drawing part and providing the required nft metadata (name, description), the user can mint his nft while paying a small minting fee

• The Nft page gives details about each item: creator, name, description, (and optionaly the price).

• Each user has it's own Dashboard, it contains all the nft that he has created.

(back to top)

How to Use

After going through all the installation and setup steps, you'll need to deploy the smart contract to the ganache network by running:

cd hardhat
npx hardhat run scripts/deploy-nft-minter.js --network ganache

This will create a config.js file and an artifacts folder and transfer them to the src folder to enable the interaction between the contract and the UI

If you want to test the functionnalities of the NFTMinter contract you can do it by running:

npx hardhat test

To start the app you have to go back to the nft-draw-minter folder and run the command:

yarn start

(back to top)

Future developements

• Creating an nft marketplace where users can exchange their drawn nfts.
• Give user the ability to create nfts using AI (text to image).

(back to top)

Contact

If you have any question or problem running this project just contact me: aymenMir1001@gmail.com

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)