Repository
https://github.com/actifit/actifit-landingpage
Introduction
As we move forward with further improvements on the UX and UI on actifit.io, we present here more development updates implemented therein. The core of the update revolves around creating our own comment system, allowing the display of comments, interaction on posts and comments alike, but also bringing stronger capabilities to the post view display including upvotes, as well as an additional reward system, related visual improvements, and new editor implementation.
Technology Stack
The website is built using Vue.js.
Work Done:
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Implementing Comments System & Inner Post Upvotes:
- Since its inception, Actifit.io has been missing the capability to display comments on posts, making the capability to view community's responses quite limited to the poster, but also requiring the use of other interfaces to view and respond to comments. We decided it is time to make this fully functional, via creating our own comments system including capability to reply to the post and/or comments, in a tree like structure that allows dynamic responses.
- In order to do that, we leveraged the capabilities of components under Vue, whereby we created a recursive component
Components.vuethat can get plugged into our report view displayReportModel.vue, and receives a multitude of entries relating to the comments of the post at hand. - The data was sent as props to the child component(s), so as to properly render all sub-levels of the comments in a tree like format. We also implemented an indentation approach to allow proper formatting of comments.
- To fetch all layers of comments onto the current post, we could not rely on the simple
getContentRepliesas it would just fetch the top level comments, and needed to utilize thegetStatefunction instead, and filter out the main post as it gets returned via the post as well. Then we had to convert the whole structure into a proper tree like structure so as we can feed it to the new component created, and then it gets auto-rendered properly. - To support replies, we had to also embed a markdown editor as a placeholder for post replies. Once a proper reply has been sent (using steemconnect.comment function), we would display a placeholder for the actual comment, and in 10 seconds we would query the blockchain to confirm the new layout of the comments as a whole including timing, upvotes, and all relevant details.
- Add to that, we now have in place a proper upvote system from within the post, applying to both posts and comments, but also displaying info relating to pending pay
Implement New Reward Systems
In order to further incentivize users to use actifit.io, we implemented 2 new reward systems, whereby users are rewarded daily to do 2 activities:
Edit post using actifit.io: Whereby users who edit their actifit post on our website will be rewarded with 3 AFIT tokens. This only applies once per day.
Upvote at least 3 posts with 20% upvote value: This also rewards the user, in addition to their STEEM and AFIT tokens resulting from the upvote process, to earn an additional 3 AFIT tokens, daily.
Implement New Editor: Steem-Editor
Following the recent announcement by @reggaemuffin about a cool new editor that @buildteam and himself worked on called steem-editor, we went ahead and gave this a try together, and the editor was definitely remarkable, easily pluggable, and we were able to integrate it both as an editor and as a markdown renderer for posts and comments alike.
While we faced minor glitches in few cases in markdown rendering, we will be moving ahead and launching it to our official actifit.io to replace the current editor and rendering engine being used, following few additional tests and hopefully with those minor glitches fixes.
This actually helped us drop some of the regex expressions we worked on before, yet the ones for displaying a link to the user's Steem account still apply.
Post View
Comments View
Various Additional Changes/Fixes
We implemented the following additional changes:
Fixes for the changes made by Steemit inc to Steem nodes, namely the deprecation of the
idattribute for posts, and switching topost_idinstead, as well as the deprecation ofnet_votesand replacing it withactive_votes.lengthAdditional notification for non-logged in users when attempting to upvote.
Removing expired competition notification and notice.
Fixes for mobile display of referrals & wallet screen
Additional general layout & wording fixes.
Roadmap
Further continuous improvements will be done on the actifit website, including a potential revamp of the main page content, adding some additional content pages, a complete fitness profile page, more user rank screens...
How to contribute?
You can chat to us on the official actifit discord, or to me in discord private @mcfarhat#6013.
Contributions are accepted as pull requests to the official github repo.
We are having continuous tasks assigned to different contributors to our project. More official tasks are continuously announced :)