2. How to Build "Buy Me a Coffee" DeFi dapp

Blockchain technology is amazing because it gives us the ability to program money using code and software. With a few lines of code, it's possible to build all kinds of applications and protocols that can create new opportunities for people around the world.
Buy Me A Coffee is a popular website that creators, educators, entertainers, and all kinds of people use to create a landing page where anyone can send some amount of money as a thank you for their services. However, in order to use it, you must have a bank account and a credit card. Not everyone has that! 
A benefit of decentralized applications built on top of a blockchain is that anyone from around the world can access the app using just an Ethereum wallet, which anyone can set up for free in under 1 minute. Let's see how we can use that to our advantage!
In this tutorial, you're going to learn how to develop and deploy a decentralized "Buy Me a Coffee" smart contract that allows visitors to send you (fake) ETH as tips and leave nice messages, using Alchemy, Hardhat, Ethers.js, and Ethereum Goerli.
By the end of this tutorial, you will learn how to do the following:
Use the Hardhat development environment to build, test, and deploy our smart contract.
Connect your MetaMask wallet to the Goerli test network using an Alchemy rpc endpoint.
Get free Goerli ETH from goerlifaucet.com.
Use Ethers.js to interact with your deployed smart contract.
Build a frontend website for your decentralized application with Replit.
Video tutorial version here:
Prerequisites
To prepare for the rest of this tutorial, you need to have:
npm (npx) version 8.5.5
node version 16.13.1
The following is not required, but extremely useful:
some familiarity with a command line 
some familiarity with JavaScript​
Now let's begin building our smart contract!
Code the BuyMeACoffee.sol smart contract
Github reference: https://github.com/thatguyintech/BuyMeACoffee-contracts​
If you've used tools like OpenZeppelin Wizard and Remix before, then you're already primed to use Hardhat.
Hardhat is similar because it's a development environment and coding tool, but it's a little bit more customizable and runs from your own computer's command line interface instead of a browser application. 
We will be using Hardhat to:
generate the project template
test our smart contract code
deploy to the Goerli test network
Let's go!
Open your terminal and create a new directory.
1
mkdir BuyMeACoffee-contracts
2
cd BuyMeACoffee-contracts
Copied!
Inside this directory, we want to start a new npm project (default settings are fine):
1
npm init -y
Copied!
This should create a package.json file for you that looks like this:
1
[email protected] BuyMeACoffee-contracts % npm init -y
2
Wrote to /Users/thatguyintech/Documents/co/videos/week2/BuyMeACoffee-contracts/package.json:
3
​
4
{
5
  "name": "buymeacoffee-contracts",
6
  "version": "1.0.0",
7
  "description": "",
8
  "main": "index.js",
9
  "scripts": {
10
    "test": "echo \"Error: no test specified\" && exit 1"
11
  },
12
  "keywords": [],
13
  "author": "",
14
  "license": "ISC"
15
}
Copied!
Now we create a sample project:
1
npx hardhat
Copied!
​
​
Press Enter to accept all the default settings and install the sample project's dependencies (hardhat, @nomiclabs/hardhat-waffle, ethereum-waffle, chai, @nomiclabs/hardhat-ethers, ethers).
In case something goes wrong with the dependency installation, try to re-install by running this command:
1
npm install --save-dev [email protected]^2.9.3 @nomiclabs/[email protected]^2.0.0 [email protected]^3.0.0 [email protected]^4.2.0 @nomiclabs/[email protected]^2.0.0 [email protected]^5.0.0
Copied!
Your project directory should now look something like this (I'm using tree to visualize):
1
[email protected] BuyMeACoffee-contracts % tree -C -L 1
2
.
3
├── README.md
4
├── contracts
5
├── hardhat.config.js
6
├── node_modules
7
├── package-lock.json
8
├── package.json
9
├── scripts
10
└── test
Copied!
The important folders and files are:
contracts - folder where your smart contracts live
in this project we'll only create one, to organize our BuyMeACoffee logic
scripts - folder where your hardhat javscript scripts live
we will write deploy logic
example buy-coffee script
and a withdraw script to cash out our tips
hardhat.config.js - configuration file with settings for solidity version and deployment
Now use any code editor to open up the project folder! I like to use VSCode.
You'll notice that there are a number of files already auto-generated via the Hardhat sample project tool. We will be replacing all of them, starting with the Greeter.sol contract.
1.Rename the contract file to be BuyMeACoffee.sol
2.Replace the contract code with the following:
1
//SPDX-License-Identifier: Unlicense
2
​
3
// contracts/BuyMeACoffee.sol
4
pragma solidity ^0.8.0;
5
​
6
// Switch this to your own contract address once deployed, for bookkeeping!
7
// Example Contract Address on Goerli: 0xDBa03676a2fBb6711CB652beF5B7416A53c1421D
8
​
9
contract BuyMeACoffee {
10
    // Event to emit when a Memo is created.
11
    event NewMemo(
12
        address indexed from,
13
        uint256 timestamp,
14
        string name,
15
        string message
16
    );
17
    
18
    // Memo struct.
19
    struct Memo {
20
        address from;
21
        uint256 timestamp;
22
        string name;
23
        string message;
24
    }
25
    
26
    // Address of contract deployer. Marked payable so that
27
    // we can withdraw to this address later.
28
    address payable owner;
29
​
30
    // List of all memos received from coffee purchases.
31
    Memo[] memos;
32
​
33
    constructor() {
34
        // Store the address of the deployer as a payable address.
35
        // When we withdraw funds, we'll withdraw here.
36
        owner = payable(msg.sender);
37
    }
38
​
39
    /**
40
     * @dev fetches all stored memos
41
     */
42
    function getMemos() public view returns (Memo[] memory) {
43
        return memos;
44
    }
45
​
46
    /**
47
     * @dev buy a coffee for owner (sends an ETH tip and leaves a memo)
48
     * @param _name name of the coffee purchaser
49
     * @param _message a nice message from the purchaser
50
     */
51
    function buyCoffee(string memory _name, string memory _message) public payable {
52
        // Must accept more than 0 ETH for a coffee.
53
        require(msg.value > 0, "can't buy coffee for free!");
54
​
55
        // Add the memo to storage!
56
        memos.push(Memo(
57
            msg.sender,
58
            block.timestamp,
59
            _name,
60
            _message
61
        ));
62
​
63
        // Emit a NewMemo event with details about the memo.
64
        emit NewMemo(
65
            msg.sender,
66
            block.timestamp,
67
            _name,
68
            _message
69
        );
70
    }
71
​
72
    /**
73
     * @dev send the entire balance stored in this contract to the owner
74
     */
75
    function withdrawTips() public {
76
        require(owner.send(address(this).balance));
77
    }
78
}
Copied!
Take some time to read through the contract comments and see if you can gather what's going on!
I'll list the highlights here:
When we deploy the contract, the constructor saves the address of the wallet that was responsible for deploying inside an owner variable as a payable address. This is useful for later when we want to withdraw any tips collected by the contract.
The buyCoffee function is the most important function on the contract. It accepts two strings, a _name, and a _message, and it also accepts ether due to the payable modifier. It uses the _name and _message inputs to create a Memo struct that is stored on the blockchain.
When visitors call the buyCoffee function, they must submit some ether due to the require(msg.value > 0) statement. The ether is then held on the contract balance until it is withdrawn.
The memos array holds all of the Memo structs generated from coffee purchases.
NewMemo log events are emitted every time a coffee is purchased. This allows us to listen for new coffee purchases from our frontend website.
withdrawTips is a function that anyone can call, but will only ever send money to the original deployer of the contract.
address(this).balance fetches the ether stored on the contract
owner.send(...) is the syntax for creating a send transaction with ether
the require(...) statement that wraps everything is there to ensure that if there are any issues, the transaction is reverted and nothing is lost
that's how we get require(owner.send(address(this).balance))
Armed with this smart contract code, we can now write a script to test our logic!
Create a buy-coffee.js script to test your contract
Under the scripts folder, there should be a sample script already populated sample-script.js. Let's rename that file to buy-coffee.js and paste in the following code:
1
// scripts/buy-coffee.js
2
​
3
const hre = require("hardhat");
4
​
5
// Returns the Ether balance of a given address.
6
async function getBalance(address) {
7
  const balanceBigInt = await hre.waffle.provider.getBalance(address);
8
  return hre.ethers.utils.formatEther(balanceBigInt);
9
}
10
​
11
// Logs the Ether balances for a list of addresses.
12
async function printBalances(addresses) {
13
  let idx = 0;
14
  for (const address of addresses) {
15
    console.log(`Address ${idx} balance: `, await getBalance(address));
16
    idx ++;
17
  }
18
}
19
​
20
// Logs the memos stored on-chain from coffee purchases.
21
async function printMemos(memos) {
22
  for (const memo of memos) {
23
    const timestamp = memo.timestamp;
24
    const tipper = memo.name;
25
    const tipperAddress = memo.from;
26
    const message = memo.message;
27
    console.log(`At ${timestamp}, ${tipper} (${tipperAddress}) said: "${message}"`);
28
  }
29
}
30
​
31
async function main() {
32
  // Get the example accounts we'll be working with.
33
  const [owner, tipper, tipper2, tipper3] = await hre.ethers.getSigners();
34
​
35
  // We get the contract to deploy.
36
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
37
  const buyMeACoffee = await BuyMeACoffee.deploy();
38
​
39
  // Deploy the contract.
40
  await buyMeACoffee.deployed();
41
  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);
42
​
43
  // Check balances before the coffee purchase.
44
  const addresses = [owner.address, tipper.address, buyMeACoffee.address];
45
  console.log("== start ==");
46
  await printBalances(addresses);
47
​
48
  // Buy the owner a few coffees.
49
  const tip = {value: hre.ethers.utils.parseEther("1")};
50
  await buyMeACoffee.connect(tipper).buyCoffee("Carolina", "You're the best!", tip);
51
  await buyMeACoffee.connect(tipper2).buyCoffee("Vitto", "Amazing teacher", tip);
52
  await buyMeACoffee.connect(tipper3).buyCoffee("Kay", "I love my Proof of Knowledge", tip);
53
​
54
  // Check balances after the coffee purchase.
55
  console.log("== bought coffee ==");
56
  await printBalances(addresses);
57
​
58
  // Withdraw.
59
  await buyMeACoffee.connect(owner).withdrawTips();
60
​
61
  // Check balances after withdrawal.
62
  console.log("== withdrawTips ==");
63
  await printBalances(addresses);
64
​
65
  // Check out the memos.
66
  console.log("== memos ==");
67
  const memos = await buyMeACoffee.getMemos();
68
  printMemos(memos);
69
}
70
​
71
// We recommend this pattern to be able to use async/await everywhere
72
// and properly handle errors.
73
main()
74
  .then(() => process.exit(0))
75
  .catch((error) => {
76
    console.error(error);
77
    process.exit(1);
78
  });
79
​
Copied!
At this point, your project directory should look something like this:
renamed scripts/sample-script.js to scripts/buy-coffee.js and pasted in the example code
Feel free to take a few moments to read through the script code. There are some utility functions defined at the top for convenience to do things like getting wallet balances and printing them out.
The main logic of the script is inside the main() function. The commented code shows the flow of the script:
1.Get the example accounts we'll be working with.
2.We get the contract to deploy.
3.Deploy the contract.
4.Check balances before the coffee purchase.
5.Buy the owner a few coffees.
6.Check balances after the coffee purchase.
7.Withdraw.
8.Check balances after withdrawal.
9.Check out the memos.
This script tests out all the functions we implemented in our smart contract! That's awesome.
You may also notice that we are making interesting calls like:
hre.waffle.provider.getBalance
hre.ethers.getContractFactory
hre.ethers.utils.parseEther
etc.
These lines of code are where we take advantage of the Hardhat (hre) development environment along with the Ethers and Waffle SDK plug-ins to access functionality that allows to read blockchain wallet account balances, deploy contracts, and format Ether cryptocurrency values.
We won't go too in-depth about that code in this tutorial, but you can learn more about them by looking up the Hardhat and Ethers.js documentation.
Enough talking. Now for the fun, let's run the script:
1
npx hardhat run scripts/buy-coffee.js
Copied!
You should see output in your terminal like this:
1
[email protected] BuyMeACoffee-contracts % npx hardhat run scripts/buy-coffee.js
2
Compiled 1 Solidity file successfully
3
BuyMeACoffee deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
4
== start ==
5
Address 0 balance:  9999.99877086625
6
Address 1 balance:  10000.0
7
Address 2 balance:  0.0
8
== bought coffee ==
9
Address 0 balance:  9999.99877086625
10
Address 1 balance:  9998.999752902808629985
11
Address 2 balance:  3.0
12
== withdrawTips ==
13
Address 0 balance:  10002.998724967892122376
14
Address 1 balance:  9998.999752902808629985
15
Address 2 balance:  0.0
16
== memos ==
17
At 1652033688, Carolina (0x70997970C51812dc3A010C7d01b50e0d17dc79C8) said: "You're the best!"
18
At 1652033689, Vitto (0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC) said: "Amazing teacher"
19
At 1652033690, Kay (0x90F79bf6EB2c4f870365E785982E1f101E93b906) said: "I love my Proof of Knowledge"
Copied!
At the start of the script (right after contract deploy), note that the 0 address has 9999.99877086625 ETH. This is because it started with 10k ETH as one of the pre-populated hardhat addresses, but it had to spend a tiny amount to deploy to the local blockchain.
In the second step == bought coffee ==, Address 1 purchases one coffee. Two other wallets that are not shown ALSO purchase coffees. In total, 3 coffees were purchased for a total tip amount of 3.0 ETH. You can see that Address 2 (which represents the contract address), is holding on to 3.0 ETH.
After the withdrawTips() function is called in == withdrawTips ==, the contract goes back down to 0 ETH, and the original deployer, aka Address 0, has now earned some money and is sitting on 10002.998724967892122376 ETH.
Are we having fun yet?!?! Can you imagine the tips you're about to earn?? I can.
Now let's implement an isolated deploy script to keep the real deployment simple and also get ready to deploy to the Goerli test network!
Deploy your BuyMeACoffe.sol smart contract to the Ethereum Goerli testnet using Alchemy and MetaMask
Let's create a new file scripts/deploy.js that will be super simple, just for deploying our contract to any network we choose later (we'll choose Goerli later if you haven't noticed).
The deploy.js file should look like this:
1
// scripts/deploy.js
2
​
3
const hre = require("hardhat");
4
​
5
async function main() {
6
  // We get the contract to deploy.
7
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
8
  const buyMeACoffee = await BuyMeACoffee.deploy();
9
​
10
  await buyMeACoffee.deployed();
11
​
12
  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);
13
}
14
​
15
// We recommend this pattern to be able to use async/await everywhere
16
// and properly handle errors.
17
main()
18
  .then(() => process.exit(0))
19
  .catch((error) => {
20
    console.error(error);
21
    process.exit(1);
22
  });
Copied!
To review the project structure, we now have one smart contract and two hardhat scripts:
Now with this deploy.js script coded and saved, if you run the following command:
1
npx hardhat run scripts/deploy.js
Copied!
You'll see one single line printed out:
1
BuyMeACoffee deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
Copied!
What's interesting is that if you run it over and over again, you'll see the same exact deploy address every time:
1
[email protected] BuyMeACoffee-contracts % npx hardhat run scripts/deploy.js
2
BuyMeACoffee deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
3
[email protected] BuyMeACoffee-contracts % npx hardhat run scripts/deploy.js
4
BuyMeACoffee deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
5
[email protected] BuyMeACoffee-contracts % npx hardhat run scripts/deploy.js
6
BuyMeACoffee deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
Copied!
Why is that? That's because when you run the script, the default network that the Hardhat tool uses is a local development network, right on your computer. It's fast and deterministic, and great for some quick sanity checking. 
However, in order to actually deploy to a test network that is running over the internet with nodes all around the world, we need to change our Hardhat config file to give ourselves the option.
This is where the hardhat.config.json file comes in.
A quick word of caution before we dive in:
CONFIGURATIONS ARE HARD!
KEEP YOUR SECRETS SAFE!
There are all kinds of little details that can go wrong, and things change all the time. The most dangerous thing are the secret values, for example your MetaMask private key and your Alchemy URL.
If something isn't working for you, check the Ethereum StackExchange, Alchemy Discord, or Google your errors.
And don't. ever. share. your. secrets! Your keys, your coins!
When you open your hardhat.config.js file, you will see some sample deploy code. Delete that and paste this version in:
1
// hardhat.config.js
2
​
3
require("@nomiclabs/hardhat-ethers");
4
require("@nomiclabs/hardhat-waffle");
5
require("dotenv").config()
6
​
7
// You need to export an object to set up your config
8
// Go to https://hardhat.org/config/ to learn more
9
​
10
const GOERLI_URL = process.env.GOERLI_URL;
11
const PRIVATE_KEY = process.env.PRIVATE_KEY;
12
​
13
/**
14
 * @type import('hardhat/config').HardhatUserConfig
15
 */
16
module.exports = {
17
  solidity: "0.8.4",
18
  networks: {
19
    goerli: {
20
      url: GOERLI_URL,
21
      accounts: [PRIVATE_KEY]
22
    }
23
  }
24
};
Copied!
A couple of things going on here:
By importing hardhat-ethers, hardhat-waffle, and dotenv at the top of the configuration file, our entire Hardhat project will have access to those dependencies.
I know we haven't introduced dotenv yet, that's an important tool we'll talk about that in a bit.
process.env.GOERLI_URL and process.env.PRIVATE_KEY are how we can access environment variables to use in our config file while not exposing the secret values.
Inside the modules.exports, we are using solidity compiler version 0.8.4. Different compiler versions support different features and syntax sets, so it's important to match this version with the pragma declaration at the top of our BuyMeACoffee.sol smart contract.
If you go back to that file you can cross check the statement pragma solidity ^0.8.0;. In this case, even though the numbers don't match exactly, that's okay because the karat ^ symbol means that any version that's greater than or equal to 0.8.0 will work.
Also in the modules.exports, we define a networks setting that contains one test network configuration for goerli. 
Now before we can do our deployment, we need to make sure we get one last tool installed, the dotenv module. As its name implies, dotenv helps us connect a .env file to the rest of our project. Let's set it up.
Install dotenv:
1
npm install dotenv
Copied!
Create a .env file:
1
touch .env
Copied!
Populate the .env file with the variables that we need:
1
GOERLI_URL=https://eth-goerli.alchemyapi.io/v2/<your api key>
2
GOERLI_API_KEY=<your api key>
3
PRIVATE_KEY=<your metamask api key>
Copied!
You'll notice I haven't spilled any of my own secrets. Yup. Safety first. It's totally fine for you to put in that file though, as long as you also have a .gitignore that ensures you don't accidentally push the file to version control. Make sure that .env is listed in your .gitignore
1
node_modules
2
.env
3
coverage
4
coverage.json
5
typechain
6
​
7
#Hardhat files
8
cache
9
artifacts
Copied!
Also, in order to get what you need for environment variables, you can use the following resources:
GOERLI_URL - sign up for an account on Alchemy, create an Ethereum -> Goerli app, and use the HTTP URL
GOERLI_API_KEY - from your same Alchemy Ethereum Goerli app, you can get the last portion of the URL, and that will be your API KEY
PRIVATE_KEY - Follow these instructions from MetaMask to export your private key.
Now, with dotenv installed and your .env file populated, we are ALMOST ready to deploy to the Goerli testnet!
The last thing we need to do is to make sure you have some Goerli ETH. This is fake ether that allows you to practice doing things on the Goerli test network, which is kind of a practice zone for building Ethereum applications. That way you don't have to spend real money on Ethereum mainnet.
Go to https://www.goerlifaucet.com and sign in with your Alchemy account to get some free test ether. 
Now we can deploy!
Run the deploy script, this time adding a special flag to use the Goerli network:
1
npx hardhat run scripts/deploy.js --network goerli
Copied!
If you run into any errors here, for example Error HH8, then I highly recommend searching Google and Stack Overflow or Ethereum Stackexchange for solutions. It's common to run into those issues when something in your hardhat.config.js, .env, or your dotenv module isn't set up correctly.
If all goes well, you should be able to see your contract address logged to console after a few seconds:
1
BuyMeACoffee deployed to: 0xDBa03676a2fBb6711CB652beF5B7416A53c1421D
Copied!
🎉 Congrats! 🎉
You now have a contract deployed to the Goerli testnet. You can view it on the Goerli etherscan blockchain explorer by pasting in your address here: https://goerli.etherscan.io/​
Before we move on to the frontend website (dapp) portion of the tutorial, let's prepare one more script that we'll want to use later, the withdraw.js script.
Implement a withdraw script
Later on when we publish our website, we'll need a way to collect all the awesome tips that our friends and fans are leaving us. We can write another hardhat script to do just that!
Create a file at scripts/withdraw.js
1
// scripts/withdraw.js
2
​
3
const hre = require("hardhat");
4
const abi = require("../artifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json");
5
​
6
async function getBalance(provider, address) {
7
  const balanceBigInt = await provider.getBalance(address);
8
  return hre.ethers.utils.formatEther(balanceBigInt);
9
}
10
​
11
async function main() {
12
  // Get the contract that has been deployed to Goerli.
13
  const contractAddress="0xDBa03676a2fBb6711CB652beF5B7416A53c1421D";
14
  const contractABI = abi.abi;
15
​
16
  // Get the node connection and wallet connection.
17
  const provider = new hre.ethers.providers.AlchemyProvider("goerli", process.env.GOERLI_API_KEY);
18
​
19
  // Ensure that signer is the SAME address as the original contract deployer,
20
  // or else this script will fail with an error.
21
  const signer = new hre.ethers.Wallet(process.env.PRIVATE_KEY, provider);
22
​
23
  // Instantiate connected contract.
24
  const buyMeACoffee = new hre.ethers.Contract(contractAddress, contractABI, signer);
25
​
26
  // Check starting balances.
27
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
28
  const contractBalance = await getBalance(provider, buyMeACoffee.address);
29
  console.log("current balance of contract: ", await getBalance(provider, buyMeACoffee.address), "ETH");
30
​
31
  // Withdraw funds if there are funds to withdraw.
32
  if (contractBalance !== "0.0") {
33
    console.log("withdrawing funds..")
34
    const withdrawTxn = await buyMeACoffee.withdrawTips();
35
    await withdrawTxn.wait();
36
  } else {
37
    console.log("no funds to withdraw!");
38
  }
39
​
40
  // Check ending balance.
41
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
42
}
43
​
44
// We recommend this pattern to be able to use async/await everywhere
45
// and properly handle errors.
46
main()
47
  .then(() => process.exit(0))
48
  .catch((error) => {
49
    console.error(error);
50
    process.exit(1);
51
  });
52
​
Copied!
Your project structure should look like this:
Now we have 1 Contract, and 3 Hardhat scripts.
The most important part of this script is when we call the withdrawTips() function to pull money out from our contract balance and send it over to the owner's wallet:
1
  // Withdraw funds if there are funds to withdraw.
2
  if (contractBalance !== "0.0") {
3
    console.log("withdrawing funds..")
4
    const withdrawTxn = await buyMeACoffee.withdrawTips();
5
    await withdrawTxn.wait();
6
  }
Copied!
If there are no funds in the contract, we avoid attempting to withdraw so that we don't spend gas fees unnecessarily.
When you run the script, you'll see output like this:
1
[email protected] BuyMeACoffee-contracts % npx hardhat run scripts/withdraw.js
2
current balance of owner:  0.039608085986833815 ETH
3
current balance of contract:  0.001 ETH
4
withdrawing funds..
5
current balance of owner:  0.040562731986622163 ETH
Copied!
Note that we didn't add the --network goerli flag this time, and that's because our script hard-codes the network configuration directly inside the logic:
1
const provider = new hre.ethers.providers.AlchemyProvider(
2
    "goerli",
3
    process.env.GOERLI_API_KEY
4
);
Copied!
Great, now we have a way to rescue the contract's tips!
Let's move onto the dapp part of this project so that we can share our tipping page with all our friends :)
Build the frontend Buy Me A Coffee website dapp with Replit and Ethers.js
For this website portion, in order to keep things simple and clean, we are going to use an amazing tool for spinning up demo projects quickly, called Replit IDE.
Visit my example project here, and fork it to create your own copy to modify: https://replit.com/@thatguyintech/BuyMeACoffee-Solidity-DeFi-Tipping-app​
Click "Fork repl" in the top right to make your own copy and follow along!
After forking the repl, you should be taken to an IDE page where you can:
See the code of a Next.js web application
Get access to a console, a terminal shell, and a preview of the README.md file
View a hot-reloading version of your dapp
It should look like this:
This part of the tutorial will be quick and fun -- we're going to update a couple of variables so that it's connected to the smart contract we deployed in the earlier parts of the project and so that it shows your own name on the website!
Let's get everything hooked up and working first, and then I'll explain to you what's going on in each part.
Here are the changes we need to make:
1.Update the contractAddress in pages/index.js
2.Update the name strings to be your own name in pages/index.js
3.Ensure that the contract ABI matches your contract in utils/BuyMeACoffee.json
Update contractAddress in pages/index.js
You can see that the contractAddress variable is already populated with an address. This is an example contract that I deployed, which you're welcome to use, but if you do... all the tips sent to your website will go to my address :)
You can fix this by pasting in your address from when we deployed the BuyMeACoffee.sol smart contract earlier.
Change the contractAddress to point to your BuyMeACoffee.sol contract deployed on Goerli
Update name strings to be your own name in pages/index.js
Right now the site has my name all over it. Find all the places that use Albert and replace it with your name / anon profile / ENS domain, or whatever it is you'd like for people to call you.
You can do a cmd + F or ctrl + F to look for all instances of Albert to replace.
Change the name text to your own name! I apologies for not putting these in a single variable.
Ensure that the contract ABI matches in utils/BuyMeACoffee.json
This is also a key thing to check especially when you make changes to your smart contract later on (after this tutorial).
The ABI is the application binary interface, which is just a fancy way of telling our frontend code what kinds of functions are available to call on the smart contract. The ABI is generated inside a json file when the smart contract is compiled. You can find it back in the smart contract folder at the path artifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json
Whenever you change your smart contract code and re-deploy, your ABI will change as well. Copy that over and paste it in the Replit file: utils/BuyMeACoffee.json
Now if the app isn't already running, you can go to the shell and use npm run dev to start a local server to test out your changes. The website should load in a few seconds:
The awesome thing about Replit is that once you have the website up, you can go back to your profile, find the Replit project link, and send that to friends for them to visit your tipping page. 
Now let's take a tour through the website and the code. You can already see from the above screenshot that when you first visit the dapp, it will check if you have MetaMask installed and whether your wallet is connected to the site. The first time you visit, you will not be connected, so a button will appear asking you to Connect your wallet.
After you click Connect your wallet, a MetaMask window will pop up asking if you want to confirm the connection by signing a message. This message signing does not require any gas fees or costs.
Once the signature is complete, the website will acknowledge your connection and you will be able to see the coffee form, as well as any of the previous memos left behind by other visitors.
BOOM! That's it! That's the whole project. Take a second to pat yourself on the back and reflect on the journey you've been on ☺
​
To recap:
We used Hardhat and Ethers.js to code, test, and deploy a custom solidity smart contract.
We deployed the smart contract to the Goerli test network using Alchemy and MetaMask. 
We implemented a withdraw script to allow us to accept the fruits of our labor.
We connected a frontend website built with Next.js, React, and Replit to the smart contract by using Ethers.js to load the contract ABI.
That's a LOT! 
Challenges
Okay, now time for the best part. I'm going to leave you with some challenges to try on your own, to see if you fully understand what you've learned here! (For some guidance, watch the YouTube video here).
1.Allow your smart contract to update the withdrawal address.
2.Allow your smart contract to buyLargeCoffee for 0.003 ETH, and create a button on the frontend website that shows a "Buy Large Coffee for 0.003ETH" button.
Once you're done with your challenge, tweet about it by tagging @AlchemyPlatform on Twitter and using the hashtag #roadtoweb3 !
See you on the other side ❤
​
We are always looking to improve this learning journey, please share any feedback you have with us! https://alchemyapi.typeform.com/roadtofeedback​