Building SkyFeed (Our hackathon experience)
Our background
I already developed a lot of Skynet-based projects prior to SkyFeed, for example SkyDroid (decentralized App Store for Android), SkyMessage (experimental decentralized chat built on top of SkyDB), SkyMirror (decentralized mirror for the main repo of Manjaro, a free OS based on Arch Linux) and SkySend (decentralized end-to-end-encrypted file sharing, similar to Firefox Send).
The problem is that my own apps don’t always follow design best-practices (or how David Vorick put it: “[…] there are a few apps that could really use a design overhaul”), so that’s how I connected with Julian, a UI designer from the Netherlands. Julian was deeply impressed by what Skynet stands for and the incredible projects the Skynet community was creating. He asked on the Sia forum if he could help out and volunteer with some design work. He was then redirected to SkySend which had a terrible UI at that time. Julian designed an awesome new UI, sent it to me, and we worked together on implementing it.
Then the new SkyDB hackathon was announced and Julian asked me if we wanted to work together on a hackathon project. We decided to build a decentralized social network inspired by the likes of Twitter, YouTube, Instagram, and some others.
Problem and solution
Current social networks have quite a lot of problems. For example, you’re locked into their platform because they are not interoperable with each other and as such, you would lose your social graph when switching. Your content is subject to being moderated by a central authority that isn’t consistent with their enforcement policies. Your personal data is sold to advertising companies and your identity can be hacked quite easily.
We came up with a concept for SkyFeed which solves all of these issues:
- It is fully decentralized using Skynet and SkyDB, so you can switch your portal at any time and keep everything: your social graph, your posts, and your reputation.
- Your private key which proves your identity is never sent to a server, so you keep full control over it and don’t lose your identity when a Skynet portal is hacked (or all of them).
- Private friends, saved posts and other usage data is only visible to you and stored end-to-end-encrypted, so data leaks can’t happen.
- No central moderation, you decide which users and content you want to follow and see.
- It’s 100% open-source (MIT license, https://github.com/redsolver/skyfeed).
The design process
With only three weeks in mind, Julian had limited time to design the user interface for SkyFeed. In most other projects everything is designed first, and then the development starts. But during the three weeks, we had to be as efficient as possible producing the best results. So we decided to work in parallel. While designing, the development was in progress too.
Creating the prototypes
We had multiple ideas how SkyFeed should look like and Julian spent two days sketching a few prototypes. While some were a pretty good starting point, all sketches ended up in the bin because they were too complicated to complete within the hackathon duration. We needed something easygoing, user-friendly, and familiar for now which means we focused on the basics of what a social network needs.
And so Julian designed a clean and clear first layout for SkyFeed. With this basis, it’s easier to expand new features in the (near) future. The user interface and user experience will improve with each new update (Twitter or Facebook we know today wasn’t just built in a few months either).
Design check
Every design component we made was evaluated by ourselves by asking a couple of questions. Is the user experience good enough? Is it easy to understand? Can the development be done? And can it be done within three weeks? By answering these questions we were able to improve the UX and UI alongside the project.
But some designs also raised new questions. How should a comment on a comment look like? Would it be possible to edit a post? Can you search for other users? And how should reposting a post work within just one click? And many more design ideas and concepts evolved from that.
Inspect mode
To make development easier for me, Julian uploaded the designs to Invision, which is a presentation tool for design prototypes. Invision also offers an inspect mode. By uploading all design layers from Sketch (the design app) to Invision, I then could pick all fonts, colors, pixels, sizes, paddings, margins, etc. Which tremendously increased the speed and progress with which I could build in Flutter.
Some technical decisions
Cross-Platform Development with Flutter and Dart
Flutter allowed me to iterate quickly on design concepts using the awesome development and debugging capabilities. Thanks to Flutter we could also release a beta version of a native Android and iOS app in addition to the web app shortly after the hackathon. I was also already quite experienced with Flutter, so it seemed like a natural fit.
Real-Time UI
Every change on SkyFeed is visible almost instantly to other users. The app is built using a lot of real-time so-called “Streams” which different parts of the UI subscribe to and then update themselves if and when necessary. For example, if you see a post from a new user, their profile details are automatically loaded and also served to all other parts of the UI which want to show the profile details of this user. This ensures that a user gets the best possible experience while working efficiently with the available resources. To get this to work, part of the data processing is powered by an experimental WebSocket endpoint for SkyDB implemented in Dart, but there’s currently ongoing work to offer an official WebSocket endpoint on every Skynet portal.
Hackathon demo of SkyFeed
We made a short demo video showcasing the main features of SkyFeed which you can watch here: https://siasky.net/AADw-AkwVFjCytyx7cSGHRqopEt7fJtKlHa-mc38oRpVVw
You can also check out our final live presentation (SkyFeed starts at 1:30:57):
After the hackathon
Reactions and Polls
After the hackathon, we continued working on a lot of new features. One very important feature many users requested was the ability to like a post. We thoroughly thought about it and in the end, decided to implement a full “reactions” system instead which basically allows you to react on a specific post with any emoji you want. We wanted to give users an easy way to express their opinion and agreement about a post without restricting their creativity or expressiveness. We were really happy to see that most users loved this new feature.
Part of the reactions feature was also a fully revamped emoji picker, which divides emojis into categories and also has a “Frequently used” section to improve the user experience. Nice thing is that we could re-use this new emoji picker in other places like the post creation process.
Building on top of reactions, the next major feature we tackled was Polls. Polls basically work like reactions from a technical view, except that they use numbers instead of emojis. Thanks to being able to re-use this we could implement polls extremely fast because we only needed to focus on the UI.
Notifications
The single biggest new feature since the hackathon is the new notifications system. You now get a notification when someone follows you and/or comments on one of your posts or comments. This was quite hard to implement because it presented us with a lot of challenges, especially regarding spam prevention. While the notifications are not perfect yet, we’re working on optimizing them based on community feedback.
Other cool stuff
We also made some experiments leveraging the data interoperability of SkyFeed since then. For example, a tool that mirrors a YouTube channel to SkyFeed or a SkyFeed-to-Hugo converter which allows users to automatically sync their SkyFeed posts to their personal blog.
We also switched to our new Handshake domain skyfeed/, fixed a lot of issues and introduced some quality of life improvements like being able to scroll on the whole page or improved and more predictable navigation.
Because SkyFeed is cross-platform, we published a public beta version for Android and tested an internal beta for iOS devices.
The future
We’re currently working on optimizing the user experience by adding a lot of small improvements here and there (for example combining multiple reposts) and also making the onboarding process for new users more straightforward and easy to use.
The notifications system will also soon be extended to support mentioning other users in your posts and notifying them. This will also come with the ability to block users to prevent unwanted distractions.
Another big feature is the integration of SkyMessage, which would allow users to chat with each other end-to-end-encrypted using direct messages.
More advanced features like topics (think hashtags or subreddits) and support for monetization are also planned.
Thanks
We would like to thank everyone for using SkyFeed and providing extensive feedback that helped us make it to what it is today! Also, a big thanks to the Sia/Skynet team for their work towards a decentralized internet without which we would obviously not have been able to build SkyFeed.
You can try out SkyFeed here: https://skyfeed.social
