Learn How to Create a Passion Economy Platform on Blockchain
Tags: blockchain, webdev, beginners, javascript
Published: 2020-05-08 16:39:17


> “The line between hobbies, careers and personal brands is blurring.”    — Adam Davidson, author of “The Passion Economy: The New Rules for Thriving in the 21st century”

The passion economy is all about monetizing individuality. Successful people usually have a unique skill set that is uncommon and hard to find elsewhere. When you combine your passion with skills, you can carve out a perfect niche in the economy.

The nature of work as we see it today is changing rapidly. Post COVID-19 crisis, we don’t know if we can go back to the way we were. Who thought they would be writing their end semester exams from their dorm!? Do we really need brick and mortar to run an office? COVID-19 is making us challenge the status quo.

The beginning of the journey into the passion economy starts with you. (This is usually the hardest step.) The passion economy is all about monetizing your individuality, so step #1 is reflecting within to find what you’re truly passionate about. This idea resonates with many religions where the focus is on finding a greater purpose in life and to work towards it with raw passion. 

And passion pays off. According to [a16z](https://a16z.com/2019/10/08/passion-economy/), the top-earning writer on the paid newsletter platform Substack earns more than $500,000 a year from reader subscriptions. The top content creator on Podia, a platform for video courses and digital memberships, makes more than $100,000 a month. And teachers across the US are bringing in thousands of dollars a month teaching live, virtual classes on Outschool and Juni Learning.

Yet, so many platforms lack transparency for content creators. In this blog post, we will focus on leveraging blockchain to create a passion economy platform for writers.

## Here’s a step-by-step guide on how to develop a journal entry prototype on the Ethereum blockchain using Sia as a decentralized storage platform.
We will build a platform where a user can make a journal entry and push it to a decentralized storage platform. The unique hash of the journal entry will be stored on the blockchain. We will also fetch previous journal entries. 

Sia is an open source decentralized storage platform that leverages blockchain technology to create a data storage marketplace. It is more robust and affordable when compared to traditional cloud storage providers. You don’t require any signups, servers, or need to trust third parties. Sia keeps your data private. You control your private encryption keys and you own your data. No third party has access to your files, unlike traditional cloud storage providers. Learn more about Sia [here](https://sia.tech/).

DappStarter is a full-stack blockchain app generator. We’ll be using DappStarter to spin up a minimalistic blockchain dapp within 5 minutes. DappStarter makes development faster and more efficient so developers can focus on the smart contract’s business logic, saving weeks of learning and development time. Learn more about DappStarter [here](http://trycrypto.com/).

Checklist before starting:
1. Visual Studio Code (or any IDE for editing JavaScript)
2. NodeJS v10.x
3. Solidity v0.5.11
4. Truffle v5.0.7
5. Ganache v2.0.0 - Blockchain simulator for Ethereum

### Step 1: Go to [dappstarter.trycrypto.com](https://dappstarter.trycrypto.com) to generate your blockchain dapp

DappStarter supports your choice of blockchain and blockchain language as well as an integrated front end user experience in your choice of client side framework.

####Step 1.1: Select your choice of blockchain. For this tutorial, we will use Ethereum.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lyj2llq2fesa94lv7wrf.png)

Step 1.2: Select Solidity as smart contract language
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9gyjsqz7nwp6kgmyjir.png)

Step 1.3: For now we will work with vanilla JS
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ulnxk6ucop0ia0dbg1gn.png)

Step 1.4: Select a name for your dapp and click on the ‘CREATE DAPP’ button! 🎉
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v1z2fdx5o2d719a63xo2.gif)


#### If you have followed all these steps successfully, you should have a unique github repository link where you can find your dapp!

### Step 2: Go to the GitHub repository and start your dapp using README
Once you have successfully started your dapp, you should see something like this-  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/83fg1go6ni8onmk55e5c.png)


To get an overview of DappStarter, go to [trycrypto.com/](https://trycrypto.com/). 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whu5vyjbttr15x4t1afb.png)

### Step 3: Customize your dapp 
Let’s see how we can modify the navigation pane. Go to `src/dapp/pages/components/page-navigation.js`

You can find all the code related to dapp navigation here.
{% gist https://gist.github.com/niharrs/a16e8d6e3034504a22854116e5daccbf %}

On saving the file, the dapp will be reloaded automatically because DappStarter uses webpack. Now, you should see a navigation panel and Start Writing page like this-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fsbbq8jmeotoocbn19ls.png)


### Step 4: Create a new widget to make our dapp modular
It’s good practice to create widgets for different functionalities. Create a file named `html-widget.js` in `src/lib/components/widgets`. 

Insert the following code in this file:

{% gist https://gist.github.com/niharrs/67e69f98a3de1cc35224df332f4b8936 %}

In this file, we have integrated [Quill](https://quilljs.com/) to make rich text journal entries. Quill is a free, [open source](https://github.com/quilljs/quill/) WYSIWYG editor built for the modern web. 

To use Quill’s functionalities, make sure you add Quill CDNs in `dapp/index.html`. In the `head`, add 

{% gist https://gist.github.com/niharrs/39d6acf4e0937f2a4337d99f0fc9bb63 %}

To increase length of the text editor, make the following changes to `src/dapp/index.css`-

{% gist https://gist.github.com/niharrs/ca30d4478588b439ce4e65fa9036285a %}

### Step 5: Make use of html-widget in our dapp
Go to `src/dapp/pages/dapp-page.js` (this is where all our dapp front-end logic will reside) and make the following changes. Import the created html-widget there. We will be able to use this widget like a regular html tag to use Quill editor anywhere in our dapp.

{% gist https://gist.github.com/niharrs/ee26d4b7a5d8bed7c4417f663b3ab508 %}

Your dapp should look like this now- 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ka6jxus23phydigqnd2d.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oo7jbyxpn5196gmk60kx.png)

### Step 6: Remove extra blocks and change logo
Let’s take the customization of the dapp to the next level. Let’s make it look like this-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pywmrabzh8lggw4jlzpn.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1l13766a3fnb5tmtoiya.png)


Let’s change the logo first. You can use any image. Save it in `src/dapp/assets/img`. Let’s name it `YOUR_FILE_NAME.png`. Now go to `src/dapp/pages/components/page-navigation.js`. You see this line in the code-

{%gist https://gist.github.com/niharrs/988d46ec5f1f59e148b306e8545aa8a1 %}

Change it to 

{%gist https://gist.github.com/niharrs/58821c0b2cea551f2629cb153c6f33f2 %}

We also need to make a change to `webpack.config.dapp.js` (this is in the root of the project)-

{%gist https://gist.github.com/niharrs/8f92e96d0d11c5b3621df9931f0b47cb %}

This is what your dapp should look like now-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c9ayt7v446imzhgnqflc.png)

Now let’s remove the Feature blocks from the left navigation panel. Go to `src/dapp/pages/components/page-navigation.js`.

{%gist https://gist.github.com/niharrs/f0d371179973fe05297fcaca0ebec78c %}

Your dapp should look like this now- 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hcawdgcqslbn2h01afad.png)


__We are almost there!!__ Finally, let’s get rid of the top navigation bar. Go to `src/dapp/pages/components/top-navigation.js` and remove all the html that is being rendered.

`src/dapp/pages/components/top-navigation.js` should look like this-

{%gist https://gist.github.com/niharrs/a622ea319da0008dbe8ebca0c0d6f002 %}

This is what your dapp should look like now- 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ecnurt3jl2i2b1udqlu6.png)

### Step 7: Handle journal entry with Sia 
All the code related to Sia document upload rests in `src/lib/dapp-lib.js`. Go to FILE STORAGE: SIA section. The only code block that needs editing here is `addSiaDocument()`.

{% gist https://gist.github.com/niharrs/d96e28b75cb6b6b1755ecb6fead17f71 %}

### Step 8: Final touch ups
Our dapp is almost ready. We just need to make a few tweaks in `src/dapp/index.css`. Add the following lines to the file-

{% gist https://gist.github.com/niharrs/4b9123bf2695d7effd5e4189250130f4 %}

These were all the changes we had to make! Now let’s see our dapp in action.


##Congratulations, if you made it till here! 🎉

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rz1njp1br19owftc98k.gif)

You can modify your dapp to develop more sophisticated platforms for writers. What we built was merely an example of one of the many use cases you as a developer could build upon. 

The future of the passion economy is predicated on the concept of transparency and fairness for content creators. Blockchain provides a unique infrastructure that encourages creators to make awesome content by ensuring that they’ll be fairly compensated for their efforts. Building a dapp for the passion economy is about more than just monetizing content — it’s about providing a transparent, open system where creators feel empowered to create and share what makes them unique.

##Start building your dapp with [DappStarter](https://dappstarter.trycrypto.com/).