{"id":20008302,"url":"https://github.com/bethanyuo/registry-dapp","last_synced_at":"2026-04-29T15:33:50.782Z","repository":{"id":42758235,"uuid":"278679856","full_name":"bethanyuo/registry-dApp","owner":"bethanyuo","description":"Deploy a Document Registry DApp with Web3 on IPFS.","archived":false,"fork":false,"pushed_at":"2022-03-27T02:58:14.000Z","size":1047,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-29T09:57:51.404Z","etag":null,"topics":["dapp","ipfs","web3","webjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bethanyuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-10T16:17:48.000Z","updated_at":"2020-07-12T17:00:50.000Z","dependencies_parsed_at":"2022-09-08T04:23:00.212Z","dependency_job_id":null,"html_url":"https://github.com/bethanyuo/registry-dApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bethanyuo/registry-dApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethanyuo%2Fregistry-dApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethanyuo%2Fregistry-dApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethanyuo%2Fregistry-dApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethanyuo%2Fregistry-dApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bethanyuo","download_url":"https://codeload.github.com/bethanyuo/registry-dApp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethanyuo%2Fregistry-dApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32431711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dapp","ipfs","web3","webjs"],"created_at":"2024-11-13T07:09:19.552Z","updated_at":"2026-04-29T15:33:50.767Z","avatar_url":"https://github.com/bethanyuo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Document Registry dApp\nA document registry is a repository that contains links to documents added in the system. The Document Registry DApp is a simple registry for documents stored in a decentralized system which only the contract creator can add, but anyone can see them.\n\n## Goal\n* To deploy a simple Smart Contract using Remix IDE in Ganache CLI – command version of Ganache, a personal Ethereum blockchain perfect for our development purposes.\n* To create a simple JavaScript app, which will interact with the contract using Web3 API and MetaMask.\n* To utilize IPFS in storing binary data. For the example, document images will not be stored in the contract, but in IPFS. The contract should only store a representation of the images (eg. IPFS hash).\n\n## Requirements\n*\t[Remix IDE](https://remix.ethereum.org/)\n*\tGanache CLI  v6.9.1\n```bash\n$ npm install –g ganache-cli@6.9.1\n```\n*\tWeb3  v2.6.1\n*\tMetaMask  v7.7.8\n*\t[NodeJS](https://nodejs.org/en/download/releases/)  v13.5.0\n*\tNPM  v6.13.4\n*\t[IPFS](https://dist.ipfs.io/go-ipfs/v0.4.23)  v0.4.23\n\nYou might find that your version is higher, that is okay. Avoid using versions lower than what is specified as libraries used in this exercise might not be available old older versions or screenshots may not match the ones that you see on your screen.\nYou may or may not experience difficulties, but if you do, make sure to comply with these versions first before reporting to the instructors.\n\n## Setup the Project\n1.\tClone or download the code template here:\n```bash\n$ git clone https://github.com/kingsland-innovation-center/document-registry.git\n```\nIf you don’t have git, download the code templates here:\nhttps://github.com/kingsland-innovation-center/document-registry\n\n2.\tNavigate to that folder in the terminal and install the dependencies:\n```bash\n$ npm install\n```\n\n## Create the Smart Contract\n1.\tCreate a DocumentRegistry.sol file which will hold the smart contract implementation and define the version.\n \n2.\tCreate a simple structure called Document, which stores the string hash of the document in IPFS and the date it has been added. The contract will have an array of documents and an address which will store the owner’s address.\n \n3.\tA simple modifier `onlyOwner` which makes sure the caller of the method is the contract owner.\n \n4.\tCreate the constructor, which will make the executor owner of the contract.\n \n5.\tCreate an add function, which adds a document in the array by from its hash and the current time (`block.timestamp`) in the structure. The function returns the date of the added document.\n \n6.\tFinally, create `getDocumentsCount()` and `getDocument(uint256 index)` functions. This returns the count of the documents and a document by a given index.\n \n## Create JavaScript Front-end\n1.\tCreate the jQuery function which will run as soon as the DOM becomes safe to manipulate.\n \n\n2.\tAs of Metamask v4.14.0, a call to `ethereum.enable()` is necessary to gain access to a user’s accounts in Metamask and enable RPC interactions. Read more here if you want to look at more details: [EIPS](https://eips.ethereum.org/EIPS/eip-1102).\n\nAllow access using the `Injected Web3` in the browser.\n\n3.\tNext, insert the constants of the contract address and contract ABI. We will get back to this and replace it with the correct values after the contract is deployed. Also, initialize the IPFS library.\n\n4.\tPrepare the function for uploading the document. There are preset codes before this code separated with User Interface Handlers Start/End markers. This takes care of adding handlers to the user interface components.\n \n5.\tCheck if there is any file to upload, if not, show error message.\n \n6.\tCreate a file reader to read the given document as an array buffer.\n \n7.\tIn the onload property check whether web3 is included.\nThen, use Buffer to get a buffer from the file reader result.\n\nInitialize the contract using the ABI and contract address.\n \n8.\tNext, use IPFS to add the document.\n\nAfter it is uploaded, call the contract by its ABI and address and add the document.\nPutting it all together, you end up with this `uploadDocument()` implementation:\n \n9.\tNow the function showing the documents. First, it will check if web3 is defined:\n \n10.\tFinally, call the contract and get the count of the documents.\nAfter the documents count is returned, implement a `for-loop` that iterates through the index and retrieves each document.\n\nFor each document, from the received image hash create a URL with `https://localhost:8080/ipfs/{hash}` and add it as a source of an `\u003cimg\u003e` tag.\n\nBeautify the received date and place it in a `\u003cp\u003e` tag. Then, append them both in a `\u003cdiv\u003e` and finally, append it to `#viewGetDocuments`.\n \n## Deploy the Document Registry Contract\n\n1.\tInstall ganache by the command:\n```bash\n$ npm install –g ganache-cli@6.9.1\n```\n\n2.\tStart ganache-cli by issuing this command on the terminal:\n```bash\n$ ganache-cli\n```\nNOTE: Do not close this terminal as you go along with the next activities.\n\n3.\tGo to [Remix](remix.ethereum.org) and return to your DocumentRegistry.sol smart contract code.\n\n4.\tCompile and choose the Web3 Provider to connect to Ganache. If you get an error message, make sure you use `http` protocol (not `https`) when opening Remix. \n\n5.\tIn Account you must see the accounts from your local Ethereum network.\n\n6.\tDeploy the contract. After the deployment, the contract will appear beneath. Copy the contract address.\n\n7.\tTo get the ABI, go back to Solidity compiler, copy the output.\n \n8.\tGo back to the project and paste the Contract Address and the ABI for the variables we previously wrote.\n \n \n## IPFS Configuration\n1.\tYou should have installed IPFS and added it to your Path or simply extract it somewhere and launch a terminal on that particular folder.\n \n\n2.\tIn your IPFS configuration file, set the API HTTP CORS header so that there would be no CORS-related errors in the browser:\n* For Windows, the configuration file can be found in:\t\t `%homepath%\\.ipfs`\n* For Unix-like platforms, the configuration file is located in:\t `~/.ipfs`\n \n\n3.\tStart the IPFS daemon:\n```bash\n$ ipfs daemon\n```\n \n## Interacting with the Contract and IPFS\n1.\tLog-in to MetaMask and switch to Local Network and prepare to import a private key.\n\n2.\tImport the private keys from ganache-cli:\n* Contract creator account – The account used to deploy the contract previously in Remix IDE.\n*\tOne random account.\n \n3.\tGo back to your document-registry workspace and launch the client:\n```bash\n$ npm start\n```\n\n4.\tGo to your browser and visit http://localhost:3000.\n\n5.\tUpload any kind of a file in the [Submit Document] section. Click [Submit].\n \n6.\tA MetaMask prompt will appear, click [Confirm].\n\n7.\tConfirmation messages will appear both in the browser and in Ganache-CLI\n \n8.\tGo to [View Documents] to see successfully submitted documents.\n\n## Module\nMI4: Module 3: E2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbethanyuo%2Fregistry-dapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbethanyuo%2Fregistry-dapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbethanyuo%2Fregistry-dapp/lists"}