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.

https://twitter.com/CodesphereCloud/status/1445075779545706508

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.

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:

https://gun.eco/

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.

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:

https://gun.eco/docs/API

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!