With the start of social media, the way in which folks work together, talk and current themselves has modified. As such, the attention of how a lot these platforms affect day by day residing is rising, and as customers of centralized social media behemoths fall sufferer to privateness breaches, individuals are turning their consideration to blockchain, the place decentralized social media profiles reign. Nonetheless, since Web3 is just in its infancy, many are unfamiliar with tips on how to construct a decentralized social media profile. Happily, with Moralis and Lens Protocol, you possibly can create a decentralized social media profile in about 20 minutes. Comply with alongside herein as we discover the steps on tips on how to accomplish this!
Should you tackle as we speak’s problem, you’ll learn to use NextJS to create a unbelievable social media dapp. Alongside the way in which, you’ll learn to use the last word enterprise-grade Web3 API supplier – Moralis – to fetch on-chain knowledge. In fact, additionally, you will learn to work with Lens Protocol – a composable and decentralized social graph. Basically, Lens Protocol is a backend resolution for storing social media knowledge in a decentralized method. This glorious software allows you to construct a decentralized social media profile, and lets customers personal their knowledge and content material. Furthermore, since customers get to personal their social media parts, they’ll make the most of them additional. As an example, they’ll assign charges to followers or present them with prizes, corresponding to distinctive NFTs (non-fungible tokens).
So, if you happen to imagine in a decentralized future and the appropriate to personal your content material, create your free Moralis account and observe our lead. We are going to begin with a fast demo of our completed decentralized social media profile. Therefore, you’ll know what to anticipate from as we speak’s tutorial.
Our Decentralized Social Media Profile Demo
Right here’s the preliminary display of our instance social media dapp:
As you possibly can see, we considerably “modeled” Twitter. On the prime of every profile web page, you’ll see a banner. Following is a profile image on the bottom-left aspect of the banner. Beneath the profile image are some particulars in regards to the profile at hand. That is the place our dapp shows person names, “Lens” addresses, statuses, and numbers of followers and following.
The screenshot above represents our dapp when deciding on the “I’m Following” web page. This web page shows animated NFTs of profiles that “alunm.eth” follows. Nonetheless, let’s say an instance person desires to observe the “alunm.eth” profile. In that case, they should go to the “Comply with Me” tab and click on on the “Comply with Me” button. By following this profile, followers obtain a “good” NFT (displayed within the bottom-right nook of the display):
When customers really click on on the “Comply with Me” button, their MetaMask extension pops up. Furthermore, it asks them to verify the transaction and pay the associated fuel charge.
As soon as they affirm the transaction, the “good” NFT has been despatched to their pockets. As such, they’ll use an NFT platform, corresponding to OpenSea, to view their new “follower” NFT:
Should you suppose our instance dapp is cool, bounce to the subsequent part. There, you’ll begin constructing your personal occasion of this decentralized social media profile dapp. To make issues as easy as doable, we’ll give you the starter code you possibly can clone. Nonetheless, you can too go for the completed code and easily use our tutorial as a code walkthrough.
Constructing a Decentralized Social Media Profile with Lens Protocol and Moralis
As talked about above, our directions presume you begin by cloning the “web3profile-starter” code, which awaits you on GitHub. So, be sure that to go to that repository and get our code first:
Subsequent, open the undertaking in your favourite code editor. For further comfort, we advocate you observe our lead and use Visible Studio Code (VSC). Utilizing VSC’s terminal, you’ll want to set up all dependencies utilizing the “npm i” command:
With all dependencies put in, you should utilize the “npm run dev” command to run a neighborhood server. Then, you should utilize your browser to view the preliminary state of our social media dapp. Furthermore, that is what try to be seeing:
Wanting on the screenshot above, you’ll discover that our code offers the format you want. Additionally, it already consists of the banner template, the default profile picture, and default profile particulars. The format additionally already consists of the “I’m Following”, “Comply with Me”, and “Social Posts” tabs.
Therefore, it is a excellent place to begin so that you can give attention to implementing Web3 functionalities. Moreover, as talked about earlier, we’ll use Lens Protocol to cowl decentralized social media profile functionalities. Furthermore, Moralis will assist us fetch all of the on-chain knowledge we want with single traces of code.
Methods to Use Lens Protocol to Construct a Decentralized Social Media Profile
We are going to use the Lens API to construct a decentralized social media profile. Moreover, based on the Lens Protocol documentation, we should first be sure that we are able to question from our dapp. Since we’ll be utilizing URQL, we have to give attention to putting in and utilizing that GraphQL consumer:
As such, we have to observe the directions offered by Lens’ docs, and we’ll be good to go. We are able to copy the traces from the “Exposing the consumer” part. Then we return to VSC, the place we create the “lensCalls.js” file contained in the “pages/api” folder. Inside that file, we paste the copied code:
As you possibly can see within the picture above, the copied code focuses on the Polygon testnet (Mumbai). Nonetheless, if you happen to recall our demo, you already know our dapp runs on the Polygon mainnet (the Matic mainnet). As such, we have to change the above-marked “HTTPS” accordingly. Therefore, we return to Lens’ docs and replica that handle. We are able to discover it within the “API hyperlinks” part:
With the right handle in place, we need to give attention to querying profiles. Therefore, we use the “Get profile” part of the Lens docs. There we are able to discover the code wanted to question profiles. Then, we merely copy it:
Subsequent, we return to the “lensCalls.js” file. There, we should first export our question utilizing this line of code:
Export const Profile= ‘
‘
Then, we paste the copied “Get by profile id” traces of code inside the only citation marks above. Furthermore, the copied code focuses on the “0x01” profile ID. As such, we have to know the ID of different profiles we need to give attention to. For instance, let’s change the profile ID to “0x09“:
Our Dapp’s Frontend
Open the “index.js” file, which covers our dapp’s frontend as demonstrated in its preliminary stage. To fetch an precise decentralized social media profile, we have to add the right code. As such, scroll all the way down to the underside of the “index.js” file and use the next traces of code:
export async perform getServerSideProps() {
const response = await consumer.question(Profile).toPromise();
Nonetheless, to make the above question perform, we additionally must import “urqlClient” and “Profile“. Thus, we add this line of code on the prime of the “index.js” file:
import { consumer, Profile } from “./api/lensCalls”;
We are able to then additionally add a correct “return” to the “getServerSideProps” perform:
return {
props: { profile: response?.knowledge.profile, nftArray: nftArray, myNFT: myNFT },
};
Furthermore, to get the above return, we have to add “profile” to our “House” part and likewise log that for comfort:
The above traces of code present us with all the small print for a specific person ID. As such, we are able to now populate the required fields of our dapp’s frontend. Thus, we have to give attention to tweaking the content material of the “House” part by changing default values.
First, we exchange the default banner by changing the present handle subsequent to “src” with “{profile.coverPicture.unique.url}“. For extra particulars, use the video under, beginning at 8:50.
Moreover, we do the identical for the profile picture by utilizing “{profile.image.unique.url}“. Then, do the identical for the person identify, deal with, and bio. Right here, we exchange default values with “{profile.identify}“, “{profile.deal with}“, and “{profile.bio}“. Lastly, we should additionally be sure that the numbers of “followers” and “following” are correctly populated. Therefore, we exchange the default values with “{profile.stats.totalFollowers}” and “{profile.stats.totalFollowing}”. Right here’s the outcome for “0x09“:
Taking a Decentralized Social Media Profile Dapp to the Subsequent Stage
Wanting on the screenshot above, you possibly can see that with the above-implemented tweaks, our dapp collects and populates all person particulars. Nonetheless, you can too see that the “I’m Following” web page continues to be empty. That’s as a result of our dapp is just not fetching customers’ NFTs. Happily, the fetched particulars which are contained in the person object embody the customers’ pockets addresses (9:55):
As such, we are able to use the facility of Moralis’ Web3 API to make use of that handle and fetch all of the NFTs owned by it. With a purpose to get hold of this energy, you have to full the preliminary Moralis setup.
Acquiring Your Moralis Web3 API Key
Should you haven’t created your free Moralis account but, achieve this now. You need to use the “create your free Moralis account” hyperlink within the intro or go to the Moralis homepage. Upon getting your Moralis account up and operating, you possibly can entry your Moralis dashboard. That is the place you’ll see the “Web3 APIs” tab within the aspect menu:
After clicking the above menu possibility, you’ll land on the “Web3 APIs” web page. There, you should utilize the “copy” icon to get your Moralis Web3 API key:
Lastly, return to VSC and paste the above-copied key contained in the “.env.native.instance” file. Nonetheless, additionally be sure that to rename the “.env.native.instance” to “env.native”:
Making Moralis API Calls
Now that you’ve your Moralis Web3 API in place, you possibly can observe our lead as we begin making Moralis API calls. To do that, we have to return to the “index.js” file and first import the Moralis SDK. Therefore, we add the next line of code on the prime of the file:
import Moralis from “moralis”;
Then, we scroll all the way down to the “getServerSideProps” perform. Inside that perform, we’ll give attention to including API calls above “return” (11:04). Nonetheless, we first initialize Moralis:
Subsequent, we merely use the Moralis documentation to see what’s the very best resolution it presents to question accounts’ NFTs. We discover that the “getNFTs” endpoint will do the trick. All this endpoint requires is an handle and a series. Happily, we now have each of those parameters – the above “ownedBy” handle and the Polygon mainnet chain ID (“0x89″). As such, we simply copy the traces of code from the Moralis documentation and exchange the 2 parameters with correct values:
Displaying Solely Lens Protocol NFTs
Subsequent, we need to show solely the Lens Protocol NFTs on the “I’m Following” web page. As such, we have to implement the traces of code that can do the right filtering. For an in depth walkthrough, use the video under, beginning at 12:10. Finally, these are the traces of code we use:
let nftArray = [];
let nfts = balances?.knowledge.outcome;
for (let i = 0; i < nfts.size; i++) {
if (nfts[i].metadata !== null) {
if (
“animation_url” in JSON.parse(nfts[i].metadata) &&
JSON.parse(nfts[i].metadata).animation_url !== null &&
JSON.parse(nfts[i].metadata).animation_url.consists of(“.lens”)
) {
nftArray.push(JSON.parse(nfts[i].metadata).animation_url);
}
}
}
As well as, we should additionally add “nftArray” to the “House” part.
Transferring on, we additionally need to show NFTs customers get by following that account on the “Comply with Me” web page. That is the place we’ll use the “getTokenMetadata” Moralis API endpoint (14:16):
For particulars on tips on how to current the “Comply with Me” NFTs as offered within the demo, use the video under (15:27).
Final however not least, you additionally need to activate the “Comply with Me” button. That is the place we hand you over to our in-house professional’s succesful palms. He’ll information you thru this closing stage of constructing a decentralized social media profile dapp within the video under (16:17).
Methods to Construct a Decentralized Social Media Profile – Abstract
We coated fairly a distance in as we speak’s article. Nonetheless, if you happen to adopted our lead and the video above, you had an opportunity to create your personal occasion of a decentralized social media profile dapp in lower than 20 minutes. In fact, that was doable since you didn’t have to start out from scratch. As a substitute, you used our starter code and simply included Web3 backend performance. The latter was easy, because of Moralis’ and Lens Protocol’s docs. Alongside the way in which, you additionally obtained your Moralis Web3 API key, which gave you entry to the last word Web3 API. Moreover, you used “getNFTs” and “getTokenMetadata“.
Should you loved as we speak’s tutorial, it is best to discover the Moralis YouTube channel and the Moralis weblog for Web3. The tutorials there fluctuate from essentially the most primary ones to extra superior feats. As such, you possibly can decide those that fit your present abilities. Nonetheless, because of Moralis, your Web2 dev abilities are all you want. Moreover, since Moralis is all about cross-platform interoperability, you possibly can be a part of the Web3 revolution using acquainted instruments. ReactJS, NextJS, Firebase, Supabase, Unity, and different platforms will be your ticket to start out creating killer dapps. It’s additionally price declaring that Moralis helps all main programmable chains. In consequence, you get to future-proof your dapps.
Final however not least, you may additionally need to go full-time crypto as quickly as doable. That is the place Moralis Academy could make all of the distinction. By turning into blockchain licensed, you’ll enormously improve your probability of touchdown a wonderful crypto job very quickly.
