Lens Protocol - The ULTIMATE Guide 🌿 // Build A Decentralized Web3 Social Media App!

Learn how to build a decentralized social media application using Lens Protocol, thirdweb Next.js, Tanstack Query, and GraphQL Codegen! Learn everything from what Lens Protocol is and how it works, to building a full-stack web3 application on top of Lens.
🍃 Resources 🍃
- How to create a testnet Lens profile: gateway.ipfscdn.io/ipfs/Qmdjb...
- Lens API Examples Repo: github.com/lens-protocol/api-...
🥫Source Code 🥫
GitHub: github.com/jarrodwatts/lens-c...
Replit: replit.com/@JarrodWatts/lens-...
📙Community Support 📙
My Discord: / discord
thirdweb Discord: / discord
🧰 Tools used in this video 🧰
- Lens Protocol: docs.lens.xyz/
- thirdweb: portal.thirdweb.com/
- Next.js: nextjs.org/
- Tanstack React Query: tanstack.com/query/v4/
- GraphQL Codegen: the-guild.dev/graphql/codegen
🍕 Follow Me 🍕
Twitter: / jarrodwattsdev
Lens: www.lensfrens.xyz/jarrodwatts...
⌚ Timestamps ⌚
0:00 - Introduction
01:52 - What is Lens?
15:08 - How Lens Works
24:22 - The Lens Indexer
30:32 - Frontend Tech Stack
35:26 - Creating a Next.js App
39:05 - Tanstack Query
51:07 - GraphQL Codegen
1:15:37 - Custom Fetcher Function
1:23:42 - Thirdweb
1:36:33 - Sign in with Lens
2:01:47 - Persisting Auth State
2:19:22 - Authenticated API Requests
2:29:41 - Lens User Profiles
2:45:10 - Debugging Auth Setup
2:54:28 - Tanstack Query Invalidation
2:59:25 - Feed Page
3:23:27 - Profile Page
3:55:30 - Header Component
4:02:45 - EIP712, Broadcaster & Dispatcher
4:16:09 - Following Users
4:45:09 - Creating Posts
5:23:15 - Deploying to Vercel
5:25:12 - Outro - Subscribe!
🏫 Video Summary 🏫
This video covers everything from what Lens is to how to deploy a full-stack robust web3 application to production. The Lens Protocol is a set of smart contracts deployed to the Polygon blockchain that provide a decentralized social graph.
With Lens, developers can quickly build decentralized applications (dApps) that leverage this social graph to create a variety of social media functionality, including user profiles, follow relationships, and content sharing.
By the end of this tutorial, you'll have a deep understanding of how to use the Lens Protocol to build decentralized social media applications, and be well-equipped to deploy your own application to production.

[@jingli9232]

OMG, you're awesome!! will pull an all-nighter to finish this one, big shout out from China

[@JarrodWatts]

Thank you! Hope you enjoy it :)

[@shrirambalaji2915]

Jarrod, I want to express my gratitude for the excellent work you've done. Your efforts are truly appreciated.

[@andrey9731]

Thanks a lot, Jarrod. So much new knowledge and fun from a single video👷‍♂

[@cialoneCodes]

Great one - very informative. Excellent Tutorial

[@manujasan9176]

Hey Jarrod, I donno if you're gonna read this but just got to be straight with you. I have my senior yr major project submission in like 15 hours and we're making a web3 social. I was stuck with lens ( had done a bit of the UI for our app ) and finding this is a life saver.

[@Abhishek-jv7oe]

hi can you help me ?

[@joseph5058]

Thank You Jarrod

[@JarrodWatts]

Thank you Joseph!

[@NewMillions]

Wonderful practice with clear explanation. Thanks for sharing 😍. Could you share an extension you used during that project?

[@bendevweb89]

I discovered your channel and subscribed recently. This is the first of your projects that I follow and I found it really good and well explained! 👏 I wanted to know if it would be possible in a future project that you integrate the deployment part on Vercel for example. To also be able to learn and master the deployment of Dapp on the web. Thanks

[@JarrodWatts]

Thanks Ben! I briefly use the Vercel CLI at the very end of this video to ship our project!

[@justinhooker5249]

Amazing content! I really appreciate the thorough explanation of concepts and associated tech. One note, I believe Lens deploys a subgraph to The Graph as its indexing solution for its API but I could definitely be wrong there.

[@justinhooker5249]

Quick question - what were the challenges with using the generated query for useGeneratedChallenge? It was hard for me to follow why we made a custom function here.

[@harrishselvarajah3636]

Awesome Video!! Would be great if you could do a video on how LENS handles authentication.

[@btc_only]

Do you have any important setup updates that you applied to Chainblog like the Context? Thanks

[@martafattori953]

Hey! Very interesting tutorial. Thanks for sharing. I noticed you can't create / mint new profiles. Actually the Lens api-example graphql query on their github for creating new profiles doesn't work. Do you have any resource on that?

[@rayyan21d]

This is crazy content

[@kithkui]

Hello Jarrod, this comes very handy today, as yesterday I was doing research into Lens and trying to start building with it. I have a few questions before I embark on the journey of this amazing tutorial: - What are the requirements for this tutorial? - Do I need to have a Lens claimed handle? - Who are the potential users from the app that I'll build? Can I onboard anyone on the internet or they need to have certain requirements? Thank you for creating this and helping us move a step closer towards something awesome.

[@JarrodWatts]

Happy to answer your questions! - You'll need a basic dev set up (npm, node js, etc.) - There's a guide in the description on how to use the test net if you don't have a Lens profile on mainnet just yet - You can onboard anyone that has a Lens profile; but this video is designed to set you up for success building any kind of project on Lens

[@kithkui]

@@JarrodWatts Thank you. I'll check this out and explore what comes.

[@dereksantossidi6850]

The super Mario brawl music xD

[@varunsharma7706]

Hey jarrod, I am not able to upload any kind of media to my post. What should I do?

[@Sam-bw9ch]

Is the lens testnet profile site not working? Can't seem to get a testnet profile.

[@thurendous]

awesome!! wanted to watch this and it came out

[@JarrodWatts]

Awesome :) seems like the HD version is still processing atm

[@tanmaysrivastava849]

on changing it to test network, the profile button asks to switch network. Does anyone know how to fix this?

[@abbaskhan2017]

This ❤

[@duellinks2891]

Wait so how does the content get moderated on lens?

[@muatasimahmed2343]

Prerequisites for this course ? Please 🥺

[@user-np2fd4kl5p]

I am lost in the schema part for codegen. Can someone help?

[@jingli9232]

how about useSWR versus React Query? It seems to be a more adopted way to deal with data

[@JarrodWatts]

I think useSWR and React Query are pretty similar solutions - I've personally been loving React query recently as recommended by a few other creators that I follow like T3.gg!

[@peacefulcandlestix3309]

how do i get a text editor that looks like this? in 37:00

[@ryanh8764]

wow

[@motunks]

Now you have me all hyped up about Lens and want to try it. I wish i can get a Lens handle on mainnet. Just tried to create an account but it says my wallet is not Whitelisted. how to get a handle please?

[@JarrodWatts]

You can use the test net if you don’t have a handle on mainnet (guide in the description)

[@Kunal-jp8tn]

For me it says, that Property 'signTypedData' does not exist on type 'UserWallet'. I can't use the sdk.wallet.signTypedData function. What should I do 🤔🤔🤔 ?

[@JarrodWatts]

Hey Kunal- try updating the thirdweb SDK to the latest version - jump into our discord if you need further help!

[@Kunal-jp8tn]

@@JarrodWatts Thank you so much. Great tutorial !

[@tanmayagrawal7256]

Any possibilities of Airdrop ?

[@JarrodWatts]

Nope, there’s a guide on how to get a profile on the test network if you are interested

[@MrLuiscarbajal]

what is the auto complete plugin at 46:26? kzbin.info/www/bejne/m2LQgaB6h7qIeMU

[@SynapseNervosa]

github co-pilot

[@muatasimahmed2343]

I want you to make a paid course

[@joseph5058]

But why is the quality low? 😭😭😭

[@JarrodWatts]

HD still processing! Will be full quality in a few hours from now, sorry about that!

[@JarrodWatts]

I'll unlist it for now until the HD is processed by KZbin! 😬

[@joseph5058]

@@JarrodWatts thanks

[@JarrodWatts]

4K available now! 🥳

[@JustThink2000]

The music is too loud during the first minute or so 🤦🏾‍♀️

[@JarrodWatts]

Thanks for letting me know, I’ll lower it next time

[@climate-moneymakingcampaig305]

I would appreciate u if throw out whatever it is in ur mouth Pls make video for non-australian ppl so that the whole world uses not only australians that understand that accent very well If not all fine, i get my info somewhere else no pressure