Hack Butterfly

Table of Contents

• TL;DR
• Introduction
• Features
• Setup
• Feedback

TL:DR

Welcome to my very first dApp tutorial! Please find the presentation here, which is built specifically around this repo. The presentation was held in person, so the 'live-coding' section will only be included in the video for obvious reasons. If you're interested in the whole talk, you can find the YouTube video here.

Prerequisites

• Installed Metamask as a chrome plugin, hooked up an account, and have some Ropsten test money in it.
• Be somewhat familiar with the idea behind Ethereum, Smart Contracts, and dApps
• Have a basic understanding of programming
• Ideally have an understanding of Vue.js

Introduction

The Ethereum blockchain is a paradigm shift in transparency, trust, and true ownership. Inspired by the thoughts about a transparency standard that could be achieved through blockchain, I thought about how to achieve that on a small scale. Imagine a world where every university offers a transparent, always up to date, and immutable list of students and graduates. Instead of background-checking if a student really went to Stanford, one can simply call a function on a smart contract to receive the answer. 100% free and always accurat.

The online coding school Hack Butterfly is an MVP to model such an idea using Ethereum, Solidity, web3, and Vue.

This project and presentation were both created during my time as a student at Code Chrysalis in Tokyo. (Yes. Hack Butterfly is a pun, glad you caught it.)

You can check out the demo here! || Here's a link to the presentation slides again || Here's a link to the presentation video.

Features

These are the features of the current version:

• Sign up as a student through the Ropsten test network for just 5ETH!
• Get a list of current students and alumni
• OnlyOwner: Graduate student
• OnlyOwner: Set program cost

Here's some useful information to know before getting started with the codebase

• The Smart Contract is deployed on the Ethereum Ropsten Test Network
• Owner: 0x4B8dc8d5A7d51c2FFE2A3C1f08DbFC884265967E
• Smart Contract, its address, and the ABI are all in public/src/utils

Setup

• You find the smart contract's codebase in public/src/utils/. I did deploy the smart contract through Remix, Ethereum's IDE. I've solely put the smart contract for completeness into this repo. I did not deploy it locally from my machine.

• Once you've deployed your own iteration of the smart contract (if you chose so), update abi.js and contractAddress.js accordingly. You might want to revisit some methods within the components as well after you made some changes to the functions within the smart contract.

• If you are overwhelmed with smart contracts and Remix, here and here are some videos to get started.

• As mentioned, you do need the chrome plugin Metamask with some money in there. (make sure to be on the Ropsten Test Network)

After you cloned the project, run:

yarn

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Start HTTP server with the build (useful for Heroku deployment)

yarn start

Feedback

Please feel free to send me any feedback or questions via Discord or email.

Keep Studying!

Here are some ressources that helped me get started, ordered by how helpful they were:

• Probably the best Solidity tutorial out there: Crypto Zombies
• Fullstack tutorial with Vue, web3, and Solidity: Build a Casino!
• Introduction to the Truffle Framework: Pet Shop
• YouTube: Ethereum course for beginners

Lastly, some interesting projects that you should know:

• Truffle
• Infura
• OpenZeppelin
• Consensys
• 0x
• Aragon