# Build a Mini Buymeacoffee dApp Using Solidity + Ethereum Smart Contract + ReactJs + TailwindCSS

Blockchain is typically one of the highest-paying programming industries, with developers earning between $150,000 and $175,000 per year on average as salaried employees. Sound interesting, right?

To learn more about a developer roadmap and how to get started, [Check here](https://blog.idrisolubisi.com/web-3-a-developer-roadmap-and-resources-to-get-started).

In this article, we will Build a Mini Buymeacoffee dAPP Using Solidity, Ethereum Smart Contract, ReactJs, and tailwind CSS. It'll be a platform where anyone on the internet can learn a little about us and send us money to purchase coffee + a note, with the information being kept on the blockchain via an Ethereum smart contract. (A smart contract is essentially code that stays on the blockchain and can be read and written from; we'll go over this in more detail later.)

We'll create the smart contract and deploy it. We will also build a website that will allow people to connect their wallets and engage with our smart contract.


Here is a link to the [Live Demo](https://buymeacoffee.vercel.app/) and the GitHub Repositories 👉 [Frontend](https://github.com/Olanetsoft/buymeacoffee-fe) and [Backend/Smart Crontract](https://github.com/Olanetsoft/buymeacoffee-be)


## Prerequisite

- Let us ensure we have Node/NPM installed on our PC. If you don't have it, head over [here](https://hardhat.org/tutorial/setting-up-the-environment.html) to for a guide


## Project Setup and Installation

Next, let's head over to the terminal. We'll need to `cd` into the directory we wish to work with and then run the following commands:

```
mkdir mini-buymeacoffee-be
cd mini-buymeacoffee-be
npm init -y
npm install --save-dev hardhat
```

Now, we should have a hardhat. Let's get a sample project going by running the command below:

```
npx hardhat
```

We'll go with the option of creating a sample project. Accept all requests.
Installing hardhat-waffle and hardhat-ethers is required for the sample project. These are some of the other things we'll be using later:).

Just in case it didn't do it automatically, we will install these other requirements.

```
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
```

To make sure everything is working, run:

```
npx hardhat test
```

We will see a passed test result in our console.

It is now possible for us to Delete `sample-test.js` from the test folder. Delete `sample-script.js` from the scripts directory as well. After that, go to contracts and delete `Greeter.sol`. 

>The folders themselves should not be deleted!

Next, under the contracts directory, we'll create a file called CoffeePortal.sol. When using Hardhat, file layout is really crucial, so pay attention!
We're going to start with the basic structure of every contract.

```
// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract CoffeePortal {

    constructor() payable {
        console.log("Yo! Smart Contract");
    }
}

```

To build and deploy our smart contract, navigate to the `scripts` folder, create a new file called `run.js,` and update it with the following code snippet:

```
const main = async () => {

// This will actually compile our contract and generate the necessary files we need to work with our contract under the artifacts directory.
  const coffeeContractFactory = await hre.ethers.getContractFactory('CoffeePortal');
  const coffeeContract = await coffeeContractFactory.deploy();

  await coffeeContract.deployed(); // We'll wait until our contract is officially deployed to our local blockchain! Our constructor runs when we actually deploy.

 console.log("Coffee Contract deployed to:", coffeeContract.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();
```
Let's run it!

```
npx hardhat run scripts/run.js
```

You should see something similar to what we have below:

![hardhat compilation result](https://cdn.hashnode.com/res/hashnode/image/upload/v1638189667475/M60gQS37I.png)

We have a working smart contract 🥳 Let us deploy it to a network by making it available to everyone worldwide.

Under the `scripts` folder, create a file called `deploy.js`. Here's the code for it. It looks super similar to run.js.

```
const main = async () => {
  const [deployer] = await hre.ethers.getSigners();
  const accountBalance = await deployer.getBalance();

  console.log("Deploying contracts with account: ", deployer.address);
  console.log("Account balance: ", accountBalance.toString());

  const Token = await hre.ethers.getContractFactory("CoffeePortal");
  const portal = await Token.deploy();
  await portal.deployed();

  console.log("CoffeePortal address: ", portal.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
};

runMain();

```

Now the command below we're going to deploy locally using the localhost network for test:

```
npx hardhat run scripts/deploy.js --network localhost
```

We should have something similar to what we have below:

![Rinkeby Network](https://cdn.hashnode.com/res/hashnode/image/upload/v1638190358448/Us0z6ba0U.png)

## Building and Deploying CoffeeContract to Blockchain

Everything is now in place, including the test script and the 'deploy.js' file. With the following code snippet, we'll update the Smart Contract, run.js, and deploy.js files:

`contracts/CoffeePortal.sol`

%[https://gist.github.com/Olanetsoft/a9105c734228f9e15965ef8a36ab825c]

Update `scripts/run.js`

%[https://gist.github.com/Olanetsoft/f8ea2716f18a6f9bb7e1fe1fb62b13fe]


Update `scripts/deploy.js`

%[https://gist.github.com/Olanetsoft/5c9d3e8275fcde262dfe17a0508858ae]

Now it's time to get down to business, deploying to the real blockchain.

We'll need to sign up for an [Alchemy account](https://alchemy.com/?r=37c4f8545ef30da7) before we can deploy to the blockchain.

Alchemy basically allows us to broadcast our contract creation transaction so that miners can pick it up as soon as possible. The transaction is then broadcasted to the blockchain as a legitimate transaction once it has been mined. After that, everyone's copy of the blockchain is updated.

We'll create an app as shown below after signing up. Remember to change the network selection to Rinkeby because that's where we'll be deploying.

We switched it from mainnet to Rinkeby for a reason. Because it's real money, and it's not worth squandering! We'll start with a "testnet," which is a clone of "mainnet" but utilizes fictitious money so we can experiment as much as we like. However, it's crucial to note that testnets are operated by genuine miners and are designed to simulate real-world conditions.

![Alchemy App](https://cdn.hashnode.com/res/hashnode/image/upload/v1638229612454/rkzNZJkqe.png)

Afterward, we will need to grab our keys as shown below, and store them for later use:

![Alchemy keys](https://cdn.hashnode.com/res/hashnode/image/upload/v1638230176052/6u192pmH3.png)

We'll need some fake ETH in our testnet account, and we'll have to request some from the network. This fake ETH can only be used on this testnet. Rinkeby can get some phony ETH by using a faucet.

| Name | Link	| Amount	| Time |
| ----- | ----------------------- | ----- | ---- | ----|
| MyCrypto | https://app.mycrypto.com/faucet	| 0.01	| None |
| Buildspace | https://buildspace-faucet.vercel.app/ | 0.025 | 1d |
| Ethily | https://ethily.io/rinkeby-faucet/ | 0.2 | 1w |
| Official Rinkeby | https://faucet.rinkeby.io/ |3 / 7.5 / 18.75 |8h / 1d / 3d |

Table by [Buildspace](https://buildspace.so)

Our hardhat.config.js file needs to be updated. This can be found in the smart contract project's root directory.

```

require("@nomiclabs/hardhat-waffle");
require("dotenv").config();

// This is a sample Hardhat task. To learn how to create your own go to
// https://hardhat.org/guides/create-task.html
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(account.address);
  }
});

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.4",
  networks: {
    rinkeby: {
      url: process.env.STAGING_ALCHEMY_KEY,
      accounts: [process.env.PRIVATE_KEY],
    },
  },
};
```

 If we look at the code snippet above, we can see that some keys were read from the `.env` file, as well as the import at the top of `require("dotenv").config()`, which implies we'll need to install the dotenv package and also create a `.env` file using the command below:

```
npm install -D dotenv

touch .env
```

Inside the .env file, add the following keys:

```
STAGING_ALCHEMY_KEY= // Add the key we copied from the Alchemy dashboard here
PRIVATE_KEY= // Add your account private key here
```

To get our account private key is easy, check out this [post](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key).

Now we can run the command to deploy our contract to a real blockchain network

```
npx hardhat run scripts/deploy.js --network rinkeby
```

Here's what our output should look like:

![Rinkeby Output](https://cdn.hashnode.com/res/hashnode/image/upload/v1638231542632/8XWvfuQLM.png)

Yay 🥳 we just deployed our contract.

## Set up Frontend React Client

It's time to get our website up and running! Our smart contract is completed, but we need to figure out how our front end can interact with it as soon as possible!

To create a new project, we use the `npx create-next-app -e with-tailwindcss` command to scaffold a new project in a directory of our choice.

This command creates a Next.js project with TailwindCSS set up. TailwindCSS is a utility-first CSS framework packed with classes to help us style our web page.

To install the dependencies, we use the commands:

```
cd <project name> 
npm install ethers react-toastify
```

Once the app is created and the dependencies are installed, we will see a message with instructions for navigating to our site and running it locally. We do this with the command.

```
npm run dev
```

Next.js will start a hot-reloading development environment accessible by default at `http://localhost:3000`

We need to connect our wallet to the blockchain in order for our website to communicate with it. Our website will have permission to call smart contracts on our behalf after we connect our wallet to our website. Remember, it's the same as logging into a website.

All of our work will be done in index.js, which can be found under `pages`.

%[https://gist.github.com/Olanetsoft/6c8270d4e174e0e3a43170c51e314ef3]

We need to import abi and update our contractAddress in the code sample above. Let's start by creating a folder named `utils`, then using the following command to create a file called `CoffeePortal.json` inside the `utils` folder.

```
mkdir utils
touch CoffeePortal.json
```

Following that, we'll need our contract address as well as the content that will be updated in the `CoffeePortal.json` file. What's the best way to get it? 

Let's go back to the smart contract project we worked on before, then navigate to `artifacts/contracts/coffeePortal.json` and copy the entire content inside it, as well as our contract address, which was displayed in our terminal when we deployed our contract to the blockchain.

We will update the `CoffeePortal.json` file with what we copied and also update index.js as shown below:

```
// ...

import Head from "next/head";

// Import abi
import abi from "../utils/CoffeePortal.json";

export default function Home() {
  /**
   * Create a variable here that holds the contract address after you deploy!
   */
  const contractAddress = "";  // Add contract address here

   // ...
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      [...]
    </div>
  );
}

```

Its time to test our app, we should have something similar to what we have below when we visit `http://localhost:3000`

![DApp landing page](https://cdn.hashnode.com/res/hashnode/image/upload/v1638234155936/Oa2fK6Yjk.png)

Next, clicking connect wallet button should redirect us to the MetaMask UI where we will grant the site access as shown below:

![MetaMask](https://cdn.hashnode.com/res/hashnode/image/upload/v1638234397266/dUjQPY6X1o.png)

![MetaMask Connecting](https://cdn.hashnode.com/res/hashnode/image/upload/v1638234407639/NcDP4cGoy.png)

Then our UI should look similar to what is shown below:

![Buy Me A Coffee - DApp](https://cdn.hashnode.com/res/hashnode/image/upload/v1638234464150/gbp-L6l4B.png)

We can now support, by buying a coffee worth $5 and also providing our name and any preferred message to the owner 😊


![Buy A Coffee](https://cdn.hashnode.com/res/hashnode/image/upload/v1638234934356/YCwD8GSlk.png)

Next,

![Connect MetaMask](https://cdn.hashnode.com/res/hashnode/image/upload/v1638234964158/-u-_9Q-zi.png)


![Minning](https://cdn.hashnode.com/res/hashnode/image/upload/v1638235016882/6TjHhS-5R.png)

Completed...


![Transaction Completed](https://cdn.hashnode.com/res/hashnode/image/upload/v1638235049991/1tN74rrlc.png)

Another coffee support:

![Blockchain Transaction](https://cdn.hashnode.com/res/hashnode/image/upload/v1638235139683/68GyVavYH.png)

If we observe, the page updates in real-time once a transaction is completed; this is the result of the event we introduced to our smart contract, and React, of course, effortlessly updates the UI.


## Conclusion

In this article, we learned how to build a mini buymeacoffee dAPP using solidity, ethereum smart contract, react, and tailwind CSS.

## References

- [Ethereum](https://ethereum.org/en/developers/docs/)
- [Fullstack Dapp](https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13) by @[Nader Dabit](@dabit3)
- [Cover Photo](https://unsplash.com/photos/jpsocjU9R7s)


I'd love to connect with you at [Twitter](https://twitter.com/olanetsoft) | [LinkedIn](https://www.linkedin.com/in/olubisi-idris-ayinde-05727b17a/) | [GitHub](https://github.com/Olanetsoft) | [Portfolio](https://idrisolubisi.com/)

See you in my next blog article. Take care!!!