# 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

```bash
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](https://nextjs.org/docs/api-reference/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:

```bash
npx create-next-app frontend
cd frontend
```

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

```bash
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:

```js
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:

```css
@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:

```bash
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:

```bash
npm init -y
```

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

```json
{
  "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:

```json
{
  "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:

```bash
 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-ko.docs.klaytn.foundation/content/dapp/tutorials/buy-me-a-coffee/1.-project-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.