Building a decentralized blog with Lens, Vue & IPFS — Part 1
Breaking web2 network effects will take time. We are going to need better dapps, better UX, new business models and clever strategies. Meanwhile, we keep moving towards a decentralized future with great projects like Lens.
Lens is a protocol that allows developers to create decentralized applications leveraging common social features like profiles, posts, comments, and likes. This allows communities to easily develop open, composable and portable networks on top of it.
Software networks should be commoditized. To make my point, I developed a simple decentralized blogging dapp. If you are interested in the project, please reach out to me!
Demo App (Depost)
In this article, I will be showing you how to create a fully decentralized social blog application. I’ll be using Lens protocol, VueJS, IPFS, Arweave and GraphQL.
What we will learn:
- Authenticate to Lens
- Creating a feed of the latest posts
- Searching posts by hashtags
- Fetch profile data
- Post an article
- Hide an article
- Authenticate to Lens
Using our Login button we are going to use metamask to log into MATIC network and sign our message requesting an auth token from lens.
We are also going to create a middleware that updates the token every time we refresh the browser.
2. Creating a feed of the latest posts
Now we can start querying the lens API. I created a lens_api.js file with queries I copy and paste from the docs, and others that I created. For this particular query, we are going to use the explorePublications.
Every post includes metadata and field appId which in our case is “depost”. This is significant because lens is an open blockchain so every dapp will have its own related content and the only way to filter them is by this field.
3. Searching posts by hashtags
In their documentation lens explain they are working hard in allowing more complex and rich searches. Meanwhile, only allows searching publications based on #hashtags on the content so we must write explicit hashtags in our posts if we want them to be found.
I made a little modification to the docs query so we can create a functional query relevant to Depost.
4. Fetch profile data
Lens profiles are identified by ID (e.g. 0x0340) or Handle (e.g. fabri.lens). We can also fetch the defaultProfile for a given wallet address. I made a simple script that makes a query based in the profile format given in the url.
I created another GraphQL query that allows us to filter by handle.
5. Post an article
For my text editor I’m currently using the library vuejs-medium-editor for making the experience a bit more real but consider this editor needs a lot of work to be really like Medium’s.
The method savePost takes as an input the content, title, and cover image and generates the post metadata that will later be uploaded to IPFS. With the IPFS URI we can now interact with lens contract and wait for the transaction to execute. We will be paying a bit of MATIC every time we post.
8. Hide an article
Finally, we are going to execute a mutation. Mutations differ from queries in the sense that they don’t retrieve information, they only update. Because Lens is a blockchain we can’t delete information, but we can hide posts by updating a single field. Then in our queries hidden posts will not be visible by default. Lens handles this automagically 💌
Mutations require authentication, what I mean with this is that the request must send the auth token on the header. This is already handled in our createClient method.
Conclusion
It’s incredibly convenient to create dapps using Lens as it handles all the backend infrastructure. Web3 will be about great frontend experiences and community. Backends and data are now a commodity available to everyone.
This is the first of many series I intend to write about bootstrapping decentralized economies. The general idea of the research is explained in my other post about breaking web2 network effects.
To learn more about web3 technology, take a look at my other posts. For more information, feel free to reach out on Twitter, or fguespe@gmail.com.
