Get Started in Web3 by Building a Web3 Storage App in 4 Steps

In this article we will be creating a notes app using IPFS. IPFS is a decentralized storage. To create this app we will be using following tools- - boilerplate for zk and web3 dapps. ( NextJS, React, Typescript, Metamask) zk-block - library for IPFS and provides an easy and scalable way to store data on IPFS web3 storage We wont be diving into UI or ReactJs part of the app. As these are outside the scope of the article. When dealing with any storage, there are mainly two tings that we need to deal with - Storing data Retrieving data Assuming you can handle creating a UI and user inputs in the react, we can just focus on the code that will help you interact with the IPFS using web3.storage 1. Install the web3.storage npm install web3.storage 2. You need to get an access token Getting an access token is free, and you can get yours at https://web3.storage/account/ 3. Create a storage client object const storage = new Web3Storage({ token: process.env.NEXT_PUBLIC_WEB3_KEY }); 4. Store & Retrieve Files Storing The Web3.Storage client's method accepts an array of objects. So, we will have to convert any data that we want to store in a object. put File File const finalContent = JSON.stringify(content); const file = new File([finalContent], await sha256(finalContent), { type: 'text/plain', }); Once, we have the object. we can simply call to store or upload the files to IPFS File put const cid = await storage.put([file]); CID you get back from the client when uploading is the CID of the directory and not the file itself. To link to the file itself using an IPFS URI, just add the filename to the CID, separated by a like this: . / ipfs:// / For eg, to access this blog link stored on ipfs you can use the below link - https://ipfs.io/ipfs/bafybeicbv3pjrmkx7vy27puybjitqibzo6r5hrlc2exp6jh4kf4ijhpaqe also provides callback functions to show upload progress. Optional: put const onRootCidReady = cid => { console.log('uploading files with cid:', cid) } const onStoredChunk = size => { uploaded += size const pct = totalSize / uploaded console.log(`Uploading... ${pct.toFixed(2)}% complete`) } await storage.put(files, { onRootCidReady, onStoredChunk }); Retrieving You can check your uploaded data by - https:// .ipfs.dweb.link/ https://ipfs.io/ipfs/ or via code const web3ResponseObject = await storage.get(cid); // Web3Response object The extends the object from the Web with two methods that provide access to the retrieved IPFS data: and . web3ResponseObject Response Fetch API files unixFsIterator() The method returns an array of objects, which represent all files contained in the content archive identified by the given CID. A is just like a regular web object, with the addition of and properties. These contain the relative path of the file within the archive and the CID of the file, respectively. files Web3File Web3File File path cid const files = await web3ResponseObject.files(); // return your files You can checkout the notes app in action and the source code of notes app ( called Dotes). here Subscribe to more education content - https://zkblock.app/subscribe Optional: Encrypting the data Since, all the data is publicly accessible and sometimes its best to store data in encrypted form. const stringifiedContent = JSON.stringify(content); const finalContent = CryptoJS.AES.encrypt(stringifiedContent, password).toString(); and you can decrypt like below, const retrievedContent = CryptoJS.AES.decrypt(reader.result, password).toString(CryptoJS.enc.Utf8); const actualContent = JSON.parse(retrievedContent); For more content like this checkout - https://blog.zkblock.app/ Thank you for reading. Have an amazing day! Twitter: https://twitter.com/heypran