We have been talking about the upcoming @travelfeed dApp for quite some time — now, finally, the first step is done and the preview of our frontend is online!
I had a call with @utopian-io CEO @elear back in October. He promised that if we would go open-source, Utopian would support our project and give us the opportunity to put out task requests, but first, we would need a code base. Utopian sent us a few talented developers over, and we settled on a team that is developing a great Steem dApp themselves and offered to develop the TravelFeed dApp for us. Initially, we had hoped to have a preview of the TravelFeed dApp ready for Steemfest, but when we had finally discussed the details with the developer team, Steemfest was over already. Shortly after, they cancelled on us. Luckily a second team of experienced Steem developers offered to take over — they told us weeks ago that they were already working on the dApp, then their main developer was travelling, and we haven't heard back from them ever since. We still hope that they will support us in the future. We are already way behind schedule and other travel dApps are popping up trying to "lure away" the solid community that we have built over the past year, so we cannot wait any longer. This is why I decided to write the write the codebase for the TravelFeed dApp myself.
Teaching myself Full-Stack Development
React is not easy to get started though. I followed some tutorials and built my first React app from scratch. This dApp was an approach to transform my photography website, that is currently using Wordpress as a backend and has not been updated in a long time, to use the Steem blockchain as a data source.
I had originally planned to learn the basics of React with this project and then take it as a code base for the TravelFeed dApp, but the code was so buggy and I could not get server-side rendering to work that I decided to start from scratch when I found out about the Next.js framework that makes SSR and working with React in general so much easier than using vanilla React. For the UI, I decided on the Material UI React components — I have been in love with Material design ever since Google first introduced it back in 2014 and I believe that it is a great fit for our dApp. I found the styling of the components quite un-intuitive though, so I included Bootstrap 4, not as React component but as good old plain CSS since I know many bootstrap classes by heart already.
Challenges and Decisions
A huge challenge I faced was implementing rendering of posts the same way as Condenser (steemit.com) does. Condenser is quite tolerant and renders more than just plain Markdown and HTML — for example, image links are automatically rendered and Youtube videos are automatically embedded. I tried implementing the HTML rendering module from the Condenser repository and failed, then I implemented the one from Busy (still very complex) that is based on the one in Condenser and has the same "special" features such as filtering for phishing links; That worked, but I must have done something wrong and it didn't bring the expected results, so I needed to write some custom regex (I am so bad at that...), but it is still buggy. I already asked about that on the Steem developers Discord without getting a reply, but I would really appreciate any advice on how to archive HTML rendering consistent to Condenser — with more and more Steem dApps created, a npm module for consistent "Condenser style" HTML would be a great help to developers.
In agreement with the team, I made some design choices: The TravelFeed dApp displays a "star" icons for posts that have been curated by us, but it does not display any upvote values, neither the amount of upvotes, instead it displays the amount of "miles" a post has received: Our upvote button is an icon of an airplane taking off, once Steemconnect has been added, users will be able to give between one and ten miles to a post. Each mile equals a 10% upvote. The payout of a post can be seen only by the author and only after 7 days, when the value does not change anymore. This system promotes perceived equality between users and avoids outrage over frustration over perceived unfair rewards, and we believe that it is much easier to understand for users new to Steem. Also, it makes for some cool metaphors to explain the voting system to newbies:
If you like a post, you can decide to travel there virtually and hit the 'take off' button to assign up to 10 miles to it. You can give out up to 100 miles every day, then you are running low on fuel and you will need more than one day to refuel. If a post gets lots of miles quickly, it's "taking off" and trending posts are "above the clouds".
Also, posts that do not fulfil the TravelFeed requirements (250 words) and comments written by blacklisted accounts (bot comments, spammers) are filtered out in the feeds. We are still thinking of filtering out generic curation account comments such as our own @travelfeed comments as well to have the comment area reserved for only human interaction.
Some bilingual Chinese posts were breaking the layout since these characters are wider, so the post grid currently filters out everything but English letters, numbers a few common characters. Once we launch the dApp, we will probably introduce a new policy for bilingual posts — even when they don't break the layout, they are extremely unpleasant to read.
I spend quite some time creating a pleasant UI and the frontend already has support for viewing post and posts by tags, blogs as well as the @travelfeed curationfeed and recent blog posts on the front page. Comments are lazy loaded, replies to comments are not displayed yet. No backend is implemented yet and neither is Steemconnect, so many buttons are just placeholders.
So, finally, here is the preview:
What is the project about?
Travelfeed is the largest travel community on the Steem Blockchain. On TravelFeed, you can discover great travel content by hundreds of independent travellers. We offer you a free blog hosted on the uncensorable Steem Blockchain and accessible ad-free through your own subdomain (feature under development). When readers like your post, they will hit the 'take off' button and assign miles to it. After seven days, you can claim the reward for your post in cryptocurrency.
Next, I will implement Steemconnect and features for logged-in users such as voting, commenting and creating posts. Once the codebase is finished, we will look for external developers via task requests and join forces with them to implement features that will make the TravelFeed dApp unique, such as filtering by location, a map view and storing bookmarks and drafts; We will also implement a backend for that.
How to contribute?
We are looking for contributors! If you discover an issue, you can raise an issue or open a pull-request. We will also be publishing task requests on Utopian describing features that we would like to see developed once the code base is finished.