> Markdown version of [/videos/584-road-to-web3?t=1750](https://www.wearedevelopers.com/videos/584-road-to-web3?t=1750). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# ​Road to Web3

How do you replace your traditional backend with decentralized smart contracts? Discover the exact Web3 architecture needed to bridge your frontend to the blockchain using Ethers.js and wallet providers.

- **Speakers:** Soumaya Erradi
- **Event:** WeAreDevelopers LIVE
- **Published:** May 25, 2023
- **Duration:** 42:19
- **URL:** https://www.wearedevelopers.com/videos/584-road-to-web3

## Summary

Transitioning from Web2 to Web3 requires a fundamental shift in application architecture, moving away from centralized databases and third-party payment gateways toward decentralized "collective authority" and protocol-native payments. While Web3 offers users true digital ownership, permissionless access, and robust security, it currently forces developers to navigate hurdles involving scalability, environmental impact, and user complexity. Popular implementations like GameFi, NFT marketplaces, and DeFi platforms prove the viability of these concepts, but executing them requires rethinking how frontend code interacts with data.

In Web3 architecture, the traditional backend server is replaced by smart contracts deployed directly to the blockchain. To build out this stack, engineers typically combine a standard frontend framework (like React) with Ethers.js, the dominant library for managing blockchain communication. Smart contracts written in languages like Solidity must be compiled into an Application Binary Interface (ABI), which translates blockchain logic into readable arrays of objects, dictating exactly what inputs and outputs a function requires. 

Successfully connecting a frontend to the blockchain hinges on understanding providers and contract managers. While public nodes (like Infura or Alchemy) offer scalable, read-only access to query basic data without user authentication, executing state-changing write operations requires a user's specific wallet provider, such as MetaMask. Because writing to the blockchain modifies data, developers must ensure the user is connected to "sign this transaction" and cover the necessary network fees. Building a seamless DeFi workflow relies on retrieving the wallet provider, passing ABI parameters, natively formatting blockchain big numbers for UI display, and explicitly awaiting transaction block confirmations.

**Keywords:** web3 application development, decentralized web architecture, smart contract integration, ethers.js library integration, metamask wallet authentication, application binary interface (ABI), blockchain read and write operations, web3 provider configuration, public node providers, solidity contract compilation, cryptographic transaction signing, DeFi token transfers, network gas fees, GameFi and NFT marketplaces

## Chapters

1. **Defining web3 technology beyond popular trends** (00:02) — How the underlying technology of web3 offers more than speculative crypto assets and NFTs.
1. **Comparing centralization and payments in web2 versus web3** (02:00) — The shift from central web2 authorities to collective consensus and native protocol payments.
1. **Evaluating the pros and cons of web3 adoption** (06:36) — The balance of data ownership against challenges in scalability, adoption, and environmental impact.
1. **Real world use cases for web3 applications** (11:31) — Examples of decentralized applications across gaming, marketplaces, decentralized finance, and social media.
1. **Understanding web3 application architecture and network communication** (14:59) — How frontend applications connect directly to the blockchain via smart contracts and providers without centralized backend servers.
1. **Essential developer tools for building web3 applications** (18:29) — The primary frontend stack for web3 development relies on javascript frameworks, browser wallets, and smart contract interfaces.
1. **Configuring network providers and the ethers library** (23:43) — Initializing javascript tools to read from public nodes or connect to a user wallet for transactional capabilities.
1. **Using contract managers for blockchain operations** (29:10) — Formulating smart contract interactions for reading blockchain data or writing state changes using transaction signatures.
1. **Reading token balances from a smart contract** (33:22) — A practical code implementation formatting and retrieving stablecoin balances via user connected wallet providers.
1. **Executing token transfers and confirming blockchain transactions** (37:34) — Triggering browser wallet prompts to sign state-changing operations and asynchronously awaiting block confirmations.

## Related Moments

- [Comparing Web2 and Web3 application architectures](https://www.wearedevelopers.com/videos/878-testing-web3-applications) (from "Testing web3 applications")
- [Defining the transition natively toward web three decentralization](https://www.wearedevelopers.com/videos/581-trust-as-the-key-concept-in-future-mobility) (from "Trust as the Key Concept in Future Mobility")
- [Integrating existing web technologies within modern web3 architectures](https://www.wearedevelopers.com/videos/634-debunking-the-top-10-myths-about-web-3) (from "Debunking the Top 10 Myths about Web 3")
- [Defining the core problems solved by web3 concepts](https://www.wearedevelopers.com/videos/483-get-started-with-blockchain-for-your-business) (from "Get Started With Blockchain For Your Business")
- [Audience Q&A on Web5 and decentralization protocols](https://www.wearedevelopers.com/videos/597-refactoring-the-web) (from "Refactoring the Web")
- [Exploring decentralized web applications beyond basic cryptocurrency transactions](https://www.wearedevelopers.com/videos/634-debunking-the-top-10-myths-about-web-3) (from "Debunking the Top 10 Myths about Web 3")

## Related Articles

- [From Hype to Code: Real Blockchain Use Cases for Developers](https://www.wearedevelopers.com/magazine/620-from-hype-to-code-real-blockchain-use-cases-for-developers)
- [Why Blockchain? A Developer’s Perspective](https://www.wearedevelopers.com/magazine/616-why-blockchain-a-developer-s-perspective)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Navigating the AI Shift](https://www.wearedevelopers.com/magazine/629-navigating-the-ai-shift)

## Related Jobs

- [Backend Engineer, Python (Web3)](https://www.wearedevelopers.com/jobs/ext/1934515-backend-engineer-python-web3) at **Bitpanda**
- [Senior Fullstack Engineer, Angular & Nestjs (Defi Wallet)](https://www.wearedevelopers.com/jobs/ext/1983681-senior-fullstack-engineer-angular-nestjs-defi-wallet) at **Bitpanda**
- [Senior Backend Engineer, Blockchain (Smart Contracts)](https://www.wearedevelopers.com/jobs/ext/1940851-senior-backend-engineer-blockchain-smart-contracts) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**