Create your Blockchain DApp with Ethereum and VueJS – Tutorial Intro

Tutorial where you will build a decentralized application using Ethereum blockchain and VueJS.

This is a simple decentralized application built using Ethereum blockchain and VueJS for the front-end. This DApp example lets the users store their name and status on the blockchain.

Ethereum Vue JS DApp Screenshot - User list Ethereum Vue JS DApp Screenshot - User Profile

Brief description

The DApp allows users to register their name and status on the blockchain. The user’s profile is associated with an account address (or wallet address).

The owner of the profile is the only person who can modify his own data. This will give you a technical explanation of what it means when the user is in control of his own data (just like Facebook… sarcasm!).
The smart contract is designed to give the user control of his own information and not even the creator of the smart contract can control any data.

This tutorial is split in two parts:


Quick Start

1) Download the project and decompress it into the folder ~/ethereum-vuejs-dapp (or wherever you want).

2) Start Ganache (or your private blockchain).

3) Open the terminal (if you are using Windows you must use the Power Shell) in the folder ~/ethereum-vuejs-dapp and run the command:

$ truffle console ––network ganache

4) If ganache is running you should be inside the truffle console; now run the following command in the truffle console:

> migrate ––reset ––compile-all

5) If the migration was successful, copy the content of the file ~/ethereum-vuejs-dapp/build/contracts/Users.json into the folder ~/ethereum-vuejs-dapp/app-users/src/assets/

6) Open another terminal in the folder ~/ethereum-vuejs-dapp/app-users and run the command:

$ npm install

7) Once all the dependencies are installed run the command:

$ npm run dev

If everything went fine, the terminal will display a message similar to:

DONE Compiled successfully in 5166ms       15:54:53

Your application is running here: http://localhost:8080

8) Open the browser, go to the URL shown by your terminal and play with the DApp!

NOTE: if you want to try to add more profiles you have to install metamask in your browser, then import the accounts into metamask and finally change account on metamask in order to register a new profile _

. . .

Enjoyed the content?
Please consider supporting the developer with a bitcoin donation :)


Related Articles

Create your Blockchain DApp with Ethereum and VueJS - Tutorial Part 2

Category: Blockchain

In the second part of the tutorial we are going to develop the front-end and see how to interact with the smart contract developed in the PART 1. If you missed the introduction and you want to ...

Create your Blockchain DApp with Ethereum and VueJS - Tutorial Part 1

Category: Blockchain

In this first part of the tutorial we are going to create the smart contract that handles the registration of users; then we are going to deploy the smart contract to the blockchain using ...

How to Test Smart Contracts - Tutorial

Category: Blockchain

Testing a smart contract is a must of the blockchain development process. Remember that the blockchain does not forgive you any errors because of its immutability! The only way to fix a bug ...

What is a fork? Why is it dangerous?

Category: Blockchain

Often a blockchain can have some flaws, bugs or it just needs improvements. To fix those vulnerabilities the blockchain has to be forked. A fork rewrites the rules which a full node must follow in ...

Blockchain For Not Technical People (public speech)

Category: Blockchain

A 4 minutes speech about blockchain I delivered during a course on public speaking in November 2019.

Where is the blockchain revolution?

Category: Blockchain

A friend of mine asked me: bitcoin was invented 10 years ago, why has not anyone come up with a real product yet? Has anything been disrupted by blockchain? His disappointment is quite ...