# FEEDweave, or how to build a decentralized social network
This is a high-level tutorial on how to build a decentralized social media platform using the Arweave blockchain.
After reading this guide, you’ll have the foundation to build a fully functional social network with the following features:
* Ability for users to create accounts
* Ability for users to set up profiles
* Ability for users to connect their Twitter accounts
* Ability for users to make posts using Markdown
* Ability for users to follow other users
* Ability for users to see a feed of all posts on the network
* Ability for users to see a feed of posts by users they follow
* Ability for developers to freely build on top of your application
For the impatient, you can see and experiment with the final product deployed here: [https://feedweave.co](https://feedweave.co)
## Benefits of using a blockchain
There is a lot of buzz around blockchain infrastructure, but what are the practical benefits of using one for developers?
**Trust guarantees**
Platforms like Facebook and Twitter once had vibrant developer ecosystems enabled by web APIs. Unfortunately, API access was revoked by companies because they saw third-party developers as threats. Trust was broken between developers and the platforms. Blockchains allow platforms to make strong commitments to their users and developers, where the rules of using the system can’t change, so developers can build on them in confidence. As demonstrated by DeFi on Ethereum, this results in vibrant ecosystems of products that rapidly innovate.
**Composable components**
Because all applications on a blockchain share the underlying platform, they benefit from each other by sharing users and components. Throughout this tutorial, we’ll save time by reusing components for user profiles, social graphs, and identity verification built by other developers.
**No need to run a backend**
Developers don’t run the core infrastructure of the application or take custody of user data. They don’t need to set up virtual machines, databases, object storage, etc. The blockchain provides that with clear protocol-level guarantees.
The role of developers changes from _maintainers_ of applications to being their _architects_, since the blockchain maintains the app autonomously. Developers can focus on interfaces, and there can be a whole ecosystem of diverse experiences on top of shared data.
Users collectively maintain the infrastructure so developers have no up-front or recurring costs.
This creates new possibilities: developers could do more with less resources, leading to lighter weight teams. Building niche apps for smaller communities is sustainable.
## Why Arweave?
As I mentioned earlier, we’ll be building our application on top of the Arweave blockchain.
Arweave is a blockchain-based storage network that enables permanently hosting arbitrary data.
To host a file, users pay a one-time fee proportional to the file's size and denominated in AR tokens. They then submit a transaction that permanently hosts the file on the Arweave network. Anyone can later retrieve the data by querying the network.
Previous attempts at decentralized file storage either didn’t offer strong guarantees of data availability, or had complicated APIs for storing and retrieving data.
The breakthrough Arweave is that paying for a file once provides strong guarantees that it will be hosted perpetually. This drastically reduces complexity both for users and developers. People uploading a file don’t need to continuously top off payment, people retrieving it don’t need to pay for access.
You can learn about how Arweave works in detail in the project’s [yellow paper](https://www.arweave.org/yellow-paper.pdf).
### What about advanced functionality?
Social networks aren’t just a collection of files. They require complex database functionality that will allow building core features like news feeds and social graphs. How does Arweave achieve this?
Arweave allows tagging its transactions with arbitrary key-value pairs. Tags enable organizing records in Arweave similar to how tables organize records in a relational database. This lets developers define relationships and build data schemas with the complexity necessary to support the features of social networks.
### What about performance?
For all the gains blockchains provide in terms of security and trust, they are known for making tradeoffs in terms of performance. They are slow to read and write from.
So how can we work around this? The short answer is that not all layers of the development stack need to be decentralized. Decentralization is only necessary at the lowest layer, where raw data is stored, to create guarantees to users and developers about data access, control and availability.
Performance higher up the stack is achieved with an ecosystem of gateways. Gateways ingest raw data from the blockchain and enable performant caching, indexing, and queries. Developers can choose from a variety of gateway providers within the Arweave ecosystem, or choose to run their own. Because anyone can run a gateway, there is no risk of this layer of the stack being co opted by providers with ill intents.
## Building FEEDweave
Our first task is to model our data to support the functionality we’re trying to implement. We already know that Arweave supports hosting files. This means we can put out data into files. But how do we create relationships between data?
That’s where _tags_ come in.
### Anatomy of an Arweave transaction
Here is an example transaction from the app ArweaveID:
https://explorer.arweave.co/transaction/D7_a4DZ4He6qAZWQbwjVEf5XyxFRx8zvCAfDCReipM0
Some of the fields look familiar if you’ve seen transactions on other blockchains: there’s a transaction hash, a block hash, a user’s wallet address, and the transaction fee.
But other fields are unique to Arweave: _data_ and _tags_.
**Data**
This is the raw data payload of a transaction. We could use this to, for example, store the text of a post, a JSON blob, or in this case, a human-readable username that will be associated with the user’s Arweave wallet.
**Tags**
Tags are used to group transactions for later retrieval. They give us functionality similar to tables in traditional databases. A common convention on Arweave is to tag your application’s data with its own `App-Name`. Applications also version their transactions like this: `App-Version: 0.0.1`. Versioning lets developers update schemas without breaking interfaces that consume their data.
You can see examples of how other applications tag their posts on the [Arweave App Explorer](https://explorer.arweave.co/).
### Writing posts to Arweave
Posts are the core data type of a social network, so we will tag them with our `App-Name`. We want our resulting transactions to look like this:
The easiest way to programmatically compose transactions is using the [arweave-js](https://github.com/ArweaveTeam/arweave-js) library. I built a simple app called Transaction Composer for composing transactions for different apps as a demonstration. You can see it’s code [here](https://github.com/denisnazarov/arweave-composer) and or try composing a transaction [here](https://composer.arweave.co/?appName=FEEDweave).
After you hit submit, the app composes a raw transaction with the above data and tags, signs it with your keys, and broadcasts it to the blockchain.
You can look up the data on the [block explorer](https://explorer.arweave.co/app/FEEDweave) to see that it was indeed written to the blockchain!
### Reading posts from Arweave
Next, we need to read the data back from Arweave so we could render it in our user interface.
The way Arweave applications do this is by interacting with gateways. Arweave gateways are similar to gateway services like [Infura](https://infura.io/) in the Ethereum ecosystem. They abstract the need for users and developers to run full nodes in order to build and use applications.
Let’s retrieve some FEEDweave posts via the [gateway.arweave.co](http://gateway.arweave.co/) JSON API that I’ve built. It does some custom processing to make building the UI easier.
```bash
curl https://gateway.arweave.co/transactions?app-name=FEEDweave
```
You can see a list of transactions and related user objects returned from the gateway.
Armed with a JSON API, we can now build a performant user interface using traditional web or mobile application frameworks!
Here is what the feed looks like when rendered in the FEEDweave app. You can see the UI code here: [https://github.com/denisnazarov/feedweave-ui](https://github.com/denisnazarov/feedweave-ui) or see it live here: [https://feedweave.co/](https://feedweave.co/)
Exciting! Feeds are the core functionality of social networks. We just build a functional multiplayer application without needing to spin up any servers or building an account management system!
### Human-readable names
By default, Arweave identities look like a random combination of letters and numbers, for example: `Lij8Oi6Rh7jbPXKJqLbX-S37fQPGuhdpTKybjRJWHfw`.
This isn’t very user friendly! We’d like to have human-readable handles in our application, like we’re used to seeing on old-school social networks.
Composability to the rescue! Yup, there’s an Arweave micro-app for that, so we don’t need to build that functionality from scratch! We can tap into an existing ecosystem of human-readable names.
It’s called `App-Name: arweave-id`. It was released on [GitHub](https://github.com/shenwilly/arweaveID) by an independent developer with its own [barebones UI](https://alz4bdsrvmoz.arweave.net/fGUdNmXFmflBMGI2f9vD7KzsrAc1s1USQgQLgAVT0W0). The Arwave ecosystem has adopted it as a de facto and easy to implement identity system in multiple applications. It has 99 users as of this writing (see the transaction data [here](https://explorer.arweave.co/app/arweave-id)).
Here is what it’s data model looks like in [Transaction Composer](https://composer.arweave.co/?appName=arweave-id):
Users put a human-readable name in the Data field. The first user to claim a name gets it.
We integrate support for `arweave-id` into FEEDweave by replicating its schema for submitting a transaction and then rendering it in our UI (see example code [here](https://github.com/denisnazarov/feedweave-ui/blob/master/src/components/SetUpIDButton/index.js#L27-L31)).
### Implementing a social graph
Social graphs are a more advanced feature of social networks, but the data modeling is still quite simple.
Since social graphs are a generic primitive that could be used by many applications, we’ll implement it as a micro-application that can be reused by other applications. Composability! We’ll give it a generic name: `App-Name: social-graph.`
This way, we’ll have our own social graph internal to FEEDweave, and other developers could also integrate it into their own applications or extend its functionality.
This is the power of building on top of blockchains—all components are automatically open and reusable by others!
I’ll use the transaction composer UI to illustrate how we’ll model the data for `social-graph` (you can try composing a transaction for it [here](https://composer.arweave.co/?appName=social-graph)):
In the data field, we’ll put the wallet address of the user we’ll be following or unfollowing. The `Action` tag represents our intent (following/unfollowing). This way, a user can toggle following/unfollowing by submitting a new transaction with the opposite action.
Since we want other applications to reuse this component without collisions, the `App-Filter` tag allows apps to specify to only follow a user within a certain app. Leaving this blank means following a user globally.
You can see historic activity of `social-graph` micro-app transactions here: [https://explorer.arweave.co/app/social-graph](https://explorer.arweave.co/app/social-graph)
## Next steps
The rest of the functionality, such as building out the remainder of the UI and adding Twitter link integration (AKA <code>[identity-link](https://explorer.arweave.co/app/identity-link)</code>) is left as an exercise to the reader.
Here are some resource to help you from here:
* Experiment with the FEEDweave app [https://feedweave.co/](https://feedweave.co/)
* Explore the underlying data [https://explorer.arweave.co/app/FEEDweave](https://explorer.arweave.co/app/FEEDweave)
* See the code for the UI [https://github.com/denisnazarov/feedweave-ui](https://github.com/denisnazarov/feedweave-ui)
Please reach out to me on [Twitter](https://twitter.com/Iiterature) if you have any questions or comments!
## Further work
Today, FEEDweave is only an MVP, intended to serve as a proof of concept of building decentralized social applications. In order to be truly useful and have feature-parity with popular social media platforms, it needs more work.
Feedback, ideas, and pull requests are greatly encouraged!
This is a preliminary list of features that could greatly improve the FEEDwave experience. Since it’s a blockchain app, other developers can take it wherever they want from here.
* **User-friendly login:** Currently, users log in by loading an Arweave JSON wallet into the FEEDweave UI. While this was easy to build, it is not the most secure or user friendly way to onboard mainstream users. Easy to use log in has been under development in other blockchain ecosystems for years and can likely be leveraged here.
* **Pagination:** The gateway currently doesn’t support pagination. Pagination will help provide a better UX and prevent performance degradation when there are lots of posts on FEEDweave.
* **Comments and threads:** There is no comment support or ability to thread posts, a hallmark conversational feature of social network. Supporting conversations will help increase engagement and make FEEDweave more fun to use.
* **Editing posts:** Because blockchains are immutable, transactions cannot be changed after they are mined. A way to implement edits is by using diffs, similar to how git works. A diff can be submitted in a new transaction and applied in a chain to previous versions of a document to enable editing. Editing could also be built as a micro-app for other devs to use.
## Further reading
You can see the constellation of GitHub repos that were built to enable and ideate on FEEDweave here:
* [https://github.com/denisnazarov/arweave-gateway](https://github.com/denisnazarov/arweave-gateway)
* [https://github.com/denisnazarov/feedweave-ui](https://github.com/denisnazarov/feedweave-ui)
* [https://github.com/denisnazarov/arweave-explorer](https://github.com/denisnazarov/arweave-explorer)
* [https://github.com/denisnazarov/arweave-composer](https://github.com/denisnazarov/arweave-composer)
Follow FEEDweave updates on Twitter (for now) here:
* [https://twitter.com/FEEDweave_](https://twitter.com/FEEDweave_)
Learn more about Arweave:
* [https://www.arweave.org/files/arweave-lightpaper.pdf](https://www.arweave.org/files/arweave-lightpaper.pdf)
* [https://www.arweave.org/yellow-paper.pdf](https://www.arweave.org/yellow-paper.pdf)
A great article on how rebuilding social networks with protocols might fix their core problems, with a lot of well-researched history:
* [https://knightcolumbia.org/content/protocols-not-platforms-a-technological-approach-to-free-speech](https://knightcolumbia.org/content/protocols-not-platforms-a-technological-approach-to-free-speech)
Follow me on Twitter if you’re interested in the intersection of crypto and building media apps! [https://twitter.com/Iiterature](https://twitter.com/iiterature)