DEV Community

Cover image for Set Up a Decentralized Database with React and GunDB
Simon Pfeiffer for Codesphere Inc.

Posted on • Updated on

Set Up a Decentralized Database with React and GunDB

Earlier this week, we spoke about decentralized applications, and the implications they might have on the future of the web. Now I'm not sure if we at Codesphere have unexpectedly been endowed with the power of prophecy, but only a few hours after publishing our article, Facebook sent the world a massive reminder on the dangers of centralized infrastructure, as a DNS error shut down all their services for nearly 24 hours.

One of the major benefits of decentralized apps is that these sorts of infrastructure failures become much rarer. While building a dApp might feel like a monumental endeavor, it's actually not too difficult.

In this tutorial, we're going to build a decentralized Google Docs clone with React and GunDB.

How GunDB Works

GunDB is an easy-to-use peer-to-peer decentralized database that will allow you to store data on a network of individual users, instead of a singular server. Each peer in the app's network stores some amount of the web app's data, but in aggregate, the entire network will contain all the necessary information.

Alt Text

While this approach to decentralized data storage has many similarities to Blockchain, it is important to note that it is its own technology. In fact, just like Blockchain, decentralized databases are a hot topic in Computer Science research. You can learn more about GunDB here:

While our database could hypothetically run without any kind of additional servers, this is going to require a sufficient number of users to make sure that you can always access enough nodes in the network.

To account for this, we're going to host our own relay peer that users can connect to even if no one else is using the app.

In terms of data formatting, every node in our database is going to have a 'soul' which is its unique identifier, and then data stored in a standard JSON format.

Setting up our Relay Peer

For our relay peer, we are going to create a simple express server that uses the GunDB npm package.

Install these in a new npm project with:

npm install express gun

For our node, we're only going to need one file with the following code:

This will create our express server and set it up with Gun.

Keep in mind that in this example we are running everything locally, but for a production-grade app you are going to want to deploy it in the cloud. We of course recommend Codesphere to deploy and configure your relay peer with ease.

Setting up Our React Application

Next, we are going to create a React App to interact with a textbox along with other nodes in our network. Again, make sure to install Gun, and then we can do the following in the relevant component:

And as simple as that, we have a working app!

We can then run our react app with:
npm start

And our node relay script with
node server.js

And now we can edit these live.

Alt Text

The full project repo can be accessed here.

Where to Go From Here

This is only the tip of the iceberg of what can be accomplished with GunDB and decentralized web technologies. There are countless applications of GunDB in areas like gaming, communication, and Defi. We also haven't even scratched the surface of the data storage, encryption, and P2P features that Gun includes. I encourage you to check out the full documentation here:

Contrary to popular belief, decentralization and cloud aren't mutually exclusive. When dApps are first starting to grow, it's important to use the cloud to maximize your app's efficiency.

Now when you're choosing your provider, ditch the big tech companies, and come check out what we're building at Codesphere, an all-in-one code editor, DevOps toolkit, and cloud provider!

Happy Coding!

Top comments (9)

diegobm profile image

How does gun (and probably dapps in general) deal with data availability? Couldn't it be possible a case in which at a given point in time there are no nodes connected that store a certain fragment of the "database", therefore rendering that data temporarily not accessible?

i001962 profile image

Good point. There is a concept of a super peer that can subscribe to all data. There are dozens or community hosted peers like that and the network keeps getting stronger. Join the convo at

diegobm profile image

Will do :)

shnydercom profile image
Jonathan Schneider

Nice intro, I wonder how the p2p-exchange works in this example: Does the left browser window send it directly to the right one (and the server), or do only the nodes that call gun.serve() work by p2p?

yokowasis profile image
Wasis Haryo Sasoko • Edited

I don't think p2p exchange works right now. When the relay peer crash or turned off. the data will stop syncing. it will resync again when the relay server turned on.

whitecoode profile image
Yahyah Ridwanullahi olanrewaju

Wow thanks 😊

smarthug profile image
smarthug • Edited

Use node.text.replaceAll(/\n/gm, "\n") to fix LineFeed Bug

xblabs profile image
Orwell's Ghost

Fascinating article. Thanks buddy!

simoncodephere profile image
Simon Pfeiffer

Glad you enjoyed the read!