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

I was able to publish this on 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)
  3. 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


7. In your terminal:

open package.json

8. package.json:

9. In your terminal:

open src/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


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

If you enjoyed that, check out my latest series: Learn to code in multiplayer game.

I also do tutoring on the first Monday every month on Meetup.

Find me on Youtube and Twitch for more developer content!

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store