How To Build Your First Blockchain App on Blockstack

A tutorial to build your first app on the decentralized web

Blockstack is a network for decentralized applications. This platform leverages a serverless architecture, which helps remove critical points of vulnerability. By eliminating these weak points, which have frequently fallen victim to hacks, Blockstack makes user data more secure.

Prerequisites: Knowledge of React.js will be required for this tutorial.

Blockchain tech can be complicated, but getting started doesn’t have to be. Blockstack’s 3rd party sign in/sign up/authentication makes it easy to get started developing apps and publishing it to a decentralized App store like App.co

I was able to publish this on App.co in less than a week

After integrating Blockstack, you have the option to either send the unique username that a user creates from Blockstack to your own API and build the user object that way, or use Gaia Storage, Blockstack’s decentralized backend provider. You can also opt to have a combination of both, where private user information like phone numbers and addresses are encrypted and stored in Gaia Storage but public information like comments or posts are stored in a public API.

This blog post is meant to simplify and abstract as much as possible. If you would like deep dive video tutorials, check out Tech Rally on YouTube (this is where I learned about Blockstack).

For now, we’ll cover getting Blockstack Sign In/Sign Out authentication set up. Let’s get started!

1) Install Blockstack Browser

2) Create your Blockstack ID (be sure to save your Secret Recovery Key somewhere safe)
In your terminal:

npm init react-app blockstack-tutorial
cd blockstack-tutorial
npm install --save blockstack@19.0.0-alpha.2
npm install react-app-rewired --save-dev
mkdir src/utils
touch src/utils/constants.js
open src/utils/constants.js

If npm install gives you a problem, try yarn add:

yarn add blockstack@19.0.0-alpha.2
yarn add react-app-rewired --save-dev

4) constants.js:

import { AppConfig } from 'blockstack'
export const appConfig = new AppConfig(['store_write', 'publish_data'])

5) In your terminal:

touch config-overrides.js
open config-overrides.js

6) config-overrides.js:

7) In your terminal:

open package.json

8) package.json:

9) In your terminal:

open src/App.js

10) App.js:

11) In your terminal:

open src/index.js

12) index.js:

13) In your terminal:

open src/App.css

14) App.css:

15) In your terminal:

npm start

or

yarn start

That’s it! Simple, but powerful —you are now connected to Blockstack.

In part two of this series, I’ll show you How to Connect Blockstack to your Backend API

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com