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://<cid>/<filename> 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://<cid>.ipfs.dweb.link/ <cid> 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

Fetch

Mozilla

Twitter

Revisiting Making Money in Crypto

Try new EVM Toolkit

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Dapps

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptocurrency

Too Long; Didn't Read

Make resilience your competitive advantage

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

4 Must-Have Crypto Browser Extensions

The Noonification: Can You Improve Your Mental Health with Psychedelics? (11/28/2022)

The Noonification: White Man (11/26/2022)

The Noonification: In Search For Future Crypto Trends (11/23/2022)

The Noonification: How to Lose Employee Trust in 8 Easy Steps (11/17/2022)

4 Must-Have Crypto Browser Extensions

The Noonification: Can You Improve Your Mental Health with Psychedelics? (11/28/2022)

The Noonification: White Man (11/26/2022)

The Noonification: In Search For Future Crypto Trends (11/23/2022)

The Noonification: How to Lose Employee Trust in 8 Easy Steps (11/17/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps