A Crash Course in web3 for web2 Developers

Anthony Campolo presents a crash course on Web3 development for Web2 developers, demonstrating how to build a decentralized application using a smart contract and a React front-end.

Episode Summary

In this presentation, Anthony Campolo introduces Web3 development to Web2 developers, focusing on the concept of composability in blockchain applications. He demonstrates how to create a decentralized application (DApp) by deploying a smart contract on the Avalanche blockchain and connecting it to a React front-end. The tutorial covers the entire process, from setting up the development environment to deploying the finished product on EDGIO (formerly Layer0). Campolo emphasizes the similarities between Web3 and concepts like the Jamstack, highlighting how blockchain technology allows for decoupled, composable architecture. He explains key concepts such as smart contracts, blockchain networks, and wallet interactions, making the content accessible to developers new to Web3. The presentation concludes with a working example of a simple DApp that allows users to read and write messages to a blockchain, showcasing the potential of Web3 technologies in creating decentralized, composable applications.

Chapters

00:00 - Introduction to Web3 Composability

Anthony Campolo introduces the concept of Web3 composability, drawing parallels between Web3 and the Jamstack architecture. He emphasizes the idea of composability as the ability to easily combine different pieces of architecture, likening it to working with Lego pieces. Campolo explains that the presentation will focus on how blockchain technology fits into the composability paradigm, particularly how a front-end can interact with a smart contract. He sets the stage for a hands-on demonstration, promising to walk through the process of deploying a smart contract and interacting with it from a React front-end. This introduction serves to bridge the gap between familiar Web2 concepts and the emerging world of Web3, preparing the audience for the technical content to follow.

02:56 - Setting Up the Development Environment

In this section, Campolo begins the practical demonstration by setting up the development environment for the Web3 project. He starts by installing necessary dependencies, including Hardhat (a development environment for Ethereum), Ethers.js (a library for interacting with Ethereum), and the Layer0 CLI. He explains the purpose of each dependency and how they fit into the Web3 development workflow. Campolo then sets up the project structure, creating directories for contracts and scripts, and configuring environment variables. He briefly touches on the concept of blockchain, describing it as a distributed database living on multiple computers simultaneously. This chapter provides a foundational understanding of the tools and structure needed for Web3 development, setting the stage for the actual coding to follow.

06:32 - Writing and Deploying the Smart Contract

Campolo dives into the core of Web3 development by writing and deploying a smart contract. He explains the structure of a simple “Hello World” contract written in Solidity, the programming language for Ethereum-compatible blockchains. The contract includes functions to set and retrieve a message, demonstrating basic read and write operations on the blockchain. Campolo walks through the deployment script, explaining how to use Hardhat to compile and deploy the contract to the Avalanche testnet. He emphasizes the importance of using testnets for development to avoid transaction fees. This chapter provides a practical introduction to smart contract development and deployment, a fundamental skill for Web3 developers.

11:44 - Building the React Front-end

This chapter focuses on creating the React front-end that will interact with the deployed smart contract. Campolo demonstrates how to set up a basic React component that can read from and write to the smart contract. He explains the use of React hooks for state management and how to integrate Ethers.js to communicate with the blockchain. The front-end includes buttons to fetch the current message from the contract and to set a new message. Campolo also covers the process of connecting to a user’s cryptocurrency wallet (MetaMask) to sign transactions. This section bridges the gap between traditional web development and blockchain interaction, showing how familiar front-end technologies can be used in a Web3 context.

18:51 - Deploying the DApp

In the final chapter, Campolo demonstrates how to deploy the completed decentralized application (DApp) to a live environment using EDGIO (formerly Layer0). He walks through the process of configuring the project for deployment, building the static bundle, and uploading it to EDGIO’s servers. Campolo emphasizes that once deployed, anyone with a MetaMask wallet configured for Avalanche can interact with the contract through the web interface. He concludes by summarizing the key takeaways of the demonstration, highlighting how Web3 naturally lends itself to composable architecture. The chapter ends with Campolo providing resources for further learning and engagement with the Web3 community.

22:52 - Conclusion and Community Engagement

The presentation concludes with Anthony Campolo summarizing the key points of his Web3 development demonstration. He reiterates the composable nature of Web3 applications, emphasizing how the smart contract and front-end are completely decoupled yet work together seamlessly. Campolo encourages viewers to explore further by visiting quicknode.com and following his social media channels for more Web3 content. He also promotes the QuickNode HQ Twitch channel, where he regularly hosts live streams on similar topics. The video then transitions to a brief outro, where the host invites viewers to join the Composability.dev community and participate in JavaScript Jam, a weekly open mic event for web developers. This concluding segment reinforces the community aspect of Web3 development and provides viewers with resources for continued learning and engagement in the field.