How To Build Your First Blockchain App on Blockstack
Tags: decentralization, software, blockstack, blockchain
Published: 2019-06-08 17:50:54

---
title: How To Build Your First Blockchain App on Blockstack
published: true
tags: decentralization,software,blockstack,blockchain
canonical_url: https://medium.com/better-programming/start-building-blockchain-apps-now-a1ebe8f35ee7
---

###A tutorial to build your first app on the decentralized web

[![](https://cdn-images-1.medium.com/max/600/1*i1vivvw4SPmT_6-pl3C_6A.jpeg)](https://medium.com/better-programming/start-building-blockchain-apps-now-a1ebe8f35ee7?source=rss-1a2b6738cba4------2)
######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](http://reactjs.org/) will be required for this tutorial.

Blockchain tech can be complicated, but getting started doesn’t have to be. [Blockstack](https://blockstack.org/)’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](https://app.co/)

![codecoderevolution](https://cdn-images-1.medium.com/max/800/1*_bWaCp4pSYN8sZfH1xTxEQ.gif)
######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](https://youtu.be/Arb-dwU5SZI) 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](https://blockstack.org/install)

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`:

{% gist https://gist.github.com/BetterProgramming/43bd30b2dbaf539aad03e6d331afca30 %}

7) In your terminal:

```
open package.json
```

8) `package.json`:

{% gist https://gist.github.com/BetterProgramming/4ea2f2814c790bd7c3bc313ba721c41f %}

9) In your terminal:

```
open src/App.js
```

10) `App.js`:

{% gist https://gist.github.com/BetterProgramming/137d478a3a0b098878be5cc741db9a69 %}

11) In your terminal:

```
open src/index.js
```

12) `index.js`:

{% gist https://gist.github.com/BetterProgramming/bc2a1c916eaac9f63692639292ad361c %}


13) In your terminal:

```
open src/App.css
```

14) `App.css`:

{% gist https://gist.github.com/BetterProgramming/33bfa04f299565505ff3ebb709e80f5f %}


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](https://dev.to/robghchen/how-to-connect-blockstack-to-your-backend-api-2bo0)

---

Bring your friends and come learn JavaScript in a fun never before seen way! [waddlegame.com](https://waddlegame.com)