1. Project Setup

In this section, we will initialize our project folder. This folder will contain two separate folders:

1. frontend folder - which contains the code for the frontend implementation of our dApp

2. smart-contract folder - which contains the smart contract code for our BMC dApp.

To create our project folder, paste this code in your terminal

mkdir BuyMeACoffee
cd BuyMeACoffee

1.1. Frontend folder

This folder contains the tools to build our project frontend website. For the sake of this guide, we will be using Next's create-next-app utility to bootstrap our Next.js and Tailwind CSS project. Follow the steps below to install the necessary dependencies and get our frontend folder created:

Step 1 - Creating a frontend folder

Paste the code below in your BuyMeACoffee folder to create a frontend folder using create-next-app utility:

npx create-next-app frontend
cd frontend

Step 2 - Downloading the Tailwind dependencies and setting up its config

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3 - Modifying tailwind.config.js

Navigate to the tailwind.config.js file and replace with the code below:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4 - Replacing the code in styles/global.css

Navigate to the styles/global.css file and replace with the code below:

@tailwind base;
@tailwind components;
@tailwind utilities;

We have successfully set up our frontend project folder. More will be discussed later on. The next step is to set up the smart contract folder.

1.2. Smart Contract Folder

This folder contains the smart contract for our BuyMeACoffee functionality. Follow the steps below to install the necessary dependencies and get our smart contract folder created:

Step 1 - Creating the smart contract folder

To create this folder, navigate to the project directory: BuyMeACoffee and create a smart-contract folder by running the command below:

cd ..
mkdir smart-contract
cd smart-contract

Step 2 - Generating a hardhat project template

This template is suitable for writing, testing and deploying smart contracts. Firstly, start a new npm project by running the code below in your terminal:

npm init -y

This should create a package.json file for you that looks like this:

{
  "name": "buymeacoffee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Then, install hardhat and other dependencies such as hardhat-toolbox and dotenv. To do so, replace your package.json file with the code below:

{
  "name": "buymeacoffee",
  "devDependencies": {
    "@nomicfoundation/hardhat-toolbox": "^2.0.2",
    "hardhat": "^2.14.0"
  },
  "dependencies": {
    "dotenv": "^16.0.3"
  }
}

Finally, run npm install in your terminal.

After successfully installing all the dependencies(hardhat, hardhat-toolbox, dotenv), you can confirm hardhat installation by:

a. Checking the current version:

 npx hardhat --version 

Your console should print out the current version installed which in our case is 2.14.0.

b. Viewing your project directory. Your current directory should include:

• contracts/ – this is the folder containing the smart contract.

• scripts/ – this folder contains code that deploys your contracts on the blockchain network

• test/ – this folder contains all unit tests that test your smart contract

• hardhat.config.ts – this file contains configurations important for the work of Hardhat and the deployment of smart contracts.