# 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.