Most frontend devs I know in web3 use Next.js + Vercel for their frontends. Probably for good reason, too. Next.js is fast & feature-packed, and no other platform has a better developer experience than Vercel.

While this stack serves well for most, it is a very centralized solution. Your frontend will be at the mercy of Vercel, who use AWS behind the scenes. Not very web3.

To be fair, most people don't need a decentralized frontend setup. But in some cases, it is an absolute necessity. For example, a decentralized exchange like Uniswap should never solely rely on a centralized provider. (not saying Uniswap uses Vercel, just an example. I have no idea what they use lol)

It makes sense to use a centralized provider as the primary option for speed & scale, but it is vital to have a backup that is permanent and decentralized to fight censorship. So if Vercel doesn't like Uniswap anymore, it doesn't mean Uniswap becomes inaccessible via the web right away. The idea here is to have a decentralized deployment ready, at least as a fallback.

Arweave lets you permanently deploy webpages to a decentralized network. This is why we will be going through the process of setting up a React app for deployment to Arweave in this article.

What we will be building

We will be building a very simple React app that lets people connect their wallets, and deploy it to Arweave.

You can also visit the live deployed page and try it out yourself: https://arweave.net/wI-CGD-uca4Dx_KNODXPg1ypjd5acWQ0ZM4UHZRh99Q

Tech stack

We will be using Vite instead of Next.js for this project, for several reasons:

1. Vite is FAST ⚡️ (follow along and you'll find out)

2. Next.js is basically a server that serves webpages. On the other hand, Vite runs fully on the client-side i.e. in the browser. For a frontend to be really decentralized, it should ideally be running fully on the client. We are going for an extreme here, but why not?

3. It is super-easy to generate a fully static site using Vite. Using Next.js, it's a bit of a pain in the ass.

Apart from that, we will be using Rainbowkit 🌈 to setup our connect wallet functionality.

Make sure you have Node.js and Yarn installed.

Project setup

Let's start off by setting up some boilerplate using Vite's handy CLI tool. In your terminal, run the following command:

Select the options just like in the screenshot above and hit Enter. The next thing we want to do is cd into our newly-created project's directory and install our dependencies. We will also initialize an empty local git repo in the folder while we're at it.

Awesome! Let's now try running our app by running yarn dev. Your app will be live on http://localhost:3000. It should look like this:

You see how fast that was? 😄 Vite means speed.

Building out the UI

Let's add a connect wallet button to our app now. We will need to install some dependencies for that:

Once that's done, let's setup Rainbowkit in our code. I'm just following the Rainbowkit installation docs here, nothing fancy!

Make sure your main.jsx looks like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet],
  [
    jsonRpcProvider({
      rpc: () => {
        return {
          http: 'https://rpc.ankr.com/eth',
        };
      },
    }),
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <App />
      </RainbowKitProvider>
    </WagmiConfig>
  </React.StrictMode>
);

And your App.jsx like this:

import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <div>
      <div
        style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}
      >
        <ConnectButton />
      </div>
    </div>
  );
}

export default App;

Your app should now look like this:

Try clicking that button and connecting your wallet. It should work perfectly fine. Rainbowkit is great! 🌈❤️

That's all I'm going to do for the UI but feel free to get create and add whatever you want! I am moving on to the deployment setup now.

Prep for deployment to Arweave

To make sure our Vite app gets built and deployed to Arweave correctly, we need to make small adjustments to two files.

1. File: vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
++  base: '',
});

1. File: package.json

{
  "name": "vite-arweave",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
++  "deploy": "yarn build && arweave deploy-dir dist --key-file wallet.json"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "vite": "^2.9.9"
  },
++  "homepage": "./"
}

The base and homepage options make sure that our app gets built and loaded on Arweave correctly.

We also added a deploy script that we will run when we want to deploy our app to Arweave.

The next step is to create an Arweave account if you don't have one already and grab some test funds from the faucet. Go to this link: https://faucet.arweave.net/ and follow the instructions.

IMPORTANT: Don't forget to download your wallet during the step I've shown in the screenshot below and keep that file handy. You will need this later on.

After following all the instructions on the faucet page, install the arweave-deploy CLI. We will make use of this tool to deploy our app. Run the following command to install it:

Quickly verify if the installation was successful or not by running this:

If all looks good, create a new file called wallet.json at the root of your project. Copy and paste the contents of the wallet file you downloaded from the faucet into this file.

The wallet.json file contains the seed phrase/private key for your Arweave wallet so let's make sure it does not get committed to Git. Add this line to the bottom of your .gitignore file:

wallet.json

Now we're all set. It is time to yeet our app straight to the Arweave network! 🚀

Arweave deployment

All you need to do now is to run yarn deploy at the root of your project:

Remember to type in CONFIRM when prompted! Now all you have to do is sit back and wait for your files to get uploaded to Arweave!

You will see a message similar to that if the deployment was successful. Let's check out what our app looks like. Click on that URL!

LFGG! 🎉 YOU JUST PERMANENTLY DEPLOYED A REACT APP TO ARWEAVE! 🫡

Give yourself a pat on the back. This page will now live on Arweave FOREVER. No one can take this down. That right there is extremely powerful. 💪

You can find the final code in this repo for reference: https://github.com/Dhaiwat10/vite-arweave

Don't forget to follow me on Twitter or I'll be very sad :'(

Thanks for reading and feel free to DM me if you need help! Ciao! :)

In 2022, everything changed. I got a job because people saw me building some cool stuff with this new DAO I joined. I earned a scholarship to an Ethereum conference in Dubai and left home for the first time in my life to meet my 'online' friends. This trip turned out to be a life-changing experience.

Developer DAO made all of this happen for me. This is my story.

Getting to fly to EthDubai

I joined D_D back in September. I was still fairly new to web3. Minting the D_D NFT was my first ever mainnet contract interaction - that says enough. D_D gave me a safe place to meet new friends who wanted to build open source software together. And that's exactly what we did.

I started working on a React UI library for web3 with some friends at D_D and started tweeting about it. People loved this. This did lots of good for me, but also for D_D since this was one of our first 'projects'. I made friends with many people in web3 because they liked my work.

This project also literally got me my current job. When I say this project changed my life, it's not an overstatement.

Meanwhile, EthDubai announced a scholarship program. I applied. My application was backed only by my work with D_D. Nader, the founder of Developer DAO, was going to be speaking at the event and I already 'knew' him by this time. He had seen the stuff I was building at D_D and was kind enough to support all of it whenever he could. Nader was in touch with the organizers of the event and he put in a good word for me when I told him that I had applied. This along with my work at D_D was enough for me to secure the scholarship.

I had no expectations when I applied. I thought, ‘this cannot be real’, but it was. I was flying overseas for the first time ever. You could bet I was the happiest guy on the planet.

Meeting my D_D friends and making new ones in Dubai

My time in Dubai was exciting and...chaotic - isn't that just what crypto conferences are anyways? D_D already had a gathering planned for lunch on the day I landed. On my very first day away from home in a foreign country, I was going to meet some of my friends that I had known only through Discord.

Six months ago none of us knew each other. During these six months, we shared lots of laughs, built some awesome stuff that we were insanely proud of, built some silly shit, and had gone through our fair share of tough times together.

We had built Developer DAO together from nothing. I was now going to meet these people IRL. I was extremely excited, but also nervous. Even though my English is honestly quite good, I was not at all used to being in an environment where everyone around me spoke this language. The way you greet people, the way you share stories, the way you make jokes - all of those little things were very different.

Learning how to socialize with people from different cultures was one of my biggest challenges and learnings in Dubai. It was new, it was exciting but it was also not all pretty. Sometimes it could get really difficult, but I knew I had to put myself through this at one point. As a result, I feel like I did come out of Dubai feeling much more confident about myself socially. The struggle was worth it in the end.

But hey! Let's get back to the fun part. I was meeting my friends from the DAO IRL and that was the best thing EVER! I cannot stress this enough. I was so happy to be finally able to share a beer with these amazing people that I had the pleasure to know. Some of us couldn't even recognize each other at first which was awkward at first but of course, we laughed about it later.

The other great thing about all of this was that I didn't only get to meet people from the DAO, but also people from other places. Many of these people already knew about the work I was doing at D_D from Twitter. I was quite literally blushing on multiple occasions!

Both at the D_D lunch and at other parties that I crashed in Dubai all week long - I made new friends. All of them had their own interesting stories to share and I am very glad I got the chance to get to know these people. You know who you are!

Meeting people from different parts of the world, hearing their stories, seeing how they do things in life, and learning from them is something I genuinely got to love during my time in Dubai. I had always wanted to travel the world, but this gave me just one more reason to do it. I believe this realization will leave a lasting impact on my life.

Apart from the conference and the numerous parties, almost all of us from the D_D group saw Dubai together as well. Seeing some of the jawdropping architectural marvels of Dubai together with my 'online' friends was quite weird, in a good way. I'm sure I sound like a broken record at this point, but I couldn't believe this was real, that this was actually happening to me. I was still struggling to take all of this in.

Standing at the coast with the cold breeze at night with my DAO friends looking at the beautifully-lit Dubai skyline and talking about all things life is a memory I will never forget. I will always cherish moments like these from Dubai.

I returned from Dubai with new friends, new learnings, and full of life. My DAO made all of this happen for me. My DAO changed my life for the good.

I'm grateful. Here’s to Developer DAO. Here’s to changing lives!

In this post, I’ll try to give you an overview of the web3 space so that you can make a decision on whether you want to switch to web3 and how you can do it.

What stays the same

The one thing that stays the same between web2 and web3 apps is that all of them are just websites (or mobile apps) to begin with. So if you know how to build UIs with React, you can build UIs for both web2 and web3 apps. Nothing changes. You’re just manipulating the DOM after all. The difference lies in how web2 and web3 apps handle data and authentication. Let’s talk about that next.

What’s different

There is a big paradigm shift in how web2 and web3 apps handle data and authentication.

Instead of managing passwords and access tokens, you will be dealing with wallet connections and signed messages in the web3 world. Your wallet is a store of identity and value owned by you that you use across all dapps.

Instead of making network requests to a centralized API server somewhere, you will be reading data from the blockchain directly, usually from smart contracts. As a web3 frontend engineer, you will be interacting with smart contracts on a daily basis. Make sure you have a solid understanding of what's a smart contract, how it works, what's a smart contract's ABI, etc.

Data mutation in web3, on the other hand, is exceptionally different from web2. Each time you mutate a smart contract’s data, you pay a fee (infamously known as gas). So you need to be extra careful with your smart contract calls in your frontend code. You need to ensure that you interact with the correct smart contract and send the valid data in the correct format. Smart contracts and anything on the blockchain is immutable in nature. Once it's there, it's there. If you want to change it, it usually costs money, and sometimes it's impossible - depending on the nature of the smart contract you're interacting with.

Data mutation in web3 also takes much longer than web2. POST requests in web2 usually take a few hundred milliseconds. Data mutation in web3, or smart contract calls/transactions, can take anywhere between a few minutes and forever.

This is because the nodes on the blockchain network have to add each transaction to a new block on the chain. The delay between submitting the transaction and it getting added to the chain depends on the gas fee (i.e., the cost) your user is willing to pay for it. Because of this uncertain nature of data mutation, you need to make sure that you get your loading and error states right.

You’ll also be dealing with different networks. You want to ensure that your users and the smart contracts they’re interacting with are on the same network.

If all of the stuff I mentioned above seems overwhelming, please don’t worry. Some great open-source libraries abstract out all of this for you. My favorites are wagmi and eth-hooks. (Also plugging web3-ui, the library that I am working on!)

Code comparison

Let’s make some direct code comparisons between similar scenarios in web2 and web3.

1. Authentication

Compared to the traditional auth via cookies approach in web2, in web3 you will usually ask the user to connect their wallet to the site. While the code for wallet connections can be a bit boilerplate-y and tricky, there are many libraries that provide high-level abstractions.

// web2
const res = await axios.post('https://some-api.com/auth', payload);
// then use cookies

// web3
import { useWallet } from '@web3-ui/core';

function App() {
  const { connectWallet, connection, connected } = useWallet();
  
  if (!connected) {
    return (
      <button onClick={connectWallet}>Connect wallet</button>
    )
  }
  
  return (
    <p>{connection.userAddress}</p>  
  )
}

2. Reading data

You must be familiar with using fetch or axios to make requests to APIs to read data. In web3, you will first create an instance of a smart contract using the contract's address and its ABI. ethers is one of the most popular libraries that let you interact with the blockchain.

One thing you should keep in mind as a frontend engineer is that when you try to read a number from a smart contract (eg. a balance), the type of the value you get will be BigNumber and not number. This means that you will have to convert the returned data into a string or a number using methods like toString().

// web2
const res = await axios.get('https://some-api.com');

// web3
const contract = new ethers.Contract('contract_address', ABI, provider); // create instance
const res = await contract.balanceOf('some_address'); // read from the contract
console.log(res.toString()); // convert from BigNumber to string

3. Writing data

Both reading and writing data in web3 is done via calling a function on a smart contract. As you can see, the syntax for writing to a smart contract is no different than reading from it. There are two caveats though:

• To write to a smart contract, you need a signer. A provider isn't enough.

  https://docs.ethers.io/v5/api/signer/

• You need to call the wait() method on the returned promise in order to wait for the transaction to be mined/confirmed. The wait() method also returns a promise which resolves once the transaction has been mined.

// web2
const res = await axios.post('https://some-api.com/', { name: 'John Doe' });

// web3
const contract = new ethers.Contract('contract_address', ABI, signer); // create instance
const res = await contract.setGreeting('Hi!');
await res.wait(); // wait for the transaction to be 'mined'

Rough roadmap

If you want to get started in web3 as a frontend dev, this is a rough roadmap that you can use as a reference. This roadmap is inspired by both my personal experiences and what I've seen others do.

• Learn about blockchain and Ethereum fundamentals (just the very basic stuff)

• Learn about smart contracts

• Learn about wallets and wallet connections in web3 (provider, signer, different wallet providers)

This playlist will give you a solid understanding of the above three items:

https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi

• Create a frontend that simply lets you connect your wallet and shows the connected wallet's address (I have listed more resources at the end of the post)

  https://wagmi-xyz.vercel.app/guides/connect-wallet

• Create a frontend that interacts with a smart contract on a testnet (you can start by interacting with a simple Greeter contract)

  https://wagmi-xyz.vercel.app/docs/hooks/useContractRead

You will now have all the basics you need to call yourself a web3 frontend engineer. Some extras that could be useful to learn too:

• ERC20 and ERC721 token issuance flows (approvals, transfer, mint, etc)

  https://ethereum.org/en/developers/docs/standards/tokens/erc-20/

• Sign-in with Ethereum

  https://login.xyz/

Useful links

• scaffold-eth

• web3-from-zero

• Speed Run Ethereum

• The Complete Guide to Full Stack Ethereum Development

• Developer DAO

• Developer DAO resources

• Solidity by example

• Gitcoin

• web3-ui

• wagmi

• eth-hooks

Feel free to reach out to me on Twitter if you have any queries. More than happy to help!