First Blockchain project with Ethereum

Published in

Coinmonks

7 min readNov 25, 2021

The brief setup steps for the campaign project. The campaign application allow the manager(campaign owner) to create a campaign and let people to contribute money to the campaign they find interesting to be invest on. The campaign needs to have reach enough approvers and money in order for the manager to finalize the campaign.

I want to give all the credits to Stephen Grider, who is the instructor on Udemy course to build this project.

P.S. I will only explain on how to setup the project on editor, but I will not yet explain any solidity code inside it for this moment.

App Mockup

landing Page

Create a campaign page

Make a contribution

Only the manager or a campaign owner can create a request with address of the recipient.

I entered too much Ether, so I create a new request.

Approving a Request

You can only approve a request if you have donated to the campaign, so make sure that you have contributed to the campaign already, otherwise you’ll get an error.

Finalize a Request

Once a request has been finalized, the money will be send to the recipient.

Before anything else, install ganache, solidity extension on VScode and Metamask extension on chrome. Make sure you use the test network ex. Rinkeby Test Network

First, create a new project directory using command prompt: mkdir kickstart

Next change to that directory: cd kickstart

then hit a whole bunch of enter…

Now install packages: npm install ganache-cli mocha solc@.4.17 fs-extra web3

then open kickstart directory on VScode or your preferred IDE.

In the terminal run npm install web3 , npm install solc@0.4.17

In the Kickstart directory, create an Ethereum folder, create a compile.js and deploy.js file. Next create 2 more folders inside Ethereum folder, called build and contracts.

Inside contracts folder, create a file Campaign.sol

and paste a the contract code (if you have them), if not you can try a default code from remix editor.

We should only running the compile script only once and should be able to run our application as many time as we wish without having to run compile script ever again.

The output after we run a compile script, will be Campaign and CampaignFactory files inside build folder. Then anytime we want to access ab, we can read them inside build directory without recompiling our contract.

Open Ethereum folder in integrated terminal and run node compile.js , and wait for the output.

Test File Setup

create a test folder inside the root project directory. Next create a Campaign.test.js file, and edit package.json file on scripts section specify “mocha” for test.

“scripts”: {
“test”: “mocha”
}

Run npm run test

Deployment Process

Copy paste your deploy script to deploy.js file.

Install the module, Open terminal inside the kickstart directory and run

npm install @truffle/hdwallet-provider

Refactoring Deployment

Refactor the code for the deploy.js file, from

const { interface, bytecode } = require(‘./compile.js’);

change it to

const compiledFactory = require('./build/CampaignFactory.json');

inside the contract creation process, JSON.parse(interface) and deploy({data:bytecode})

update it to

const result = await new web3.eth.Contract(

JSON.parse(compiledFactory.interface))

.deploy({ data: compiledFactory.bytecode })

.send({ gas: ‘1000000’, from: accounts[0] });

console.log(‘Contract deployed to’, result.options.address);

run node deploy.js on terminal inside the Ethereum directory.

Once it deploy successfully, it will return

Attempting to deploy from account 0x7546..
Contract deployed to 0xb3b45..

Keep that address that contract deployed to and paste it somewhere else first, we will use it in the future.

Create React App vs. Next.js

create react app only build a simple react application doesn’t include anything for navigation, data, loading and many more features we would need.

Next.js is a framework for react build a bunch of functionalities around it. We need Nect.js for multi-page application, it also has built-in support for server side rendering and Hot module reload.

Setting up Next for our application

open terminal inside Kickstart directory and install modules,

npm install next react react-dom

Create a pages folder in root directory. Next specifically expect to see a folder called “pages”. If you called it anything else, it won’t work. Then create a file index.js → this page show lists all campaigns

Start up next.js and add entry script in package.json

“scripts”: {
“test”: “mocha” ,
“dev”: “next dev”
}

Inside those files, create an export one single react component.

import React from ‘react’;
export default () => {
return <h1>This is show page.</h1>;
};

To start a project and see if we can visit those pages. Execute this command in kickstart directory terminal npm run dev and visit localhost:3000

Create web3.js and factory.js files inside Ethereum folder.

web3.js

create a new instance of web3, a provider given by Metamask and we can access to that by

web3 = new Web3 (window.web3.currentProvider);

If users don’t have Metamask inside their browser, it will throw an error, so we have to specify to them then this application required Metamask.

import Web3 from “web3”;
let web3;
if (typeof window !== ‘undefined’ && typeof window.web3 !== ‘undefined’) {
//we are in the browser and if metamask is alreay injected in the web3 (user has metamask extension) → metamask is running.
web3 = new Web3 (window.web3.currentProvider);
} else {
//we are on the server *OR* the user is not running metamask
const provider = new Web3.providers.HttpProvider(
‘your infura link’
);
web3 = new Web3(provider);
}
export default web3;

factory.js

import web3 from ‘./web3’;
import CampaignFactory from ‘./build/CampaignFactory.json’; //compiled contract: abi
const instance = new web3.eth.Contract(
JSON.parse(CampaignFactory.interface),
‘the address that we have deployed the last time’
);
export default instance;

Now we have got the CampaignFactory instance we can use to retrieve a list of deployed campaigns and show lists inside react component.

Inside pages directory, rename newcampaign.js file to index.js.

Edit content to show this page to the user. Create components folder and create Layout.js and Header.js files. Because these layout and header things , we want it to appear on every pages of our application.

What Next.js doing for us ?

Next.js makes use of a processes called “ server side rendering ”.

Whenever someone accesses next to a server, the server is going to take our React application and instead send all JS to the browser, Next will render the entire React app itself. (all of JS code will be executed on the next server)

That server build up HTML doc, and send completely rendered HTML doc to the user especially if our users are on a mobile device. Eventually JS code is loaded up to the browser.

This approach makes users to see the content on the screen much, much more quickly than using create-react-app.

the error will appear if we don’t specify window object for next.js to render.

Nested Routing

Create a new folder and new component inside it.

Navigation with Next.js

After the user make a campaign. A user should be able to automatically redirect back to the root of our application and see a list of all the campaigns including their new campaign has been created.

npm install next-routes — legacy-peer-deps

Customize what Next.js starts up to go to server.js first.

“scripts”: {
“test”: “mocha”,
“dev”: “node server.js”
}

Custom Routes with address ( token )

Redeploying CampaignFactory

This is what we might be doing many times, updating the contract, redeploying the contract with a new function to return all separate details about an individual campaign.

When you want to redeploy the contract, in Ethereum folder, run node compile.js

then node deploy.js

to get new contract address of new version and make sure you update this new address contract to code editor in factory.js.

This is only an overview on how to set up a project using React and Next.js to display on web app. So I can have basic idea on how it works but didn’t go in details about code inside it.

Join Coinmonks Telegram Channel and Youtube Channel learn about crypto trading and investing