Actifit.io Website Development Updates

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.vue that can get plugged into our report view display ReportModel.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 getContentReplies as it would just fetch the top level comments, and needed to utilize the getState function 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 id attribute for posts, and switching to post_id instead, as well as the deprecation of net_votes and replacing it with active_votes.length

• Additional 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 :)

GitHub Account

https://github.com/mcfarhat