Full Stack Web3 with Lens Protocol, Next.js, and GraphQL - Building a Social Media App

In this video you'll learn how to use Lens Protocol to build out a basic social media application.
🔗 Lens Protocol Starter - github.com/dabit3/lens-protoc...
🔗 Lens Protocol Subgraph - github.com/protofire/lens-pro...
🔗 Example codebase from tutorial - github.com/dabit3/lens-youtub...
🔗 Lens Protocol Developer Docs - lens.xyz/garden
We'll create a new Next.js app, install our dependencies, then query for user profiles. We'll then update the UI to list profiles and their metadata, and allow users to click on a profile and navigate to an individual profile view to see the user's posts.
Next we'll add a follow button to initialize a transaction in the smart contract to enable "follow" functionality. By the end of the video you should have a good understanding of how to use Lens protocol to build out your own applications.
0:00 - Introduction
3:33 - Project initialization and installing dependencies
4:41 - Creating the first query
12:00 - Rendering profiles in the UI
19:55 - Creating the profile page
37:49 - Following a user
44:44 - Wrapping up

[@Dave-gj7ss]

I belive in few years you will be the biggest web3 programming channel with millions of subs❤

[@naderdabit]

Thank you friend 💙🙌

[@prasaddpathakful]

Its criminal that this tutorial has only 4k views. Thanks for the amazing content

[@naderdabit]

thank you 💙

[@nayansoni6560]

@@naderdabit hii sir how to do basic set up for this tutorial

[@fritzuchiwa9084]

You did an extraordinary job with few or lacking documentation. Thanks a lot. This is gold

[@mohammadayaansiddiqui7125]

You are great sir, just need to be consistant. You channel is criminally underrated

[@waynesletcher7470]

Thank you. As someone completely new to coding, it's helpful to see you go through this process. You are appreciated.

[@SpOOnK3r]

Man…. You make things look SO easy!! Keep doin whatcha doin champ!

[@ekomukanga893]

So happy to discover your channel as a newbie in web3

[@al-doori2392]

Thank you so much, I was really looking for such a tutorial, I am doing my bachelors thesis about building Decentralized social media, I will put a reference to your channel in my thesis. Wish you all the best :)

[@rotpertenn]

Awesome! I was be able to deeper with Lens Thank you!

[@quatchnet]

Thanks, for a great video. You really showed me how to use lens protocol in my projects.

[@deanshaked]

Love your web3 content man, you're a legend in a making :)

[@Glow0110]

Really appreciate your videos brother!

[@naderdabit]

And I appreciate you!

[@newheba47]

Thanks Nader, That was super helpful

[@anazi]

I just found you out of some YT comment. I am happy to see your videos and very glad.

[@toiageddes1710]

thank you so much! I read the docs and used your video as a guide! so helpfull :)

[@eiht88]

Awesome content.🙏🏽 Appreciate it

[@suyesh]

This is the awesomest channel in the internet.

[@naderdabit]

💯🙌

[@naveenbhargavmallampati7786]

Thanks a lot for the tutorial

[@hdhdushsvsyshshshs]

amazing thank u so much nader, amazing content greetings from manggo team

[@TheGraphGermany]

where do you get all your energy from, traveling the world every day and such awesome support for developers. Have fun tomorrow 🎉 The Graph Day 👨‍🚀

[@naderdabit]

Thank you my friend, I enjoy what I do so that definitely helps 💙

[@TheGraphGermany]

@@naderdabit I hope you enjoy the party The Graph Day 😉🎉 next year we see us.🙏

[@juanpasalagua2402]

So awesome, thanks for taking the time to explain everything in detail, it is very educational. Quick question, and maybe I missed it, but how do you populate the app? Thanks again, Juan

[@user-pr5nx7hs4j]

thank you for it, great video.

[@josemfcheo]

This is gold

[@zoVargas]

Thank you.

[@yyyd6559]

Thank brother

[@mrchreesaproductions1137]

Don't seem to be able to fetch pictures from ipfs even with the config

[@anthonynolanjannotta4688]

when it comes to posting a publication, If i want to build a social media app and restrict posting to only owners of an NFT or something. there's nothing stopping anyone from calling post() on the lens hub contract and making the uri look exactly like a post from the restricted group? And if the if it follows the standard it would be displayed in the apps front end, right?

[@0xDAEF0F]

not all heroes wear capes

[@rahulagarwal968]

Can you please make a video tutorial on nft ticketing or you can say book events dapp !

[@jmula1963]

can i use lens protocol with avalanche / avax instead of L1 ethereum o na?

[@mehrdad1068]

Please make tutorial for presale whitelisted nft dapp with merkle tree🤙🚀

[@sathyaprakash8081]

Please make a video of soft staking NFT

[@2irl]

W

[@TheConstantLearnerGuy]

:)

[@parshvisrivastava4408]

I know I am asking too much but could you also make a video about the backend like if we want to modify few functionality? And how to handle that.

[@toiageddes1710]

I want to ask you! you are following without having an account?

[@justkaz7104]

690

[@powerfulcreations]

I have lost interest in making a social media network!

[@ashleylarrieux4175]

Hey Folks I am hoping to get some feedback I am currently getting this error, but sounds like it should have been accounted for Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'url') Source pages\index.js (32:52) @ eval 30 | profile.picture ? ( 31 | 32 | src={profile.picture.original.url} | ^ 33 | width="60px" 34 | height="60px" 35 | /> Call Stack Home

[@ashleylarrieux4175]

actual arrow is pointing on the url section

[@ashleylarrieux4175]

return ( { profiles.map((profile, index) => ( { profile.picture ? ( ) : ( ) } {profile.handle} {profile.bio} )) } )

[@ai_sculptor]

I m getting the same error actually, any fix??

[@grungecoders]

Apparently some of the profiles have NFT images as their profile pictures that is why we have to take it into consideration. Moreover, there is an issue with Image from next, that is why I have changed it to regular img tag and it worked. Below you can find the temporary workaround

[@jdubhman]

In my case I found adding the url 'cf-ipfs.com' to the next.config.js inside the domains array fixed a similar issue with the lens protocol frontend repo, originally when clicking explore profiles was throwing an error for the images.

[@leandro1.618]

The solution for the next.config file is deprecated; images: { domains: ["lens.infura-ipfs.io"], remotePatterns: [ { protocol: "ipfs", hostname: "**", pathname: "**", }, ], },