Creating my First Project in the Blockchain Space

This is the first time in a while where I’ve actually been insanely psyched about something.

I don’t know if you guys realize, but we might be witnessing a breakthrough in tech that’s almost bigger than the internet. Just that specific thought is what motivates me to learn more about it…

The blockchain.

We’re all aware that every time someone gives money, they’re opening a transaction. In the blockchain, a ‘hash’ is formed every time it happens. A hash is a secret code that only you can remember if you mix a few other codes you’ve always known. The blockchain is a method of sending money that does not require the use of other centralized banking networks.

It keeps data in an unalterable and transparent manner. Because it’s transparent, attempting to edit data is practically impossible because others on the network will be able to see any modifications made.

I’ve written a more in-depth article on this that you can check out here. It covers:

• Cryptocurrencies 101
• The Blockchain
• Transactions, Blocks, etc.
• Centralized vs Decentralized Systems (How it Works)
• Web3
• Decentralized Autonomous Organizations (DAOs)

You could start to visualize how this emerging tech can be implemented in the real world, though something really exciting I’ve been looking into is Web3.

Web3

I found that the easiest way to grasp this new innovation was to understand the history of the internet:

Web 1.0: Web 1.0 features static websites where data and content are served through the websites’ file system. In other words, these pages have little to no backend systems which almost every website today has. Most sites in the Web 1.0 era were personal websites/portfolios.

Web 2.0: For the past decade we’ve been in the Web 2.0 era where popular websites like Facebook, Twitter, and YouTube take place. These types of sites feature dynamic content, developed APIs that were utilized, more secure data storage systems, and they also allow users to retrieve, and input data within the site.

Web 3.0: Web 3.0 is the next evolution of the internet where websites are governed by blockchain technology. Web3 allows you to manipulate and interact with a blockchain node remotely or locally. Instead of using a centralized server like mainframes, this uses peer-to-peer decentralized networks. Instead of using an HTML API, these use smart contracts, which are self-executing applications deployed on the blockchain.

Smart Contracts

These are simply just programs that are executed on the blockchain- but these smart contracts only run when predetermined conditions are met. These programs self-execute with terms between the buyer and seller directly addressed through code. Smart contracts are programmed on a special, but pretty straight-forward language called Solidity.

I know that in this field, there’s a LONG journey ahead of me… I realized I needed to start somewhere. I needed to create my own smart contract and deploy it on the blockchain. This is one small step to launching my own DAO that can potentially solve a problem in the world currently.

…So I decided to build a simple Web3 community marketplace that allows people to deploy products, buy, and sell them all through a smart contract.

Coinbase

The Marketplace

The marketplace utilizes smart contracts on top of the Ethereum blockchain. It essentially contains a variety of data to work with.

• Requests
• Details of products
• Buying
• Adding product to the smart contract

Like I mentioned before, if we were to develop smart contracts for the marketplace, we would use Solidity for the programming language. It’s pretty similar to JavaScript which makes it easy for myself to get acquainted with it.

The thing is, in order to actually compile, deploy, and test our Solidity smart contracts, we need to use a blockchain test network so that we don’t really have to spend real coins just to build this app.

The Truffle Framework

I used the Truffle development framework- it’s incredibly easy to use, and smart contracts can be compiled using simple terminal commands. The framework also provides live blockchain test networks which can be used for deploying them.

How it works: The framework requires an Ethereum Virtual Machine (EVM) for the testing purposes. It pretty much acts as the virtual machine that holds Ethereum’s entire operating structure. Since it’s technically a decentralized computer, it can execute millions upon millions of projects and tasks.

Installing this is really easy through the Node Package Manager:

$ npm install -g truffle@5.0.5

Ganache

For testing purposes, I used Ganache, which is a personal Ethereum blockchain created by Truffle. The process of examining transactions, wallet addresses and tests require such little effort which is why it makes it easy for us to observe this whole process. Let’s take a look at this UI:

Now there’s a ton of stuff going on here, so let me break it down…

All of those long pieces of code starting with ‘0x’ are Ethereum addresses. These hold the actual balance of cryptocurrencies inside of them. Obviously I don’t really have 100 ETH in each of them to freely use (although that would be pretty cool), because this is mainly just for testing. I can combine the use of Ganache and MetaMask (a crypto wallet), to use in our Chrome browsers.

Just because of it’s user-friendly UI, I could view recently created blocks, transactions, and even check if my smart contract is deployed or not, all within a click. This will become useful later on while developing the actual web-application.

Let’s break it the app down even further and take a look at the code.

Development

Every Solidity app is initialized like this:

pragma solidity ^0.5.0;

Almost every single programming language requires you to initialize and declare their version, whether its through the code itself, installation, and even a terminal command. For Solidity though, it’s usually the first line of a .sol file.

In this app, a ton of variables need to be initiated specifically through structs.

Structs are used to represent a record. In other programming languages, you may refer to this as arrays or dictionaries, because it holds values and datatypes specific to one record. To make this easier to understand, suppose you’d like to keep track of basketball players. The following attributes would be some you may want to track:

• Name
• Height
• Team
• Position

I created a struct for Product, but then two events. These are similar to struct- it essentially tells the blockchain when and how things are being updated.

uint id,
string name,
uint price,
address payable owner,
bool purchased

These are all datatypes and the names of the variables.

• ‘uint’ represents an integer
• ‘string’ represents text
• ‘address’ represents a cryptocurrency address belonging to the owner
• ‘bool’ represents True and False operators.

Towards the top, you can see a keyword called ‘public’. This is vital because then we could use these variables outside of the contract. Now to the actual functionality of the application.

This specific function allows the backend to create products to display on the app. For obvious reasons, it needs to pass in the name, the id, and the price of the product.

Let me explain this:

• We need to create our own requirements that needs to be met before this function actually proceeds. Here we’re checking if the name is present, and the price isn’t just 0.
• Next we’re creating a new product id by incrementing the product count.
• Now we can finally create our new product by passing in the msg.sender address.
• The most important part here is the ‘emit’. We need to trigger those events that we created early so that the blockchain knows that this product is created in the first place.

This process was replicated and modified so that we can purchase products:

With all of the backend out of the way. We use Javascript to handle these operations and ensure that they are being brought and operated in the frontend. Let’s look at how we’re displaying all of this information:

This is pretty much everything that the user sees in terms of functionality on the application. Using curly braces {}, we can provide data from our Solidity and Javascript code into HTML itself. For example:

<td>{product.name}</td>

This would create a table cell that holds the value of the product name inside of it. Next we have the price. If you guys didn’t know already, even Ethereum has different names that specify the units of the currency. Here are some examples:

• Wei — 1 Wei
• Kwei — 1,000 Wei
• Gwei — 1,000,000,000 Wei
• Microether — 1,000,000,000,000 Wei
• Ether — 1,000,000,000,000,000,000 Wei

These numbers are massive. That’s why instead of constantly inputing these numbers into the code, the Web3 package provides us with a converter. By using the following line of code, we can convert Wei, which is the default unit, to Ether:

{window.web3.utils.fromWei(product.price.toString(), 'Ether')}

Now next we see a <button> tag that triggers the event of purchasing the product when it’s clicked.

Functionality

This is the basic frontend of the program; After inputing a product name and a price in Ether, you can add a product to a community marketplace list in which a buyer account can purchase products.

I programmed it so that once the ‘Buy’ button is clicked, the button disappears to ensure that no more than one transaction has been made for each purchase.

A full video + demo can be found here. I’m super grateful of Dapp University which provided an excellent guide to help me complete this project and helping jumpstart this journey!

This app is only the beginning of a massive, but exciting journey. I’ll continue to grow my connections in this field, build more projects that interest me, produce more content on this topic, and more.

My main goal here is to potentially launch a blockchain-based solution to an impactful problem in this world.

If you’d like to check out the full code to this project, you can checkout my Github repository found here.