QuickNode Builds Infrastructure for the Future

Episode Description

Anthony Campolo demos building and deploying a Web3 smart contract on Avalanche using QuickNode, Hardhat, Ethers, and React with a Vite setup.

Episode Summary

Anthony Campolo returns to the show to discuss his career move from StepZen to QuickNode, a blockchain infrastructure company that provides API endpoints for 14 different blockchains. He explains how Web3 extends beyond cryptocurrency speculation into decentralized technology including IPFS and smart contracts, emphasizing that QuickNode is fundamentally a developer tooling company. The core of the episode is a live demo where Anthony walks through building a "hello world" smart contract in Solidity, compiling and deploying it to the Avalanche Fuji testnet using Hardhat, and then connecting it to a React frontend via the Ethers library. Along the way, he clarifies the roles of each tool — Solidity for the contract logic, Hardhat as the build and deployment tool, Ethers as the JavaScript client library, and QuickNode as the RPC endpoint connecting everything to the blockchain. The hosts ask practical questions about wallet safety, the difference between MetaMask and Coinbase Wallet, gas fees, and why Avalanche's low transaction costs make it appealing compared to Ethereum. Anthony deploys the finished app to Netlify, demonstrating that Web3 apps are essentially Jamstack by default. The episode wraps with perfect picks covering Bo Burnham's Inside Outtakes, a standing desk mat, the State of CSS recap, Svelte Flow, and the Google I/O 2D adventure game.

Chapters

00:00:00 - Introduction and Anthony's Move to QuickNode

The episode opens with hosts Alex Patterson and Brittany Postma welcoming Anthony Campolo back to the show. Anthony shares the story of his career journey from his first tech job at StepZen, a GraphQL company he joined after contributing to RedwoodJS, to his new role at QuickNode. He describes how friends like Nader Dabit and Noah Hein drew his attention to the Web3 space over time.

Anthony explains that his interest in Ethereum dates back to 2017, well before he learned to code, and that the space's many dimensions — from finance to NFTs to privacy technology — kept pulling him in. He highlights the shift from being a solo devrel person at StepZen to joining a growing devrel team at QuickNode, and notes that Brittany made a similar career transition around the same time.

00:03:43 - Understanding Web3 and QuickNode's Role

Alex asks whether Web3 is just blockchain rebranded, and Anthony explains that while decentralization is the core idea, not everything in Web3 is blockchain-based. He introduces IPFS as an example of a decentralized, peer-to-peer system that isn't a blockchain but fits under the Web3 umbrella. The key principle, he explains, is removing reliance on any single server or company and instead running protocols across shared networks of computers.

Anthony then describes where QuickNode fits in the ecosystem. Rather than providing a single server node, QuickNode offers a global API endpoint that connects developers to any of 14 supported blockchains, similar to how Netlify supports multiple frameworks. He emphasizes that QuickNode is a dev tooling company focused on helping developers build faster and more reliably, not a platform for promoting cryptocurrency speculation.

00:09:09 - Smart Contracts, Ethereum vs Bitcoin, and the Demo Setup

Alex asks Anthony to explain how QuickNode and blockchain technology work when you strip away the monetization angle. Anthony clarifies that Ethereum differs from Bitcoin because it supports general-purpose programs called smart contracts, not just a financial ledger. He explains that tokens still exist because the people running the network need compensation, drawing a parallel to the open source sustainability problem where maintainers often go unpaid.

After a sponsor break, Anthony sets up the demo by scaffolding a React app with Vite and installing key dependencies: dotenv for environment variables, Hardhat as the development and deployment tool, Ethers as the JavaScript client library, and the Hardhat-Ethers integration. He also walks through the environment variables needed — a QuickNode endpoint URL, a wallet private key, and eventually a contract address — while stressing the importance of never committing sensitive keys to version control.

00:14:27 - Writing and Understanding the Solidity Smart Contract

Anthony begins the hands-on portion by creating a Solidity smart contract file. He walks through the syntax, explaining the pragma version declaration, typed variables, public and private methods, and the constructor pattern. The contract is a simple "hello world" that stores a string message, exposes a getter function to read it, and provides a setter function to update it — essentially CRUD without the delete, since immutability is a feature of blockchain.

Brittany and Alex notice familiar patterns from object-oriented and class-based languages mixed with JavaScript-like function syntax. Anthony clarifies that the console.log capability comes from a Hardhat import rather than native Solidity, which is why it looks surprisingly JavaScript-friendly. He then shows the deployment script, explaining the factory pattern used to instantiate contracts and how a greeting string is passed in during deployment.

00:22:07 - Hardhat Configuration and QuickNode Endpoint Setup

Anthony creates the Hardhat configuration file, explaining how it specifies which blockchain network to deploy to. He distinguishes between mainnets with real funds and testnets with fake money, noting that they're deploying to Fuji, the Avalanche testnet, rather than Ethereum's Ropsten testnet. The configuration requires the QuickNode URL and the wallet's private key as environment variables.

He then switches to the QuickNode dashboard to show how developers create endpoints by selecting a blockchain and network. QuickNode currently supports 14 chains and is adding more regularly. Anthony briefly touches on optional features like archive mode for full chain history access, then demonstrates the faucet system that provides free testnet tokens so developers can experiment without spending real money.

00:29:24 - Compiling, Deploying, and Understanding the Toolchain

After a brief discussion about wallet safety and the differences between MetaMask and Coinbase Wallet, Anthony compiles the Solidity contract using the Hardhat CLI, which generates an application binary interface — essentially machine code the blockchain can execute. He then deploys the contract to the Fuji testnet with a single command specifying the target network, receiving back a contract address.

Alex asks for clarification on how the pieces fit together, and Anthony breaks it down clearly: Hardhat is the build tooling that gets the contract onto the blockchain, while Ethers is the client library that lets JavaScript code interact with the deployed contract. Brittany compares it to how Prisma has separate migration and client tools, and Anthony confirms the analogy, noting that each layer has a distinct responsibility even though they work seamlessly together.

00:41:32 - Building the React Frontend

Anthony wires up the React frontend, importing useState for managing the greeting message, the Ethers library for wallet connectivity, and the Hardhat-generated artifacts containing the contract's ABI. He explains that the ABI is a JSON representation of the contract's methods, and Ethers translates those into callable JavaScript functions so developers don't have to make raw RPC calls to the blockchain.

He builds out a simple interface with a button to fetch the current greeting and an input field with a setter button to update it. After connecting the MetaMask wallet to the local site, the app successfully reads the greeting from the blockchain. Brittany and Anthony have a brief exchange about React's state binding quirks in the implementation, with Brittany suggesting a cleaner approach for the onChange handler.

00:48:39 - Deploying to Netlify and Gas Fees Explained

Anthony demonstrates the setter functionality, which triggers a MetaMask confirmation dialog showing a small gas fee in AVAX. He explains that gas fees exist as an incentive mechanism for network operators and describes how Ethereum's fee auction system can drive costs extremely high, whereas Avalanche transactions cost fractions of a cent. This segues into why QuickNode supports multiple chains — so developers aren't locked into one expensive network.

He then deploys the finished app to Netlify using a simple toml config and the GitHub CLI, walking through the repo creation and push commands in one step. Once live, he demonstrates that the app works identically on the deployed URL, reading the same contract state regardless of which client connects to it. Anthony notes that Web3 apps are essentially Jamstack by default — a decoupled JavaScript frontend calling a backend through an API endpoint.

00:58:40 - Off-Chain Storage, NFT Insights, and Perfect Picks

Alex highlights Anthony's blog at ajcwebdev.com, specifically an article about off-chain storage with Fauna that extends the demo concept by backing up blockchain data to a traditional database. Anthony explains the real-world problem of people losing wallet passwords and permanently losing access to valuable NFTs, making off-chain backups essential despite the security trade-offs they introduce.

The episode closes with perfect picks from each host: Anthony recommends Bo Burnham's Inside Outtakes on Netflix, Brittany showcases an ergonomic standing desk mat with varied textures and recommends the State of CSS recap from Google I/O, and Alex highlights Svelte Flow as a charting library and the Google I/O 2D adventure game as an impressive example of interactive virtual spaces. Anthony wraps up by encouraging healthy skepticism about Web3 while advocating for a welcoming environment for curious developers.

Related Links

• A First Look at Ethers and Hardhat - Written companion to the toolchain used in this demo, covering Solidity smart contracts compiled with Hardhat and deployed via Ethers.js to an Ethereum testnet
• A First Look at Avalanche - Earlier QuickStreams episode establishing the full Avalanche + QuickNode + Hardhat + React + Netlify workflow that this episode builds upon
• Storing NFT Information with Fauna - Extends this demo further by adding off-chain persistence, minting an NFT, and backing up wallet data to Fauna — the article Anthony specifically mentions at the end of this episode
• Deploy to the Decentralized Web with IPFS - Anthony's follow-up exploring the other piece of Web3 infrastructure he mentions here, deploying a static frontend to IPFS for a truly decentralized stack
• PodRocket on QuickNode with Anthony Campolo - In-depth audio discussion of QuickNode's multi-chain infrastructure philosophy, RPC endpoints, and developer experience for building Web3 apps

Transcript

00:00:05 - Alex Patterson

Welcome back, peeps, to Perfect.dev, where we give you cats the freshest dose of dev snacks. Now with your amazing hosts, Alex Patterson and Brittany Postma. [Ad] Hello, perfect peeps. I left my screen share open. There we go. How's everyone doing today? We are happy to have Anthony back on. How are you, Anthony?

00:00:33 - Anthony Campolo

Hello. Hello. I'm doing great. Thanks for having me back. I'm such a huge fan of the show. I always enjoy hanging out here and getting to be on, and just hang out with y'all.

00:00:41 - Alex Patterson

Absolutely. We love having you.

00:00:43 - Brittany Postma

Yeah. Thanks so much for coming back. I know that last time you were here, we were talking about a few different things. You were at StepZen before, and now you've had a job change. Do you want to tell us a little bit about how that happened and what's been going on?

00:00:57 - Anthony Campolo

Yeah, sure. So StepZen had been my very first-ever tech job, really, because I had first gotten involved in open source through RedwoodJS, and I did that partly to get noticed and hopefully get a job. That's kind of the whole idea. So that was a GraphQL framework, and it kind of made sense that I was contacted and offered a job at a GraphQL company. And I learned a lot doing that, and it was a really fantastic experience. It's a great team and it's a great product. But I kind of had an itch to try something else, because like you probably know, I'm very active in the ecosystem. I know a lot of people who are doing a lot of things, and I see a lot of different stuff that's going on all the time. And I had a couple friends who were getting into what's kind of known as Web3 now, which is basically a rebranding of blockchain. And it's something you all know. Nader, Nader Dabit, I think he was on the show quite a while ago, and he transitioned from working at AWS Amplify to working for Edge and Node, which does The Graph.

00:02:02 - Anthony Campolo

And so that's a GraphQL-based blockchain project. But I also have a friend, Noah Hein, who currently works at QuickNode. And it was kind of interesting because for him, starting at QuickNode is kind of like for me starting at StepZen. He was also breaking into the industry at the same time I was. And I've continued to chat with him as he's been working there, and it continued to seem like a really interesting place to work in a really interesting space. For larger context, people always say "going down the rabbit hole" when it comes to crypto stuff. I went down the rabbit hole on Ethereum back in 2017, actually before I even knew how to code at all. I had a couple friends who were kind of getting into it, and we bought some Ethereum. In 2017, throughout the year, it kind of ramped up and then hit this huge peak around the end of 2017 and beginning of 2018, then had this huge crash, which led to a multi-year bear market, and then it spiked again in the last couple years.

00:02:59 - Anthony Campolo

So there's kind of macro financial stuff involved with it, but it's also cool, interesting tech that's based around privacy and security and access, and all this other stuff. And then there's also the NFT world. There's this whole art thing going on as well. There are so many facets to it. So I just kept being drawn to it and eventually got the opportunity to apply and get in. And they're building up a really legit devrel team now at QuickNode that I'm a part of. So I've gone from being kind of the sole devrel person pushing devrel at StepZen to being a person working with other people on a devrel team. And Brittany, you've actually made a similar kind of career transition around the same time I did. So it's just a lot of fun and I'm very happy to have made the switch.

00:03:43 - Alex Patterson

I'm really curious: when you talk about Web3 and blockchain and NFTs and all those fun hype words that are out there right now, is there more to it than just blockchain for Web3? Is there something above and beyond that? Is it kind of that next layer, or is it all about kind of distributed?

00:04:06 - Anthony Campolo

It's all about distributed and decentralization, but that doesn't necessarily mean it's all blockchain. So if you want to know kind of what I see as the larger vision of what fits into Web3, it also includes things like IPFS. So IPFS is not a blockchain. It's kind of like a decentralized, distributed version of Git. It's a version control system that's also a peer-to-peer system. So that's a way that you can actually put content and a website online. So I'm actually going to be on Some Antics in the next couple of weeks to demo that. We're not going to do that today. We're just going to look at blockchains and smart contracts. I think that's kind of a better 101. But the two can kind of interact with each other in the sense that the main idea is that you don't want your stuff to live on a single server out there in the world. And it's not edge in the sense that you want your stuff to be more easily accessible. It's actually that you don't want it to be owned by anybody.

00:05:05 - Anthony Campolo

You want it to not be on Amazon servers or DigitalOcean servers. You want it to be on a set of computers that are all running the protocol together, so you can kind of buy into how it works and what it's going to do in the future and that kind of stuff. So there are kind of some higher-level concepts around why this is important, which has to do more with how you build a trustless system. How do you build a system that everyone can buy into and kind of agree on the rules of that system, how it functions, and how it operates? To me, that's really the promise here, more so than all the buzzwords.

00:05:42 - Alex Patterson

Nice.

00:05:42 - Brittany Postma

Some Antics is Ben Myers' stream on Twitch. I will link that for everyone and put it in the show notes. So that is out there.

00:05:52 - Anthony Campolo

I have a record as the most frequent guest on that show, actually. And I always kind of push Ben to a topic that's almost outside of his wheelhouse but still kind of falls into it. So I did one on Vite and I did one on Deno, and he doesn't usually cover backend or build tool stuff. But they're based on web standards. I'm doing IPFS because it's still based around web standards. It still gives you a URL at the end of the day with a static website. So you could put an Eleventy site on there if you want to.

00:06:21 - Brittany Postma

Yep. And that's really cool. I was on a few months ago doing Svelte with him, so it was really fun. Cool show.

00:06:28 - Anthony Campolo

Yeah.

00:06:29 - Alex Patterson

So the title of our pod today is "QuickNode Builds Infrastructure for the Future." How does QuickNode actually fit into the picture for Web3?

00:06:40 - Anthony Campolo

Yeah. So where QuickNode fits in is that QuickNode is an infrastructure company. So if you think of something like AWS or DigitalOcean, they give you the ability to host a server node. QuickNode is a little different. Our name is kind of confusing because we actually aren't what's called a node provider, where you get a single server, essentially. What we do is give you an endpoint, like a global API, that you can hook into. So you're not being given access to a single server that's running somewhere. You're hooked up to the entirety of QuickNode's system. And we have different blockchains that we offer. So when you get into blockchain stuff, you figure out very quickly there are a lot of different blockchains. The most well-known ones are Bitcoin and Ethereum. But there are also ones that are more common now, such as Solana or Avalanche, which is the one we'll be looking at today. So if you go to quicknode.com, you can see a list of all 14 chains that we currently support.

00:07:46 - Anthony Campolo

And we'll be adding some every month or so for a while. We may even ramp up to a quicker pace than that at a certain point, it's hard to say. But right now we're still adding chains, and we believe in creating a service that allows people to attach to whatever chain they want. So if you think of something like Netlify, they don't just support one framework. If you want to deploy something to Netlify, they support all the frameworks. And so that's kind of the idea. We want to give developers the ability to work with whatever chain they want, because everyone's going to have their own ideas about which ones are best suited for their own particular use case.

00:08:17 - Alex Patterson

Do you think the thousand dollars I put in Shiba will really take off after this podcast? Can. Can we just, like, keep saying it over and over and, like, I don't know?

00:08:29 - Anthony Campolo

Yeah, the token stuff is its own corner of this, and something that I tend not to focus on. I'm not here to shill any coins. I'm not here to tell anyone to buy anything. I'm not here to give financial advice. For me, this is a dev tooling company, and that's why I think it's very appropriate to demo it here on this kind of stream. Because I know you all love dev tools. Dev tools give developers the ability to build faster, cheaper, more reliable software. That's really what we're all about here, and not shilling coins to create some sort of pump-and-dump scheme.

00:09:05 - Alex Patterson

I'm totally joking, by the way, folks.

00:09:07 - Brittany Postma

Absolutely.

00:09:09 - Alex Patterson

I think that's one thing that we should hit on before we go into a deep dive on demo and stuff. When you hear Web3, I feel like it's so connected to the coin or the dollars or the monetization piece of this. Can you just kind of break down for us where you would see QuickNode and hosting RPC and how that actually fits in when you take monetization out of the picture? What would people use it for transactionally and things?

00:09:40 - Anthony Campolo

Yeah, so it's partly what makes something like Ethereum interesting versus Bitcoin is that it's not just a ledger that saves a bunch of transactions. So this is why, for a while, people would say "blockchain, not Bitcoin." And so Web3 is like saying "Web3, not blockchain," because we have to keep changing the terminology because people latch onto certain ideas. But the thing is always kind of shifting. So the thing that makes Ethereum different from Bitcoin is that you can actually embed a general-purpose program into Ethereum. And that's what we're going to do today. So we're actually going to have a program that's written in a programming language and does any sort of arbitrary logic you could think of. It allows you to embed any sort of thing you can think of. And so you don't even necessarily have to make it connected to a token. The reason why the token concept still has to kind of exist, though, is because there needs to be a way to actually compensate the people who run the network itself. Because if you think about it, this is not a network being run by Amazon as a company that sells a product and then sells that computer space to people.

00:10:49 - Anthony Campolo

It's a different thing entirely. It's something that a group of people are running together so it can just be up and accessible. So the system is set up in a way where you have to pay to write to it because it has an incentive mechanism built in to pay the people who are running the network. And I think this is actually really important because it ensures that people who work on this kind of stuff are actually getting paid for it. This is such a problem in open source, where people are doing all this work and creating all this software, and people are relying on that software. People are building companies on that software that makes them quite a lot of money, but then the people who are writing that open-source software aren't getting anything for it. So I actually think it's important that these things require money to use because there's people and technology behind it, and energy is being expended to do this stuff.

00:11:40 - Alex Patterson

Yeah, that's a great point. I think I heard Jason on Remotely Interesting say, "You can eat all your cake and then your reward is more cake," type of thing. And it's like, oh my gosh, that's so true about OSS. It's just compounded. So I totally agree with that. We have to figure out how to pay all these people that do an amazing amount of work. [Ad]

00:12:13 - Anthony Campolo

[Ad]

00:12:15 - Alex Patterson

[Ad]

00:12:25 - Anthony Campolo

[Ad]

00:12:27 - Alex Patterson

[Ad]

00:13:11 - Brittany Postma

I love all the different music. I just bounce in the background.

00:13:17 - Alex Patterson

We've been listening to the same ad for so long, I was able to repeat it. And now we're going to have to start with this new one. Yeah, if anyone knows anyone who wants to sponsor the pod, let us know. We're looking for one or two more by the end of the year.

00:13:31 - Anthony Campolo

I'll message you afterwards.

00:13:35 - Brittany Postma

Awesome.

00:13:38 - Alex Patterson

Okay, I think we've reached the point of all the questions because Brittany and I still don't have a clue what this Web3 thing is. I've tried it, I've used MetaMask, I've done tutorials, but let's do this demo. Show us the meat.

00:13:53 - Brittany Postma

I was going to say earlier that when we did our holiday funsode, I just looped all of it into one pile. Web3, all of it was just this one thing to me. I had no idea what they were. So I'm really excited to see the demo.

00:14:10 - Alex Patterson

For me, every time I, like, learn something, I open like one extra chapter. I'm like, dang it. Now I'm like this whole other, like,

00:14:16 - Brittany Postma

No, it's your comb. Your comb adds another little line.

00:14:21 - Alex Patterson

My tiny, tiny Web3 comb of my broken comb is getting bigger. All right.

00:14:27 - Anthony Campolo

Yeah.

00:14:28 - Alex Patterson

What do you think, Anthony? What are you going to demo us today?

00:14:32 - Anthony Campolo

Yep. So what we're going to do is, I mentioned briefly a little bit about smart contracts and how that allows you to embed a program into the blockchain. So we're going to write what I consider a hello world smart contract, which basically means it allows you to write a message to the blockchain, read a message back, change that message, and read it back. It's kind of CRUD functionality: create, read, update, delete. You can't delete it, but you can update it, read it, and create it. That's kind of an important thing because if you could delete it, then you could delete whatever you want. You don't want people to be able to delete your money. So that's one thing that makes this a little unique and different. The important thing is going to be the developer tooling around it. So there's both the blockchain itself, which is Avalanche, and some open source libraries we're going to use.

00:15:27 - Anthony Campolo

We're just going to install those as some NPM packages. Then there's going to be the endpoint that QuickNode gives us, which is what allows us to actually connect to this network of computers, which is the Avalanche blockchain. I will go ahead and share my screen here, and it should be all good to go. Now, you had mentioned MetaMask, actually, and we're starting to use Coinbase Wallet more in some of our tutorials. But for this one I'll go with MetaMask as well, because I think it's probably more familiar to people who have ever tried this. And this is going to be basically our money. So right now I have some.

00:16:15 - Alex Patterson

Are there any pros and cons to Coinbase versus MetaMask? The only reason I ask is, I use everything Coinbase for my real money, my thousand-dollar thing that's floating around out there, and I'm like, do I mess with dev stuff against Coinbase? How careful do I have to be there?

00:16:35 - Anthony Campolo

Yeah. Well, first off, you want to keep your actual funds wallet that you're actually holding crypto in separate from anything you're going to be doing with dev stuff. So I would recommend a hard separation there no matter what, and then creating extra accounts that are specifically labeled as dev stuff to make sure you don't confuse yourself. Because if you actually send real money to one of your dev ones, or you send dev money to one of your real ones, one is okay, the other one is not.

00:17:01 - Alex Patterson

Right, right. And that's why mentally I'm like, okay, Coinbase is my real stuff. MetaMask is all dev.

00:17:08 - Anthony Campolo

Yeah, there are a couple differences. Coinbase Wallet in the browser lets you look at NFTs, which is something you can't actually do in MetaMask, which is kind of a bummer. You need MetaMask on your phone if you want to actually see an NFT image, whereas you can do that with Coinbase Wallet. But MetaMask is more community-focused and less controlled by a single company. It is owned by a single company, which is ConsenSys, but ConsenSys is a fairly neutral player in the Ethereum ecosystem. Whereas with Coinbase, it's one company with its own exchange, and their wallet ties into their exchange. So there are always questions there. And if you already have stuff in Coinbase, it makes more sense to use the wallet than if you don't. So which wallet to use is a very complicated, multifaceted question that's a bit orthogonal to today's topic.

00:18:07 - Alex Patterson

Cool.

00:18:08 - Anthony Campolo

Yeah. So when you have a wallet like this, I already have some money in it. But just so we can get some context here of how I got this here, everything we're doing here is with fake money. So this is all on what's called a testnet. And the testnet means that I did not have to pay for this AVAX, and I cannot sell this and exchange this for US dollars. This is not real money. This is like the Monopoly-money version of Avalanche. And so we have what are called faucets, which is basically just, you plug your address in here and it'll give you some fake money. Sometimes it'll ask you to do a CAPTCHA, kind of depending on how many bots are spamming them at any given point in time. Maybe. See over here, this just bumped up from 9 to 11. And this is exactly how a real wallet would work. If I had actual money in this and I wanted to send it to somebody else, I would be able to give them my address and they could send me money, or they could give me their address and I could send them money.

00:19:08 - Anthony Campolo

So that's kind of your "what is an actual cryptocurrency?" 101. But everything we're doing isn't requiring money because this is all on testnet. This is not actual real money, if that makes sense. Now what I'm going to do here is spin up a React app with Vite. Let's do codingcat-web3. Do you all have much familiarity with Vite? I know that some of you probably use frameworks already. SvelteKit's on that Vite train. So do you use Vite?

00:19:48 - Alex Patterson

Alex, we've been using Vite on Qwik quite a bit, so I've gotten a little more familiar with it. I'm slow on every framework, I feel like. So I'm still stuck on Next.js stuff.

00:20:00 - Anthony Campolo

Right.

00:20:00 - Brittany Postma

Blows Webpack out of the water.

00:20:03 - Anthony Campolo

Yeah, I really like Vite. I think that there are still a lot of good arguments to be made for using Webpack if you're on a serious production application because it's more battle-tested. But for sample apps and the kind of stuff that I do as a dev advocate, I pretty much always use Vite. Let me just explain those things I just installed right here. The dependencies that I installed are .env, which is just for our environment variables, and Hardhat. Hardhat is going to be our development environment that's going to allow us to actually deploy a smart contract onto the blockchain, and it allows you to do that with just a single command, which is pretty nice. And then Ethers, you can kind of think of it like your client library that you use to actually interact with the blockchain in JavaScript. So if you install any company's web SDK, there'll be certain JavaScript methods you'll use to do all sorts of stuff.

00:21:00 - Brittany Postma

Like maybe Prisma to the GraphQL stuff.

00:21:03 - Anthony Campolo

Yep, exactly. That's a good example. And then you have Nomic Labs, they're the people behind Hardhat. And there's a library that lets you integrate the two together. So this is one of those things where the boundaries between these tools can be a little fuzzy when you do an end-to-end experience, but they're meant to work very well together. This lets you get up really fast with blockchain stuff. This is similar to when Nader was writing his first tutorials about this stuff. These are similar tools he was using. So I read all of those and wrote my own versions of them. If you're into JavaScript stuff, everything we do here should be fairly comprehensible. The only real thing that's different is Solidity. We're going to create three files: one for our Solidity smart contract, one for our deployment script, and one to configure our Hardhat environment.

00:22:07 - Anthony Campolo

And we'll get into all that more once we look at each individual file. We'll also create a couple different environment variables. One is for our QuickNode endpoint, and one is our private key for our wallet. Because when we deploy the smart contract, we have our wallet key in there so we can essentially sign it and say this is ours. We're the ones putting this on the blockchain. And the thing we're going to create is going to be totally open. People can do whatever they want because it's just writing a message. But if you want to lock this down and associate it with your wallet in particular, that's a thing you can do as well. So there are security mechanisms built into this that we're not going to go into too much, but are a more important part of writing a Solidity smart contract.

00:22:55 - Alex Patterson

Is the QuickNode, sorry, that private key there associated with QuickNode or your wallet? Or is your wallet associated to QuickNode? Which is it?

00:23:04 - Anthony Campolo

So the QuickNode URL is the only thing we're going to get from QuickNode, and then the private key is from our MetaMask wallet here. So if we went to Account Details and clicked Export Private Key, it asks for your password and gives you your private key. So that's associated specifically with your wallet, and the endpoint is specifically with QuickNode.

00:23:26 - Alex Patterson

Thank you.

00:23:27 - Anthony Campolo

Yep, no problem. These are all good questions. And then we'll have one more environment variable, which is prefixed with VITE_ because it's going to be exposed on our frontend through Vite. Once we deploy the smart contract, we get this contract address back, which we give to our frontend to interact with through the JavaScript methods. And then the last really important step is: do not commit your .env file, because it has both your QuickNode URL, which should be kept private so people don't spam your endpoint, and your private key, which would allow people to access your wallet.

00:24:10 - Brittany Postma

If Vite is exposing that on the client side, would you not want to keep that private and not use the VITE_ prefix?

00:24:21 - Anthony Campolo

That might be written a little confusingly because I'm adding three environment variables there at one time. What's happening here is these two are not being exposed by Vite, only your contract address is what's going to be exposed to the client. Whereas these environment variables are just for your Hardhat configuration, and those will not be exposed to the client at all. So anything that's prefixed with VITE_, you need to make sure it's something that you actually want to be exposing. The contract address is public because that's like, if I wanted to share my wallet address, then I could just share that with anyone. They could send me funds, but they can't mess with my wallet. And it's the same thing with the contract address. If you have the address for the smart contract, that just allows you to interact with it through the way you're supposed to. It doesn't allow you to get inside it and do weird stuff to it like you could if you had the private key.

00:25:08 - Brittany Postma

Okay, that makes sense.

00:25:09 - Anthony Campolo

Yep. Cool. And now that we've got all that going, let's check out our boilerplate little Vite project here. This will be very similar to anything you've seen with Create React App. Got your little counter there. Let me just change this up here.

00:25:34 - Brittany Postma

Good old CRA.

00:25:35 - Anthony Campolo

Yeah,

00:25:39 - Brittany Postma

I haven't seen it in so long.

00:25:41 - Alex Patterson

I haven't either. I was just thinking I have not written an actual React example in so long.

00:25:48 - Anthony Campolo

Yeah. All right, so there's our baseline project. Now let's start looking at the Web3 stuff. This is the Solidity file. When I got a job at QuickNode, I had to do a technical interview where I had to write a Solidity smart contract. So this is very important, and if you're trying to get into Web3 and blockchain stuff, the very first thing you should do is start learning a little Solidity. You can go really deep in Solidity and become a smart contract developer specifically, but that's a niche specialty. So I wouldn't over-index on that. But everything we're doing is based around this contract, so if you don't know at least the basics, you'll be confused about everything. It's a good foundation to build, in the same sense that you learn a little JavaScript before frameworks.

00:26:53 - Anthony Campolo

Now if you've ever done object-oriented stuff, it shouldn't be too confusing, though, because we're going to define this contract, which you can think of as an object with a constructor and some functions on it, our hello world contract. And then this stuff up here is just defining our version number because you want to be explicit about that. There's none of this "package-lock, just give me the latest." You don't do that in blockchain world. You always specify the exact version of whatever it is you're using. Then this will allow us to console log some information along with the contract, and we'll see that one.

00:27:30 - Brittany Postma

What does the pragma mean?

00:27:35 - Anthony Campolo

This is just part of the Solidity syntax. I'm not sure why the name pragma specifically is used, but this basically just means you're setting the version of Solidity to 0.8.6. So any 0.8 version would work here, but 0.9 would fail. So that's what the caret means.

00:27:57 - Alex Patterson

That feels like a straight C cross over there to me.

00:28:00 - Anthony Campolo

Like the pragma C. Is that, is that a C? I've never written C, so I think

00:28:06 - Alex Patterson

so that's, that's kind of like for Python people it's, oh gosh, that's been too long. I'm not going to attempt it.

00:28:11 - Anthony Campolo

I've been told this is a C-like language.

00:28:13 - Alex Patterson

So yeah, it's very

00:28:16 - Anthony Campolo

cool. Yeah. So you're going to declare a variable, which is going to be a string, so it's a typed language. And then we have public and private methods. If you've ever done Java or C, there are probably things you recognize from each, and then the functions themselves are a little bit JavaScript-y. It's its own programming language, but it should be fairly familiar to people who know most of the popular programming languages of the day. And then you have a constructor, which you will pass the hello message into, and this will both console log it and set it to the hello message variable. What this allows you to do is, when we deploy this contract, we're going to feed in a string, which is going to make it so there's already something set to the message that we can then manipulate and change if we want. And so that's what's going on here. Then we have a hello function. This is our getter. So we declare a function, and this one's going to be public because it's going to be a function that we want to expose and allow anyone to basically call.

00:29:24 - Anthony Campolo

So if anyone wants to read this message from our contract, we want to make sure it's public, and then we specify the type of what it returns. So here it returns a string, and then it's just going to return the hello message.

00:29:39 - Alex Patterson

It's really interesting to me. They kind of go class-based, but then switch out function and method. So I don't know, it's wild.

00:29:48 - Anthony Campolo

Yeah, it's a unique little language. And then this will be our setter. So our setHello function will pass in a message. It's also a convention that you'll see this underscore here, that's for the argument, and then the argument gets set to the actual value. So it kind of helps you keep the two straight in your head. And then it'll also console log a message of "changed this to this," which will be this to this. And that is the entire contract. That's kind of your Solidity hello world example. Any questions on that?

00:30:27 - Alex Patterson

I think that all jives with me.

00:30:30 - Brittany Postma

Oh, it uses console log too instead of print. That's like something else. Yeah, it's like JavaScript inside the functions, and then outside it's like a class-

00:30:39 - Anthony Campolo

based language, and that's because that's being imported from Hardhat. So that is less something built into the Solidity language proper and more Hardhat introducing developer tooling that's very familiar to JavaScript.

00:30:53 - Brittany Postma

Oh, okay.

00:30:54 - Anthony Campolo

That is still Solidity, but it's like the console package that Hardhat has. That's why it sticks out a little bit. Then this part we're seeing here is going to be pretty much all Hardhat and Ethers stuff. This is straight-up JavaScript. Now we're going to have a main function that we're going to run. What this main function is going to do is run getContractFactory, and then it runs our HelloWorld contract. That's going to be the contract we pass in, and then it will initialize the HelloWorld factory. Basically, we can create as many objects off this contract as we want. The factory pattern is an object-oriented pattern. And then when I was talking about how we're going to feed in a string to automatically set the hello message, that is what this is here. So the message is going to start as "hello from QuickNode." When we deploy it, we just run the hello function to get the message back.

00:32:05 - Anthony Campolo

We'll get this, and then we can change that with the setHello function. Then you just await it and run the .deployed() method on it. So these are all the Hardhat conventions. And then this will console log the contract address in the terminal when you deploy it. When you actually run the React frontend, there are also more levels of console logging happening here. But essentially, you console log something at almost every point of the process. Does that make sense? Any questions on that?

00:32:48 - Alex Patterson

Yeah, I think I actually walked through a very similar one to this that Nader did. There are points in here where we start getting into Hardhat versus bouncing back and forth, and I think that might be a little confusing for people who write a lot of JavaScript for the web. So just calling that out. Not really a question, more of a statement. That's something I got hung up on at first.

00:33:11 - Anthony Campolo

Yeah, that's great. So something that might help distinguish this is that everything we're going to be doing up to deploying the actual contract is basically all Hardhat and Solidity stuff, because there's the contract itself, and then Hardhat is the tool that allows you to actually get that contract onto the blockchain. So there's the contract itself, there's the tooling to get the contract up, and then once we get into our frontend and our React app, we're completely removed from Hardhat and just using the Ethers library. And so that's its own thing that is your actual client software. Understanding the boundaries between those two things is what was confusing to me when I was getting started. I think of Hardhat as your build tooling and Ethers as your client library.

00:34:05 - Alex Patterson

And this will make more sense.

00:34:07 - Anthony Campolo

Cool, yeah. Also, you can run a Hardhat command that generates a boilerplate project, and it looks fairly similar to this. One of the nice things about this Web3 stuff is that it's very composable. You have contracts, you do stuff with contracts, and you read from contracts. But there's a clear separation of concerns there, which is what I really like and what makes these tutorials fun to build and do. This is where you can specify different chains. I was talking about how we're using Avalanche and not Ethereum. So right here, if we were doing this on Ethereum or Ethereum testnet, we wouldn't use the term Fuji, we'd use, say, Ropsten, because Ropsten is the Ethereum testnet. Ethereum also has a mainnet with actual funds and Ether on it, and then testnets with fake Ether that people can use to test and transact for free.

00:35:18 - Anthony Campolo

So let me now show the QuickNode stuff. So this is QuickNode. As you can see, we currently offer 14 blockchains. So here's all the ones we have here. You've got the classics like Ethereum and Bitcoin, some of the newer ones like Algorand and Gnosis and things like that. You've got ones that have had a bit of bad press recently, like Terra, we won't talk about that one. And yeah, well, it's a whole thing. So when you actually go to your dashboard, you can create an endpoint. I already have an endpoint, but just so people can see what's going on here, you would have selected Avalanche, and then you would specifically select the Fuji testnet. And then you can also do a couple add-ons if you want. Archive mode is if you want access to the entire history of the whole chain, versus usually when you connect to one of these services, they give you a certain amount of history of the chain, which is usually fine for the kind of purposes you're going to be doing, unless you're specifically doing something that requires deep analytics of the entire chain, which is kind of a specific thing.

00:36:32 - Anthony Campolo

But for the most part you will just spin up a node and then you'll get this endpoint. I'm not going to show the rest of it. At the end of the endpoint you have basically a private key associated with it. I'm going to hop off for just one second.

00:36:49 - Alex Patterson

Yeah, I was going to say, show our beautiful faces. Brittany, so far it's kind of crazy, all the hype. People talk about money and my parents, or my dad specifically, are always like, "What's all this Bitcoin stuff?" And then I talk about blockchain, and he's like, "Yeah, but the Bitcoin." And I'm like, oh, it's so hard. Do you run into that yet?

00:37:18 - Brittany Postma

I don't talk to people about it because I don't know anything about it. So if I did, I'm sure they would have the same reactions that I do. I just don't know enough.

00:37:26 - Alex Patterson

I feel like I do well with the like technical pieces. It's the like association of money that I'm like, I'm out. Like I don't know.

00:37:34 - Brittany Postma

Yep.

00:37:36 - Anthony Campolo

Yeah. So hopefully this is giving you a better idea of the underlying tech of it because the financial stuff is really a whole can of worms unto itself. But I think it's not the whole thing. And it is interesting for stuff like, if you want to invest in something, you need to be an accredited investor. I've known companies where, if I had been an accredited investor at the time, I would have invested in Supabase and I would have a ton of money right now because I saw Supabase come up real early. But I couldn't do it. I legally was not allowed to invest in a company like that. So I think that stuff is actually really interesting, and it can potentially create a more transparent and easily accessible financial system for people. But you could be totally uninterested in all that and still get into the smart contract stuff. And there's a lot of interesting stuff there in terms of what you can build with these applications and the types of use cases you can enable.

00:38:39 - Anthony Campolo

Because something else people don't usually talk about with NFTs is that NFTs are actually a way to show ownership to get into a club. So there's Developer DAO, which Nader created, and you have to get the Developer DAO NFT. That allows you to authenticate. It's like your login, and that allows you to ensure someone is who they say they are and also knows how a wallet works in the first place. So it kind of ensures you can trust them with this kind of Web3 tech, because you don't really want someone coding your system who doesn't understand this stuff when money is involved. There are ways of proving and verifying that which are harder to do with other technology.

00:39:29 - Alex Patterson

That's really interesting. Does every chain support NFTs?

00:39:34 - Anthony Campolo

No. Something like Bitcoin doesn't really, because Bitcoin doesn't have smart contract functionality. People build extra layers and other chains that can retroactively add that functionality back in. But some chains are more natively set up for that functionality, like Ethereum or Solana. It's a lot easier to get an NFT out there than rejiggering something to make it do what it wasn't meant to do in the first place, which happens with Bitcoin. People don't really want to change it, and that's a whole other topic.

00:40:09 - Alex Patterson

Cool.

00:40:10 - Anthony Campolo

Many rabbit holes to fall down here. Now that I got my keys in there, we're going to run two commands. We're going to do yarn hardhat compile, and this is going to compile what's called an ABI. An ABI is an application binary interface, which takes your Solidity files and turns them into machine code that the chain understands. If you've ever worked with a compiled language, same thing: you write the program, run a compile step, then run the program. You don't do that with JavaScript, but TypeScript has a compile step too. Then we run the actual script, which is hardhat run scripts/deploy.js --network fuji. We're specifically deploying it to Fuji versus Ethereum or Ropsten.

00:41:32 - Anthony Campolo

If we get our React app going now, this has a fair amount of code, but if you know React, it should be fairly intuitive. We're going to...

00:41:49 - Brittany Postma

Do you just use React and intuitive together?

00:41:55 - Anthony Campolo

Yeah, that's why I said, if you know React. That if statement is doing a lot of heavy lifting. So we're going to do a couple imports here. We're going to do useState, which is going to allow us to hold the state of our hello message. We're going to import the Ethers library, which will allow us to get our wallet connected to the website. Then we're importing these artifacts here. And this is something that Hardhat generated for us, which is basically the methods that we're creating. You have the hello message, and it's a string. And then you have the hello function and the set hello function.

00:42:40 - Brittany Postma

Hardhat did that during the compile step. Like generated all of that.

00:42:44 - Anthony Campolo

Yep. And then we specifically told it, we want you to put those artifacts inside our src folder because we want this to be accessible from our React application. And then with all of that, let me grab that.

00:43:01 - Alex Patterson

I feel like there are just so many terms. I need a diagram of all the things.

00:43:08 - Anthony Campolo

Are there any in particular that you want?

00:43:10 - Alex Patterson

We'll talk after. I feel like we could really make a sweet diagram out of this.

00:43:16 - Anthony Campolo

Nice. I'm just going to plug this in right now. So I have to go back into my .env file, and this is now our contract address. Our contract address is going to be passed into this contract method, which is from the Ethers library, along with our hello world application binary interface. This is like when I was first getting into Redwood. I would demo Redwood apps and be like, "It works. Don't ask me how." This is one of those. I don't really know how the Ethers library works under the hood, but what it's basically doing is exposing the native Ethereum RPC methods to you because each blockchain is just exposing an RPC endpoint, and there are different methods that go along with that RPC endpoint. If you go to quicknode.com/docs, you can actually find every single available method on every single blockchain. And so we have really thorough documentation on all that. But that's essentially what's happening here. Ethers is just saying, we're going to set you up so you can run these RPC methods. You do it in JavaScript. You don't have to make calls directly to the blockchain.

00:44:24 - Anthony Campolo

We're just going to manage that for you. So that's basically what's happening here. And then once we have the contract, we actually run the methods on the contract. So we have the hello and the set hello. So we're going to run the hello method on the contract, and then that will allow us to set the hello message to this data object, which is then set to our hello value, which is our state variable. And then we both console log it and display it here on the page. And then we have a button with an onClick to do our fetch hello. I think that's fairly comprehensible as far as React goes.

00:45:02 - Brittany Postma

I'll agree with you.

00:45:04 - Anthony Campolo

Yeah, don't worry, there'll be a Svelte example within the next couple months.

00:45:10 - Brittany Postma

She's like, I would love to have you on Svelte Sirens when you do that.

00:45:14 - Anthony Campolo

Oh yeah, that sounds great. Okay. And then I just like to give a little CSS preset as well, just to make this so you're not just looking at some terrible HTML, unstyled HTML, and then that should be about all we need to do now. Let's get this open again. And now we see we've got some more stuff going on.

00:45:40 - Alex Patterson

Can I pause for people like myself that have just completely gotten lost? So we've got Hardhat creating a method, a binary...

00:45:53 - Anthony Campolo

I was talking about the... yes. So the Hardhat stuff is essentially already done for us, and that is kind of just in our project now. And we can now access those methods that were automatically generated into that application binary interface.

00:46:10 - Alex Patterson

Those are methods we created. But then we're using the Ethers package to pass our methods forward, or functions forward, so that...

00:46:19 - Anthony Campolo

So it's the Ethers package that allows us to get into JavaScript world because, if we looked at what we generated, it's essentially just a raw JSON file. So this isn't particularly easy to integrate into a React frontend. What this allows us to do is call those methods just by doing something like hello(), and then that all gets managed for you. Once you've written your contract, Hardhat figures out how to turn that into something Ethers can understand, and that allows you to call those in your JavaScript code and not have to worry about that whole translation from a Solidity contract to an actual application binary interface to methods that can be called in JavaScript.

00:47:14 - Brittany Postma

It kind of seems like developer experience that's gluing the pieces together to make it easier for JavaScript developers to link these things together.

00:47:25 - Anthony Campolo

Yes, that's exactly what it is. That's exactly why I got into this stuff. I was like, yeah, this makes sense to me.

00:47:31 - Alex Patterson

Like, okay, I just wish the Ethers package could do all the contracts as well, so you could eliminate the Hardhat piece somehow.

00:47:39 - Anthony Campolo

Well, that's because Ethers is just a client library, so it doesn't know anything about the contract.

00:47:46 - Brittany Postma

Have you ever used Prisma? Like you can use Prisma with different like GraphQL things. So it just gives you methods that makes it easier to connect to these things.

00:47:53 - Anthony Campolo

So that's the reason why that's possible, though, because even Prisma itself has two separate tools that are doing that. There's a Prisma Client and there's Prisma Migrate, and it's only after you run Prisma Migrate that actually sets up your database that the Prisma Client can do its magic.

00:48:08 - Alex Patterson

Yeah, it's the abstraction piece. It's interesting.

00:48:13 - Anthony Campolo

Okay, so now that we have this working, let's actually see that it works. So we're going to click this, and then it's going to ask us to connect our wallet. And this is the part where, if you ever find yourself on some random website and they ask you to connect your wallet and you have no idea why you're there or why they're asking you to do it, do not do it. This is how you will get owned. So only ever connect your wallet to a website that you explicitly trust.

00:48:39 - Alex Patterson

I think it's probably worth calling out too, if people have never done this. MetaMask is a Chrome plugin extension. That's why this is popping up.

00:48:49 - Anthony Campolo

Yep, exactly. And so now, once we click that button and we've verified that we want to connect to this site through our wallet, it will then read back the greeting here, which is "hello from QuickNode," and it's also being displayed here in our state. So that is our getter. Now, if we want to do the setter, we're going to add a setHello function, and this will be very similar. It'll still take in the contract address and the ABI, but the difference is that it now also has a signer. So we're going to be asked to sign this when we change it. That way there's a record of who changed the message when. And then that basically just reruns the fetchHello function after doing that and passes in hello to the setHello function on the contract. And then now we're going to give a little input here, and this will give us an onChange handler to check the change of our input field, and then on click we'll run setHello. This is the part that, when I do this in Svelte, I will need your help with.

00:50:06 - Brittany Postma

But I was wondering where that part was going to be, that piece of setting it. But you're just grabbing the value of the input straight in the inline function there.

00:50:17 - Anthony Campolo

Yeah, it's not a very clean way to do it because, if we see here, if I change this here, it just automatically changes it there, even though it's not actually been changed yet until I click the setter. This is a down-and-dirty way of doing it, but it gets the idea across.

00:50:33 - Brittany Postma

Because of the binding of values in React?

00:50:38 - Anthony Campolo

It's because right now we're just doing the onChange every time.

00:50:43 - Brittany Postma

Every time it changes. Can you not do it on click on the button and include that e.target.value? You'd have to rearrange your code.

00:50:52 - Anthony Campolo

Yes, you could. Absolutely, you could. It's something that I just haven't done. So yeah, one day. Okay, so now that we got that, we're going to do this, and now it's going to ask us to confirm. And this is where there's quote-unquote gas fees. We see here the gas fee is 0.0009 AVAX. This is one of the reasons why Avalanche is so sweet, because Ethereum is set up in a way and architected in a way where you have to pay a ton of money in transaction costs. So you can buy a domain, and when I first bought a .eth domain, it was like $15 for the domain and like $200 for the transaction. So transaction costs are a huge, huge problem. But right now, Avalanche transactions are fractions of a cent.

00:51:44 - Brittany Postma

So this is why it's called gas?

00:51:49 - Anthony Campolo

Because the idea is that people can pay a little more to make it more likely that their transaction gets in sooner. So it's kind of like an auction. Because the block space itself is so valuable and people want it so much and want it so quickly, they built in a mechanism that would basically allow people to pay more to get in sooner. But then this results in the price running up and up and up when people with lots and lots of money are using the chain. So it's a big problem that Ethereum itself is trying to fix through various different mechanisms, both scaling itself and building auxiliary chains that offload computation that gets put back on the chain. So there are different ways of trying to scale the current chains, and then other chains are being created from the ground up to be more scalable. So that's something that is a lot more low-level and is more important if you're someone who's a lead architect on these kinds of projects. But this goes back to why QuickNode wants to give you multiple chains, so you're not stuck with this one crazy expensive chain.

00:52:51 - Alex Patterson

I think the key image that I have is like back in the '70s, during the gas shortage, all these cars stacked up. So there's the picture, right?

00:53:03 - Anthony Campolo

Yeah, that's, that's fine. I've, I've heard legends, legends of that, of that era.

00:53:08 - Brittany Postma

I don't remember that.

00:53:09 - Alex Patterson

I'm just saying I watch movies. It's fine.

00:53:13 - Anthony Campolo

No, my parents lived through that. They've told me about it. It was definitely a thing.

00:53:18 - Alex Patterson

See how I have to make an image out of everything? It's the only way I learn. Sorry, guys.

00:53:23 - Anthony Campolo

All right, so now we get to use our good friend Netlify here to deploy this. Something I like to say is that Web3 is Jamstack by default because, if you think about it, right now we have a frontend client in JavaScript that's completely decoupled from a backend that is calling through some sort of API. And the only thing it really needs to do that is the application binary interface we generated and the contract address, which we have right in here. So I'm just going to do this totally bog-simple netlify.toml with a build command and a publish directory, and then we're going to get this up on the internet. Then we're going to use the GitHub...

00:54:14 - Brittany Postma

...to init your Git repository. You did git add to add your files. You did git commit to commit them. Trying to walk people through the steps here.

00:54:23 - Anthony Campolo

Yeah. Then this part is a little bit confusing. Let me boil this down real quick. What's happening with this is we are doing gh, which is the GitHub CLI, and then we're going to do repo create. We want to create a repo, we're going to give it the name codingcat-web3, we want this to be a public repo, not a private repo, and then we also want to push our changes as we create the repo. The only reasons I really like this

00:54:52 - Brittany Postma

command, I need to remember these. What do you call the little things?

00:54:57 - Anthony Campolo

[unclear].

00:55:00 - Brittany Postma

Yeah, the little parameters that you add after. I've never used those.

00:55:04 - Anthony Campolo

Yeah, because then you can specify the source is just our current project. You can also add a description.

00:55:14 - Alex Patterson

That's funny, I always do the username in front of codingcat. I guess you don't need it though, do you?

00:55:22 - Anthony Campolo

Yeah, maybe if you have multiple accounts connected to it.

00:55:26 - Brittany Postma

I never use my username and I have multiple organizations and things.

00:55:31 - Anthony Campolo

Then the last one is, you also set the remote at the same time. So this allows you both to create the repo and push everything up at the exact same time, which is pretty cool. That guy is now up here on the internet.

00:55:46 - Alex Patterson

If you do that a whole lot, folks, you can add some bash commands, just FYI, where you just put the repo name.

00:55:52 - Brittany Postma

An alias. Yes, add an alias and you can just add the parameters that you need.

00:55:58 - Anthony Campolo

Yeah, it's true. I tend to avoid that stuff because I like having tutorials with the command as it is, so other people can understand what it is as well. But yes, if you're someone who does this a lot and you're not a developer advocate, then that's probably the move.

00:56:12 - Brittany Postma

That is a great callout, actually. If you're showing other people how to do it, it's nice to have everything there so they can see your whole command. No, you're not going to use the Netlify CLI.

00:56:21 - Anthony Campolo

I've seen that. I've been on streams before where people have tried to use it for this and things go awry.

00:56:30 - Brittany Postma

So that happened to me the other day too. I mean, it's great. It's nice sometimes when it works, but

00:56:37 - Anthony Campolo

I look forward to the day where I can rely on the Netlify CLI. I do think it's awesome, but I've seen it go wrong enough times. I've never once deployed a site from the dashboard and had it not work, so that's nice.

00:56:54 - Alex Patterson

I'm just saying, really easy too.

00:56:58 - Anthony Campolo

But it was really easy.

00:56:59 - Brittany Postma

I had to do that.

00:57:00 - Alex Patterson

Brittany's gonna be mad. I can't repeat it.

00:57:04 - Anthony Campolo

Okay.

00:57:04 - Brittany Postma

And then the one that should not be named.

00:57:07 - Anthony Campolo

Oh, gotcha. Yeah, yeah. I mean, I'm probably going to have examples on all of them. Redwood supports seven deployment providers, so at this point I feel confident I've used basically all of them, and they're all nice. They all have their place.

00:57:21 - Brittany Postma

I mean, that's, that's the way that the Jamstack should be. It's like, yep, not being framework specific, not being hosting provider specific.

00:57:32 - Anthony Campolo

I'm going to get this back into Chrome over here. Now, when we do this, we're going to have to reconnect because we're not on localhost anymore, we're actually on this website. We're going to reconnect. If you see here, it's giving us back our message after we already did the setter because we're passing the exact same contract address. Whatever state you leave it in is the state it's going to be in, regardless of what client you connect with. And now we're going to do this, and it'll ask us again to confirm this transaction. That'll be the final step, and it will give us back "hello from Netlify." If anyone wants to connect to this, they can also do this and change the message as well, so this isn't locked down to my wallet specifically.

00:58:40 - Alex Patterson

That's awesome. Look at that. He only needed a drink now, folks. I mean that was amazing. You just talked for an hour and just finally got a dry mouth. Now I'm impressed.

00:58:53 - Anthony Campolo

This is what I do. This is what I live for.

00:58:57 - Alex Patterson

That's fantastic. I was going to point out a shoutout to Anthony's main page, ajcwebdev.com. Fantastic articles out there. It's Hashnode-based, so it's really searchable, which I find interesting. Good work on that. But I wanted to call out the Avalanche article, and this story, "off-chain with Fauna," which I found fascinating.

00:59:29 - Anthony Campolo

Oh great. Yeah. So this is actually a sponsored article that Fauna paid me to write. So I basically do something similar to what I just did here. Then I also bring in an NFT and kind of show that part. You don't actually save the image on a blockchain, you save it on IPFS. So this is where IPFS also gets into the picture. And then I do one final step where I run a GraphQL query to save all of that data onto Fauna so it's not just all sitting on your computer somewhere and you could lose it. Because this is actually a huge, huge problem. People will pay a ton of money for NFTs and then lose the password to their wallet, and then it's gone forever. You can't get into it because people don't write down their keys. So you want to back up all of your information when you do this. I have a password manager, I save all my stuff in a password manager, so I feel confident I can go into that password manager to get things after the fact.

01:00:26 - Anthony Campolo

But this goes one level deeper: we're going to get you a database and save this information in a database, so you ensure it doesn't get lost. That also means you're introducing a security vulnerability, because then someone could get into your Fauna database and see all your stuff. So there are trade-offs all the way down.

01:00:41 - Alex Patterson

Pros and cons with everything in life.

01:00:42 - Brittany Postma

Yeah, we love Fauna too. And if you want to hear a really smart person talk for a while, Rob Sutter was on and he will blow your mind. Oh my gosh, that guy talking about databases.

01:00:54 - Alex Patterson

Yeah, he dumbs it down for us, but he's brilliant, so definitely watch that episode. Okay. First of all, thank you. Before we transition, that was an amazing demo. And now we're going to transition into our perfect picks. And you have probably the funniest one to start with.

01:01:16 - Anthony Campolo

Yeah. So Brittany was saying she didn't know who Bo Burnham is. Bo Burnham is someone I originally knew as an early YouTuber. He got onto YouTube and had some viral videos back in 2006 and 2007, and we were the same age. I was 16 or 17, he was 16 or 17. He was kind of a child prodigy. He wrote these funny songs that, in hindsight, were sometimes super offensive and he's not super proud of them anymore, but he had a ton of talent and parlayed that into a really legitimate career. He would create stand-up routines that were part stand-up, part theater, part musical comedy, all at the same time. It's really incredible stuff. And he actually gave up on performing live because he started having severe panic attacks on stage. Then the pandemic hit right when he was about to return to the stage, and then he obviously couldn't.

01:02:21 - Anthony Campolo

And so he spent a year and two months inside his house by himself, creating a one-man movie that's a sequence of skits and songs and commentary on the pandemic. It's very subtle in that he never uses the term COVID. He doesn't talk about COVID directly, but he's making this thing inside and talking about how he's never gonna go outside again. That's why it's called Inside.

01:02:51 - Brittany Postma

So I'll have to watch this because it sounds really funny.

01:02:53 - Alex Patterson

I think this is on Netflix too, right?

01:02:56 - Anthony Campolo

Yeah, it's a Netflix original. This is the Inside Outtakes. He created an entire extra hour of content because he was inside by himself creating hours and hours and hours of material. This is like the B side. It's like when Radiohead puts out B-sides and the B-sides are still better than most people's regular albums. This is kind of that. It's the Inside B-sides, and they're still so, so good. I highly recommend them.

01:03:22 - Alex Patterson

Well, you just officially figured out a way for me to lose, what, another 20 minutes out of my life. Thank you. I'm actually looking forward to this. I feel like this was one of the first things I saw, call it post-pandemic, even though we're still in it, once things relaxed a little bit. This is one of the first things I watched, and I saw him before, and I was always like, are you a stand-up comedian? Are you an artist? What are you? And it's just amazing, all the stuff he can do. So very good pick. Brittany, you are up.

01:03:56 - Brittany Postma

Oh, yay. Is it? Oh, yeah. So I'm going to step out of the way so I can actually show this bad boy and show how gigantic this thing is. Like, I can't even get it in my... it's huge. But it is so nice for standing, and I've switched to standing all day, and I'm getting plantar fasciitis now, so maybe next time I will show you the plantar fasciitis socks that I got that I'm wearing. And I'm not going to attempt to pull my leg up above my head to show you. But this makes it so that your feet have different textures to touch and feel, so you don't get tired of standing. So you can stretch your calves, you can massage your feet on the back, and stand on the balls to balance. And I really like this thing.

01:04:42 - Alex Patterson

That's really cool. I have just kind of the flat anti-fatigue one and rotate from that to the carpet and back. So this looks cool, though, because I'm always wanting to put my foot on something.

01:04:53 - Brittany Postma

Yep.

01:04:54 - Alex Patterson

That's awesome. Your second pick is the State of CSS.

01:05:00 - Brittany Postma

Yes. So Adam Argyle, who we also had on an amazing episode, is a CSS wizard. They did State of CSS at Google I/O, and CSS is in a great place. This is a great recap of the state of CSS. You're muted.

01:05:23 - Alex Patterson

I should have been playing that the entire time you were talking, but this was incredible, by the way. I've found so many tips. I've put them out on Builder's Twitter account already, kind of rethinking through things like [unclear]. It blows my mind how far we've come with browsers and actually agreeing on things. I can't wait for the next couple years when we get even closer on this stuff. So huge props to that entire team. Thank you for doing that.

01:05:53 - Brittany Postma

Lots more coming.

01:05:56 - Alex Patterson

Brittany tried to steal this one.

01:05:58 - Brittany Postma

Of course I did.

01:05:59 - Alex Patterson

I can only imagine why, because it has the name Svelte in it somewhere. I saw this, and I'm always intrigued by Svelte because Brittany is always trying to push me into it. I think she mentioned she's going to rewrite all of [unclear] one of these days. But this was sweet. They created this flowchart library. This kind of showcases Svelte because, again folks, it's JavaScript. At the end of the day, you get all this beautiful stuff the web offers no matter what you're using. I found it neat. I dug into it a little bit on the docs side. Super easy, super nice concepts to dive into. It reminds me of Mermaid. Using Markdown, you can write in Mermaid, but this is more visually appealing to me.

01:07:22 - Alex Patterson

This blows me away. It's a 2D game that was at Google I/O, and I think it's the second or third year that they had it on there. I just wanted to call out how amazing this still is. You can walk around the entire space, and anytime you want to interact with something, like let's say this YouTube video up here, you can just bounce onto it and it automatically starts. It just feels way more interactive. Especially for schoolchildren, I keep thinking about how they can walk around and get into little areas and do something like that. What I can't show, which is really cool, is when you go to, here's one, this chair right here, anyone who sits with you on that chair you can chat directly with in kind of a private-ish conversation. Whoever's sitting in the chairs gets to listen to that. So I found that super amazing too. Easy way to kind of...

01:08:21 - Brittany Postma

...get through. Do you know what they're using? Is this just JavaScript, or is this a library of some kind?

01:08:27 - Alex Patterson

It is a JavaScript-based game engine library. I'll have to find it because I always forget the name of it. But I do have a YouTube link for the library itself and how they made the game. I think in 2019 they showed it.

01:08:42 - Brittany Postma

I think in 2019 they showed something called Topia that Zero to Mastery uses that's similar to this, where you have areas that you can talk to people in and use, but the style is different.

01:08:52 - Alex Patterson

Yeah, there are a couple great software-as-a-service platforms that are trying to do more of this kind of thing, and it's not just completely game-based like this, but you can go in. And I find those amazing because you have kind of a circle around you, and as long as someone's in your orbit, essentially, you can all talk to each other. And I feel like that's a lot more like in-person conferences, when you're kind of walking around and you're like, "Oh hey, I haven't seen you in a while," and all of a sudden that conversation starts. I find anything virtual that can somehow pull each other a little closer together is awesome. So yeah, thank you so much, Anthony. I really appreciate you coming on again, as always. Yeah, thank you for coming on every single time. QuickNode seems like a good spot for you, and you're learning a ton and teaching others a ton. So part of our learn, build, teach is always that kind of methodology, and I appreciate you, man.

01:09:52 - Anthony Campolo

Yeah, thank you for just being open to learning about this stuff. I know that there are some people who are very skeptical of the technology. I think that's totally fair. We should all be skeptical of all the things we hear about tech. And you know, there are definitely scams, there are definitely a lot of bad actors in the space, and we want to create a safer, more welcoming environment for people who are interested in Web3.

01:10:13 - Brittany Postma

Yeah, that's awesome.

01:10:15 - Alex Patterson

Yep. All right, everybody, take care. Thanks so much. We'll see you next time.

01:10:19 - Brittany Postma

Later.