https://github.com/kaymen99/nft-draw-minter
A dapp for drawing and minting custom NFTs using IPFS & Openzeppelin
https://github.com/kaymen99/nft-draw-minter
dapps-development erc721 hardhat nft-generator nft-marketplace nfts openzeppelin reactjs solidity
Last synced: 3 months ago
JSON representation
A dapp for drawing and minting custom NFTs using IPFS & Openzeppelin
- Host: GitHub
- URL: https://github.com/kaymen99/nft-draw-minter
- Owner: kaymen99
- License: mit
- Created: 2022-05-19T22:56:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-08T02:06:20.000Z (about 3 years ago)
- Last Synced: 2023-03-17T23:22:20.102Z (over 2 years ago)
- Topics: dapps-development, erc721, hardhat, nft-generator, nft-marketplace, nfts, openzeppelin, reactjs, solidity
- Language: JavaScript
- Homepage:
- Size: 699 KB
- Stars: 1
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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](https://docs.soliditylang.org/)
* [Hardhat](https://hardhat.org/getting-started/)
* [React.js](https://reactjs.org/)
* [ethers.js](https://docs.ethers.io/v5/)
* [web3modal](https://github.com/Web3Modal/web3modal)
* [material ui](https://mui.com/getting-started/installation/)
Table of Contents
## Getting Started
### Prerequisites
Please install or have installed the following:
* [nodejs](https://nodejs.org/en/download/) and [yarn](https://classic.yarnpkg.com/en/)
* [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn) Chrome extension installed in your browser
* [Ganache](https://trufflesuite.com/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:
- front-end 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).
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:
```sh
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 :
```sh
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.
## 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.
## 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:
```sh
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:
```sh
npx hardhat test
```
To start the app you have to go back to the nft-draw-minter folder and run the command:
```sh
yarn start
```
## 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).
## Contact
If you have any question or problem running this project just contact me: aymenMir1001@gmail.com
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.