With the delivery of social media, the way in which individuals work together, talk and current themselves has modified. As such, the attention of how a lot these platforms affect each day dwelling is growing, 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 barely in its infancy, many are unfamiliar with find out how to construct a decentralized social media profile. Thankfully, with Moralis and Lens Protocol, you’ll be able to create a decentralized social media profile in about 20 minutes. Comply with alongside herein as we discover the steps on find out how to accomplish this!
In the event you tackle immediately’s problem, you’ll discover ways to use NextJS to create a improbable social media dapp. Alongside the way in which, you’ll discover ways to use the final word enterprise-grade Web3 API supplier – Moralis – to fetch on-chain information. In fact, additionally, you will discover ways to work with Lens Protocol – a composable and decentralized social graph. Primarily, Lens Protocol is a backend answer for storing social media information in a decentralized method. This glorious software allows you to construct a decentralized social media profile, and lets customers personal their information and content material. Furthermore, since customers get to personal their social media parts, they’ll make the most of them additional. For example, they’ll assign charges to followers or present them with prizes, resembling distinctive NFTs (non-fungible tokens).
So, when you consider in a decentralized future and the best to personal your content material, create your free Moralis account and comply with 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 immediately’s tutorial.
Our Decentralized Social Media Profile Demo
Right here’s the preliminary display screen of our instance social media dapp:
As you’ll be able to see, we considerably “modeled” Twitter. On the high of every profile web page, you’ll see a banner. Following is a profile image on the bottom-left facet of the banner. Beneath the profile image are some particulars concerning the profile at hand. That is the place our dapp shows consumer 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 consumer desires to comply with 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 screen):
When customers really click on on the “Comply with Me” button, their MetaMask extension pops up. Furthermore, it asks them to substantiate the transaction and pay the associated fuel payment.
As soon as they affirm the transaction, the “good” NFT has been despatched to their pockets. As such, they’ll use an NFT platform, resembling OpenSea, to view their new “follower” NFT:
In the event you assume 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 simple as potential, we are going to give you the starter code you’ll be able to clone. Nonetheless, you can even 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 to go to that repository and get our code first:
Subsequent, open the mission in your favourite code editor. For additional comfort, we advocate you comply with 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 use the “npm run dev” command to run an area server. Then, you should use your browser to view the preliminary state of our social media dapp. Furthermore, that is what you have to be seeing:
Trying on the screenshot above, you’ll discover that our code gives the structure you want. Additionally, it already consists of the banner template, the default profile picture, and default profile particulars. The structure 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 concentrate on implementing Web3 functionalities. Moreover, as talked about earlier, we are going to use Lens Protocol to cowl decentralized social media profile functionalities. Furthermore, Moralis will assist us fetch all of the on-chain information we’d like with single strains of code.
The way 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, in accordance with the Lens Protocol documentation, we should first be sure we will question from our dapp. Since we’ll be utilizing URQL, we have to concentrate on putting in and utilizing that GraphQL shopper:
As such, we have to comply with the directions offered by Lens’ docs, and we’ll be good to go. We will copy the strains from the “Exposing the shopper” 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’ll be able to see within the picture above, the copied code focuses on the Polygon testnet (Mumbai). Nonetheless, when you 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 deal with. We will discover it within the “API hyperlinks” part:
With the right deal with in place, we need to concentrate on querying profiles. Therefore, we use the “Get profile” part of the Lens docs. There we will 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” strains of code inside the one 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 concentrate on. 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 right down to the underside of the “index.js” file and use the next strains of code:
export async perform getServerSideProps() {
const response = await shopper.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 high of the “index.js” file:
import { shopper, Profile } from “./api/lensCalls”;
We will then additionally add a correct “return” to the “getServerSideProps” perform:
return {
props: { profile: response?.information.profile, nftArray: nftArray, myNFT: myNFT },
};
Furthermore, to get the above return, we have to add “profile” to our “Residence” element and in addition log that for comfort:
The above strains of code present us with all the main points for a selected consumer ID. As such, we will now populate the required fields of our dapp’s frontend. Thus, we have to concentrate on tweaking the content material of the “Residence” element by changing default values.
First, we change the default banner by changing the present deal with subsequent to “src” with “{profile.coverPicture.authentic.url}“. For extra particulars, use the video under, beginning at 8:50.
Moreover, we do the identical for the profile picture through the use of “{profile.image.authentic.url}“. Then, do the identical for the consumer title, deal with, and bio. Right here, we change default values with “{profile.title}“, “{profile.deal with}“, and “{profile.bio}“. Lastly, we should additionally be sure that the numbers of “followers” and “following” are correctly populated. Therefore, we change 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 Degree
Trying on the screenshot above, you’ll be able to see that with the above-implemented tweaks, our dapp collects and populates all consumer particulars. Nonetheless, you can even see that the “I’m Following” web page remains to be empty. That’s as a result of our dapp just isn’t fetching customers’ NFTs. Thankfully, the fetched particulars which might be contained in the consumer object embody the customers’ pockets addresses (9:55):
As such, we will use the ability of Moralis’ Web3 API to make use of that deal with and fetch all of the NFTs owned by it. To be able to acquire this energy, you should full the preliminary Moralis setup.
Acquiring Your Moralis Web3 API Key
In the event 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’ll be able to entry your Moralis dashboard. That is the place you’ll see the “Web3 APIs” tab within the facet menu:
After clicking the above menu choice, you’ll land on the “Web3 APIs” web page. There, you should use 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 to rename the “.env.native.instance” to “env.native”:
Making Moralis API Calls
Now that you’ve your Moralis Web3 API in place, you’ll be able to comply with 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 high of the file:
import Moralis from “moralis”;
Then, we scroll right down to the “getServerSideProps” perform. Inside that perform, we’ll concentrate on including API calls above “return” (11:04). Nonetheless, we first initialize Moralis:
Subsequent, we merely use the Moralis documentation to see what’s the perfect answer it provides to question accounts’ NFTs. We discover that the “getNFTs” endpoint will do the trick. All this endpoint requires is an deal with and a series. Thankfully, we’ve got each of those parameters – the above “ownedBy” deal with and the Polygon mainnet chain ID (“0x89″). As such, we simply copy the strains of code from the Moralis documentation and change 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 strains of code that may do the right filtering. For an in depth walkthrough, use the video under, beginning at 12:10. Finally, these are the strains of code we use:
let nftArray = [];
let nfts = balances?.information.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 “Residence” element.
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 find out how to current the “Comply with Me” NFTs as introduced 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 knowledgeable’s succesful arms. He’ll information you thru this ultimate stage of constructing a decentralized social media profile dapp within the video under (16:17).
The way to Construct a Decentralized Social Media Profile – Abstract
We coated fairly a distance in immediately’s article. Nonetheless, when you 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 potential since you didn’t have to start out from scratch. As an alternative, you used our starter code and simply included Web3 backend performance. The latter was simple, due to 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 final word Web3 API. Moreover, you used “getNFTs” and “getTokenMetadata“.
In the event you loved immediately’s tutorial, it is best to discover the Moralis YouTube channel and the Moralis weblog for Web3. The tutorials there range from probably the most primary ones to extra superior feats. As such, you’ll be able to choose those that fit your present abilities. Nonetheless, due to Moralis, your Web2 dev abilities are all you want. Moreover, since Moralis is all about cross-platform interoperability, you’ll be able to be part of the Web3 revolution using acquainted instruments. ReactJS, NextJS, Firebase, Supabase, Unity, and different platforms may be your ticket to start out creating killer dapps. It’s additionally price mentioning 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 potential. That is the place Moralis Academy could make all of the distinction. By turning into blockchain licensed, you’ll significantly improve your likelihood of touchdown a wonderful crypto job very quickly.
