Build your first dApp in 5 minutes

All you need is Javascript

Blockchains like Ethereum are all the rage right now. But everything feels so complicated. New programming languages. New developer tools. An entirely new ecosystem to navigate.

At Dharma Protocol, we’re hard at work doing away with all that complexity. Using nothing more than vanilla Javascript, we’ll have you writing your first dApp (decentralized application) in 5 minutes.

This dApp will let your user request a loan on the blockchain via a simple web form. Sound complicated? Let us convince you otherwise.

The clock’s ticking. Let’s dive right in!

Project setup

You’ll first want to clone the GitHub repo with the project starter code:

git clone https://github.com/dharmaprotocol/dharma-tutorial-1

From there, navigate to the project’s root directory:

cd dharma-tutorial-1

And install the project’s dependencies:

npm install

Once installed, run the command below to boot up a local blockchain:

npm run blockchain

Once the blockchain is booted up, you’ll want to open a new terminal window and serve the frontend application from your project’s root directory:

cd dharma-tutorial-1 && npm start

In your browser, you should see a web form that looks like this:

Step 1

Our first order of business is instantiating Dharma.js in our app.

The Dharma object takes one argument: the address of the blockchain.

In our case, we’ll specify the host of the local blockchain you booted up in the setup stage, which by default runs on port 8545.

In App/App.jsx on line 13, you’ll want to add the following line:

const dharma = new Dharma("http://localhost:8545");

Step 2

Next, we’ll need to identify the user of our dApp. To do so, we ask Dharma what accounts are available.

In App/App.jsx on line 39, you’ll want to add the following call:

const accounts = await dharma.blockchain.getAccounts();

Step 3

Next, we need to wire up the form button so that it actually creates a Dharma Loan Request when the user submits the form.

Creating a Dharma Loan Request can be expressed in a single function call.

In App/App.jsx on line 55, you’ll want to call LoanRequest.create with the following:

Step 4

And because this is a proof of concept, our last step will be to log the JSON representation of the Dharma Loan Request to the browser’s console to verify that the order was — in fact — created.

In App/App.jsx on line 65, log the following:

console.log(loanRequest.serialize());

Now, if you fill out the form and click “Submit,” you should see a JSON representation of the Loan Request logged to the browser’s development console!

Congratulations!

You just wrote your first dApp!

Hopefully we’ve convinced you that dApp development isn’t as difficult as you had imagined, and you’re hungry to learn more!

In the next part of our series, we will make a dApp that can also fill loan requests— connecting borrowers with lenders.

Be the first to know about this upcoming tutorial by joining the Dharma Developer Program today!

The Dharma Developer Program

We’re kickstarting the Dharma Developer Program to help aspiring dApp developers build their vision of a decentralized future.

As a member of the Dharma Developer Program, you’ll have access to our Slack channel — where you’ll find a community of like-minded developers and around-the-clock support from the Dharma team — as well as invites to our upcoming developer meetups.

Join the Dharma Developer Program today!

Happy hacking ❤

Team Dharma

Kayvon Tehranian is a Senior Software Engineer at Dharma Labs — a company building blockchain infrastructure for an efficient, borderless, and transparent credit market.