Calendly, Web3, and Twitter

One of my favorite hobbies is building app tutorials in response to trending Twitter topics. On my YouTube channel, we’ve used Python to scrape Wall Street Bets, built an ARK Invest database, and parsed PDFs containing Nancy Pelosi’s options trades. These apps are fun to build for a few reasons:

1. They relate to the current moment in time
2. They are more interesting and original than typical example projects
3. They aren’t too serious, which is part of the fun

If you’ve spent any time on Tech Twitter or Crypto Twitter lately, “web3” is the hot topic. There is currently a battle between proponents of web3 and its critics. Its proponents claim web3 is revolutionary and is the future of the Internet. Its critics think it is at best a buzzword and at worst – it will destroy planet Earth. As with most things these days, the extremes go a bit too far and the truth is probably somewhere in the middle.

What We’re Building

The app (or dapp in this case) we are building in this tutorial was inspired by a few tweets that were trending during my last week at work:

• ‘Calendly’ Etiquette Tweet
• Web3 solves the byzantine calendly problem
• Automate realtime auctions for your time
• calendly but every slot is an nft sold to the highest bidder

So this guy wrote up a post about how he finds calendly links offensive, and there was a discussion on Twitter about this for a couple of days. Naturally, there were a few jokes about web3 and calendly. A web3 critic joked about writing code to auction your time to the highest bidder.

Even though this was a joke, I thought it would be fun to make and would be a good learning experience. I have a lot of time on my hands, so I thought I would build a simple web3 calendar that charges Ether to schedule a meeting. I had been meaning to spend more time learning Solidity, and there is even an auction example in the Solidity documentation.

As usual, I documented the process along the way and I’m going to share it with you. And even if you think a web3 calendar is a silly idea, I hope a handful of people will learn something from this tutorial and go on to build something better. I certainly learned a lot while making it.

How We Will Build It

This is a 10 part tutorial. Each part has a video and a written version. You are reading Part 1 now. The next 9 parts will build the application step by step so that you can follow along. Here is an overview of each part and its focus:

• Hardhat. When developing a “traditional” web application, we typically set up a local development environment (eg. the LAMP stack). When we are developing on Ethereum, we will set up a local environment using Hardhat. This will be the focus of Part 2.

• Solidity and Smart Contracts. When using a relational database, it is common to write some logic in stored procedures using SQL. I think of a smart contract as being similar to a stored procedure. Instead of being written in SQL, it is written in Solidity. Instead of being stored in PostgreSQL or MySQL, it is stored in a distributed, public database – the Ethereum blockchain. We’ll start by creating a smart contract to set the rate to charge for a meeting. This will be the focus of Part 3.

• Metamask. Clients will connect to our application using an Ethereum wallet. We will use Metamask since it is the most popular and most developer-friendly. This will be the focus of Part 4.

• Alchemy. Most people don’t run their own web server and database server at home. It isn’t that hard, but most people don’t want to worry about monitoring, alerting, and uptime. Likewise, running an Ethereum node ourselves is time consuming and we are busy people. We want to focus on building our dapp. Therefore we will use Alchemy, a popular node provider, to deploy our smart contract. This will be the focus of Part 5.

• React. Our app needs a frontend. Users don’t really care about your smart contracts or node providers. They just want to click a couple of buttons and get what they want. In this case, they want to schedule an appointment. We’ll build a frontend using React, the most popular JavaScript library for building user interfaces. We will first build the Connect Wallet screen, which is the sign-in experience for our application. This will be the focus of Part 6.

• Appointments and Payments. The owner of the calendar will receive payment in ether for each meeting. We will calculate the cost of each meeting based on its start and end time. We will charge the client when the meeting is scheduled and store the meeting data in an array of structs. This will be the focus of Part 7.

• Material UI. One of the primary benefits of using React is its ecosystem. Material UI is a popular component library that we can use to add complex UI components without reinventing the wheel. We will customize a Scheduler component to display a weekly calendar to the client. This will be the focus of Part 8.

• Ethers.js. You may have built webapps that interact with REST APIs. But in our case, we want to interact with a smart contract. We’ll learn how to use Ethers.js and an ABI (Application Binary Interface) to call our smart contract from our UI. This will be the focus of Part 9.

• Notifications. When a client schedules an appointment, we want to know about it immediately. To accomplish this, we’ll use Alchemy Notify and Twilio. We’ll receive an SMS text message when someone interacts with our smart contract. The message will contain some details about the transaction and provide us a clickable Etherscan link:

Make It Your Own

At the end of the tutorial, we will have built an appointment scheduler that uses web3 tools and technologies. Who knows, maybe you can iterate on this and it will be the next billion dollar app. I hope so!