Kickstarter Application with Next.js

In this project, we will utilize Next.js for the frontend due to its straightforward navigation capabilities within a multi-page application.

To start, create a project directory called “kickstarter” and execute the command provided.

npm init -y

Execute the commands below to install the necessary dependencies.

npm install solc@0.8.9 web3 mocha ganache @truffle/hdwallet-provider fs-extra

npm install next react react-dom semantic-ui-css semantic-ui-react

npm install next-routes --legacy-peer-deps

Update your scripts in the ‘package.json’ file.

{
  "name": "kickstarter",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "dev": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@truffle/hdwallet-provider": "^2.1.15",
    "fs-extra": "^11.2.0",
    "ganache": "^7.9.2",
    "mocha": "^10.4.0",
    "next": "^14.2.3",
    "next-routes": "^1.4.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.5",
    "solc": "^0.8.9",
    "web3": "^4.9.0"
  }
}

• Import the Source Code

Download the source code from the provided GitHub link and save it in your project directory.

https://github.com/oguzhanpeker/kickstarter.git

• Deploy the Contract on Sepolia Test Network

To create an API key for testing on the Sepolia network, log in or sign up at the Infura website (https://app.infura.io/) and follow the necessary steps.

To create a new API key, click on the ‘CREATE NEW API KEY’ button located on the homepage.

Choose the Ethereum Sepolia Network and copy the URL from the Infura API. Then, open the ‘deploy.js’ file in your project directory and input your API key along with your Metamask Mnemonic.

const provider = new HDWalletProvider(
  "YOUR_MNEMONIC",
  // remember to change this to your own phrase!
  "YOUR_INFURA_URL"
  // remember to change this to your own endpoint!
);

Open the ‘web3.js’ file located in your project directory and enter your API key.

const provider = new Web3.providers.HttpProvider(
    "https://sepolia.infura.io/"
  );

• Deploying the Contract

Open the terminal and execute the following command.

cd ethereum
node deploy.js

Once the deployment is complete, you will be provided with the contract address. Copy this address into the ‘factory.js’ file.

const instance = new web3.eth.Contract(
  CampaignFactory.abi,
  "0xF7165afe274F988B2210f25145864A32E504eaed"
);

• Running the Web Server

To start the web server, run the following command.

npm run dev

Open your web browser, where your Metamask wallet is installed and connect to localhost:3000.

• Creating Campaign

Click on the ‘Create Campaign’ button located on the main page.

Input the test amount of 200 wei and then click the ‘Create’ button. A Metamask wallet prompt will appear for confirmation.

Once the transaction is confirmed, the new campaign address will be displayed on the main page.

To view the campaign details, click on the ‘View Campaign’ button located on the main page.

On the campaign page, you have the option to contribute. Enter the amount of 0.0001 ether and press the ‘Contribute!’ button. Again, Metamask wallet prompt will appear for confirmation.

Following confirmation, the campaign balance will be updated to 0.0001.

• Creating Request

To create a request, select the ‘View Request’ button on the campaign page.

Enter the following details:

• Description: Test Request
• Value in Ether: 0.0001
• Recipient: A different Metamask account. (Create a new Metamask account separate from the initial account that created the campaign).

Once the request has been created, it will appear on the page along with its details.

To transfer ether to the recipient, request must be approved. Click the ‘Approve’ button and confirm the transaction in Metamask.

Note: Typically, more than 50% approval is required to initiate the transfer. However, for testing purposes, we are using only one account for both contribution and approval.

Once confirmed, the approval count will be 1 out of 1.

The final step is to complete the request by clicking the ‘Finalize’ button. Then, confirm the transaction in Metamask, and the requested amount will be transferred to the recipient (2nd account). You can verify on Metamask that the balance of the second account has increased by 0.0001 ether.