{"id":21361129,"url":"https://github.com/kaymen99/nft-draw-minter","last_synced_at":"2025-07-13T02:32:01.860Z","repository":{"id":49324667,"uuid":"494252911","full_name":"kaymen99/nft-draw-minter","owner":"kaymen99","description":"A dapp for drawing and minting custom NFTs using IPFS \u0026 Openzeppelin","archived":false,"fork":false,"pushed_at":"2022-09-08T02:06:20.000Z","size":716,"stargazers_count":1,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-17T23:22:20.102Z","etag":null,"topics":["dapps-development","erc721","hardhat","nft-generator","nft-marketplace","nfts","openzeppelin","reactjs","solidity"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaymen99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-19T22:56:55.000Z","updated_at":"2023-01-26T22:03:06.000Z","dependencies_parsed_at":"2023-01-18T00:30:50.419Z","dependency_job_id":null,"html_url":"https://github.com/kaymen99/nft-draw-minter","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2Fnft-draw-minter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2Fnft-draw-minter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2Fnft-draw-minter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2Fnft-draw-minter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaymen99","download_url":"https://codeload.github.com/kaymen99/nft-draw-minter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225850260,"owners_count":17534067,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dapps-development","erc721","hardhat","nft-generator","nft-marketplace","nfts","openzeppelin","reactjs","solidity"],"created_at":"2024-11-22T06:08:41.657Z","updated_at":"2024-11-22T06:08:42.242Z","avatar_url":"https://github.com/kaymen99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## NFT Drawing Minter\n\nThis 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\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Dark\" src=\"https://user-images.githubusercontent.com/83681204/169620068-693d0aa3-5c85-4110-a0ee-c7b13ac4baa0.png\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\n* [Solidity](https://docs.soliditylang.org/)\n* [Hardhat](https://hardhat.org/getting-started/)\n* [React.js](https://reactjs.org/)\n* [ethers.js](https://docs.ethers.io/v5/)\n* [web3modal](https://github.com/Web3Modal/web3modal)\n* [material ui](https://mui.com/getting-started/installation/)\n\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n       \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"#project-structure\"\u003eProject structure\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"#initial-setup\"\u003eInitial Setup\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#how-it-works\"\u003eHow it Works\u003c/a\u003e\n     \u003cul\u003e\n       \u003cli\u003e\u003ca href=\"#contracts\"\u003eContracts\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"#user-interface\"\u003eUser interface\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#how-to-use\"\u003eHow to Use\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#future-developements\"\u003eFuture developements\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n### Prerequisites\n\nPlease install or have installed the following:\n* [nodejs](https://nodejs.org/en/download/) and [yarn](https://classic.yarnpkg.com/en/)\n* [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn) Chrome extension installed in your browser\n* [Ganache](https://trufflesuite.com/ganache/) for local smart contracts deployement and testing\n\n### Project structure\n\nThis a full stack web3 decentralized application built using Hardhat/React js, so the project is devided into 2 main parts:\n\u003cul\u003e\n \u003cli\u003e\u003cb\u003eSmart contract/backend side:\u003c/b\u003e\u003c/li\u003e\n 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). \n  \u003cli\u003e\u003cb\u003efront-end side:\u003c/b\u003e\u003c/li\u003e\nThe code for the UI can be found in the src folder (as in all reactjs apps)\n\u003c/ul\u003e\n\n### Initial Setup\n1. Clone the repository and install all the required packages by running:\n   ```sh\n   git clone https://github.com/kaymen99/nft-draw-minter.git\n   cd nft-draw-minter\n   yarn\n   ```\n2. Private key \u0026 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 :\n   ```sh\n    RINKEBY_ETHERSCAN_API_KEY=\"your etherscan api key\"\n    RINKEBY_RPC_URL=\"https://eth-rinkeby.alchemyapi.io/v2/apiKey\"\n    POLYGON_RPC_URL=\"Your polygon RPC url from alchemy or infura\"\n    MUMBAI_RPC_URL=\"Your mumbai RPC url from alchemy or infura\"\n    PRIVATE_KEY=\"ganahce-private-key\"\n   ```\n* \u003cb\u003eIMPORTANT : \u003c/b\u003e For the purpose of testing you can just provide the ganache private key and ignore all the other variables.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Working EXAMPLES --\u003e\n## How it Works\n\n### contracts\nThe 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\n\n### User interface\nThe front end is structured into 4 pages:\n* The home page is the landing page of the app, it contains a list of all the previously minted nfts.\n\n![Capture d’écran 2022-05-20 à 20 04 43](https://user-images.githubusercontent.com/83681204/169628955-e8ded120-fd78-4dad-bcd0-6a3f83c41ad2.png)\n\n* 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\n\n![Capture d’écran 2022-05-20 à 19 53 36](https://user-images.githubusercontent.com/83681204/169628978-747402c1-9e51-4a73-953b-e5025a9428d2.png)\n\n* The Nft page gives details about each item: creator, name, description, (and optionaly the price).\n\n![Capture d’écran 2022-05-20 à 19 53 36](https://user-images.githubusercontent.com/83681204/169651032-1b7480ec-e2be-4efd-afaa-519951fb17e1.png)\n\n* Each user has it's own Dashboard, it contains all the nft that he has created.\n\n![Capture d’écran 2022-05-20 à 19 52 05](https://user-images.githubusercontent.com/83681204/169628982-46147205-ebd1-4aac-9163-9b26ed79dda4.png)\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## How to Use\n\nAfter going through all the installation and setup steps, you'll need to deploy the smart contract to the ganache network by running: \n   ```sh\n   cd hardhat\n   npx hardhat run scripts/deploy-nft-minter.js --network ganache\n   ```\nThis 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\n\nIf you want to test the functionnalities of the NFTMinter contract you can do it by running:\n   ```sh\n   npx hardhat test\n   ```\n\nTo start the app you have to go back to the nft-draw-minter folder and run the command:\n   ```sh\n   yarn start\n   ```\n   \n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- FUTURE DEVELOPEMENT --\u003e\n## Future developements\n\n* Creating an nft marketplace where users can exchange their drawn nfts.\n* Give user the ability to create nfts using AI (text to image).\n\n   \n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Contact --\u003e\n## Contact\n\nIf you have any question or problem running this project just contact me: aymenMir1001@gmail.com\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaymen99%2Fnft-draw-minter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaymen99%2Fnft-draw-minter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaymen99%2Fnft-draw-minter/lists"}