Understanding the Shift to Web3 Frontend dev

Hi there! I'm @jio_jake, Web3 frontend developer in @Yooldo_Games.

I just started my tech blog sharing my techy lesson points to all Web3 beginners who feel nervous like my last year. Now I'm the one of the Web3 Ethereum builders but usually I have no idea of market stuff. But what I definitely can tell all crypto dev newbie is building in Web3 frontend is AWESOME and very clear. I want to share my tips from today so keep subscribing please 😆

First of all, In my personal opinion, there would be no superior or inferior between Web2 FE and Web3 FE. Please just think as one of the field of business.

Based on my experience, Frontend developer should have skills like below:

• UX(User Experience). Track the activity of users is always the key of frontend.

• Javascript. The world is consist of javascript. I swear.

• React-like framework. If you want to be hired in company, we have to accustomed to framework.

• Collaboration & Communication. Frontend is literally the end part of every tech and visual part. Sometimes, we have to align all team mates as one team.

• Problem Solving. This ability is based on how i know about our team business and knowing in-house tech structure

Frontend engineers struggle to enhance user experience. This might involve translating complex business jargon into more user-friendly language or optimizing the user journey to reduce friction. However, in Web3 companies, the role of a frontend engineer takes on a slightly different approach when it comes to user-friendliness.

Very first time, I reviewed the projects in current team. But I can't get in anything. the terms are not explained well. but a lot of users are gathered and chatting in community. I want to know what makes these users gathered. The key point was in exclusive group culture.

Here are the ideal case of Web2 service user journey:

1. Users discover our services for the first time through advertisements, viral marketing, recommendation from friends or direct searches.

2. The newbie user comes to our service.

3. Our service fully take care about users. preventing outbound, recommend some contents or items suitable with user's taste.

4. This makes the user loyalty. He(She) becomes a big fan of our service.

But honestly, in normal Web3 service as following below:

Please note that your service is written on the premise that it has a huge number of fans and builders.

1. The user who in exclusive chat first heard about our service. The service announced a huge partnership and shouted out from KOL(Key Opinion Leader)

2. The newbie user decide to trust our service because of the reputation of the name of big partner.

3. The user spend some ethereum to participate the event. and connect the wallet in our service.

4. Those kind of things happened again, and WOW! we made the hype of project.

The interesting part as Frontend developer is that user voluntarily keep studying to use our services. This is such a amazing moment compared to web2 culture. because there are so many competing services in the web2 market that users can easily go away from even a little bit of barriers.

So, We don't need to caring about basic crypto wallet related tutorial and using our service. Then what is exactly user want for our service and what points should we have more weight on?

Related above question, The answer would be totally different by team condition. In my case, I'm now in the blockchain gaming field. we provide pretty nice games to users. Even if Saying a little bit distance off, there's no place in a blockchain gaming company that's as passionate about game as ours:

However, we are now living in the era of dophamine, and having a tendency easily feeling tired of long contents. degen and pre-degen(newbie who wanna be the degen) want to spend their time very efficiently. So we have to prepare really quick and easy interaction for most of our (potential) users. So that's why most of projects just focus on daily check-in or selling limited NFT collections. That's super easy. Only linking your wallet and clicking the mint button.

So, We need to focus on how quickly users can successfully interact with our dapp. Inducing users to only clicking mint button. and business logic should be place on the back side. It is kind of nice way to put complex work behind of service.

Let's see the example of paragraph

Have you ever seen this error?
This error occurs because of unsupported chain. Basically my MetaMask chain was Linea, so I have to switch my wallet chain to Ethereum Mainnet.

The point is I have to clicking top-left side button and select the networks. Most of Web3 users are really expertise in these kind of things happened, but this might be much easily solved.

It is usually good way to hide some unnecessary process behind action button. That's the key point to save users time spent.

I guess paragraph team used web3-modal for wallet connection.
All code below sourced from my assumption.

const SignInButton = () => {
  const { open: openWeb3Modal } = useWeb3Modal();
  const { address, isConnecting } = useAccount();
  const chainId = useChainId();
  const { switchChainAsync } = useSwitchChain();

  const handleOnclick = async () => {
    // check current user wallet chain is supportive or not
     if (!supportedChains.has(chainId)) {
       await switchChainAsync({ chainId: mainnet.id });
     }
     openWeb3Modal();
  }
  return (
    <button onClick={handleOnclick}>
     {isConnecting ? 'Awaiting Confirmation' : 'Signin'}
    </button>
  )
}

Web3-modal is based on Walletconnect, Viem and Wagmi. So we can get easily supports from many hooks which can enhance user wallet status. The one last detail is some of users trying to test our service. They tries to change the chain network just before transaction execution. And they reports (usually upload on twitter) their glory found just before. So the environment check is always important. Like below:

• Is user address is same as off-chain registered address?

• Is the chain user trying to connect is our supportive chain?

There are many tips during interacting smart contract. I'll share all of tips to this blog soon😃

As I mentioned earlier, I don't think Web3 frontend development is basically different from Web2 frontend development. In fact, the technical aspects of Web3 are often sharper and more defined than some of the more ambiguous blockchain usages in the market.
While Web3 services may sometimes feel less user-friendly, there is good opportunity for us to contribute by analyzing our target users, designing user journeys that meet user's needs, and refining the UX to optimize unnecessary friction.

Today, I shared a simple example related to UX of wallet action, but I'll also touch on some key areas that Web3 frontend developers should consider in near future.

If you liked this post, please subscribe and share. Thank you for reading, and I'll see you next time!