DEV Community

Robert Chen
Robert Chen

Posted on • Originally published at Medium on

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

codecoderevolution

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

4) constants.js:

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

5) In your terminal:

touch config-overrides.js
open config-overrides.js
Enter fullscreen mode Exit fullscreen mode

6) config-overrides.js:

7) In your terminal:

open package.json
Enter fullscreen mode Exit fullscreen mode

8) package.json:

9) In your terminal:

open src/App.js
Enter fullscreen mode Exit fullscreen mode

10) App.js:

11) In your terminal:

open src/index.js
Enter fullscreen mode Exit fullscreen mode

12) index.js:

13) In your terminal:

open src/App.css
Enter fullscreen mode Exit fullscreen mode

14) App.css:

15) In your terminal:

npm start
Enter fullscreen mode Exit fullscreen mode

or

yarn start
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)