Actifit.io Website Development Updates

in actifit •  3 months ago

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Looks good as a blog post, you may want to include code samples and explanations of coding choices if you want to make it more of a development article.
  • I used this link to review the code. You could use the same technique to simplify the commit list.
  • Great use of images to supplement the article. Lots of comments in the code.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

·

Thank you for your review, @helo! Keep up the good work!

thanks for @mcfarhat effects ! :) ♥♩♬
Actifit ♥ LOVE !

Posted using Partiko Android

·

곰돌이가 @bluengel님의 소중한 댓글에 $0.004을 보팅해서 $0.019을 살려드리고 가요. 곰돌이가 지금까지 총 3163번 $37.977을 보팅해서 $39.455을 구했습니다. @gomdory 곰도뤼~

·
·

고마운 곰도뤼~♥
행복한 ♥ 불금 보내셔용~^^

Posted using Partiko Android

Today i am going to update my first post on the website.....3 tokens...for free yeh....

Posted using Partiko Android

Great updates, i will have a look later when im logging my activity

Posted using Partiko Android

·

Thank you @paulag, feel free to reach out with feedback!

Great job on the update; not done reading though.. I’ll continue later. Nonetheless I am so looking forward to a nice implementation and hopefully no bugs to encounter. Thanks for your continuous efforts. You’re awesome 😎
Have a great day now ⭐️👌

Posted using Partiko iOS

It's looking really dope! Easy commenting and curating are must-haves for the future of the AFIT token...

Hi, @mcfarhat!

You just got a 0.07% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

This post has been included in the latest edition of SoS Daily News - a digest of all you need to know about the State of Steem.

Hey, @mcfarhat!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @mcfarhat! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You got more than 2500 replies. Your next target is to reach 2750 replies.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Valentine challenge - Love is in the air!

You can upvote this notification to help all Steemit users. Learn why here!

Hi @mcfarhat!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server