A Dive into Web3

Jan 28, 2022

Around the holidays, I found myself with a few hours of free time. I decided to try to answer my question of "what's the big deal about web3?" So I took a dive in, and holy moly it's pretty cool.

Even if you don't buy all of the hype, apps built on top of blockchains and decentralized protocols theoretically get some of the features of really robust apps of today for free. Namely redundancy, security, and global availability (kind of like a CDN being spatially close to its end users).

To learn some of the neat new techologies characteristic of Web3 applications, I built my own! It's certainly not a great business model and won't make me any money any time soon, but it was pretty fun to make.

Introduction

What I came up with is a high-stakes social media app, powered by IPFS and the Ethereum blockchain. I call it "Stakes."

Users first buy into the app by purchasing the native token, called Karma. From there, all transactions are paid for with this token instead of the user's ETH balance. Users can post content, follow others, and support their favorite content by adding Karma to it. Any Karma added to someone's content is immediately deposited in their wallet. If a user likes a piece of content enough, they can even outright buy it from another so it is added to their own collection. The best part is that content isn't limited to this platform. Since user posts are managed by an Ethereum contract meeting the NFT specification, they can be traded in any NFT marketplace.

Demo

Users are first directed to a login page, where they can connect with a Metamask account:

Just as a note: the accounts on these demos are imported from my local test blockchain and not real accounts.

Users are shown the top content for other users which they are "staked." Note that staking happens on the Blockchain, so it's a much more serious commitment than just following someone on another social media site:

And finally, each post is just an NFT. They're free to be purchased and put on display as pieces of your own content if you enjoy them enough:

Stakes is currently hosted (and is always planned to be hosted) on the Rinkeby test network so it's free to use and fool around with. Users will first need to fund a Metamask account using a Rinkeby faucet (totally for free). I found this one from chain.link to work reliably. If on mobile, Metamask provides an app for iOS and Android with a built in browser that can view the site.

If you have yourself a funded account on the Rinkeby network and would like to dive in, find it here!

Technologies

Transactions between users are managed by the Ethereum blockchain. Smart contracts are written in Solidity using the Truffle development environment.

The frontend is using the React framework, interacting with the Ethereum blockchain with using Truffle, web3js, and Metamask.

User pictures are managed by IPFS, as putting the data on-chain would be infeasible. Uploads and downloads are handled via a local js-ipfs node started directly in the browser.

The frontend is also stored with IPFS and can actually be connected to with ipns://stakes.chrishughesdev.com if IPFS is supported in your browser. Otherwise, it is connected to via a HTTP gateway.

However, since the application is using entirely IPFS and the Ethereum Blockchain, it's not actually hosted on anything. It's just served peer-to-peer.

Pretty cool, huh?

For a more of a technical overview, see my repo on Github.