Significant UX enhancements have been made to bring a better Steem user experience to KURE. From follows to votes, more is being shown to bring great awareness of user and post data.

Flagging data was missing from the site. Seeing what posts are flagged is a valuable feature to have. Otherwise, you don't see that activity on Steem. Now an red flag icon shows up beside the payout value to indicate a flag, bringing greater awareness of Steem activity.

A flag icon does well to visually indicate a post has been flagged, but it doesn't tell us who flagged. A flag counter has been added to show how many users have flagged a post. Even of greater value, is that hovering over the count will show a popup list of the top flaggers by rewards removed.

Both upvotes and flag downvotes showed a popup with only 15 users. To enhance the user experience further and see all the voters, a modal window has been added to show all the user voting activity in a post. Just click on the counter for an upvote or flag, and you will get a modal window that shows the user name, avatar, their voting percentage and rewards applied to the post.

This feature is of such value to me, that as of last week I started to use KURE exclusively for all my activity, except for the wallet claiming of rewards which I have yet to develop.

In addition to the improvement on seeing voter data, follower data was also added. First with the follower and following counts, and then followed by a page for each. Finally, you can see who are the followers and who is following a user. You can also follow or unfollow users on those pages.

The last addition to KURE was to complete the infinite scroll functionality for all of KURE. The Communities page was missing the infinite scroll, but now it's there. With it's completion, now all relevant pages of KURE have the infinite scroll added.

Any feedback or criticism is welcome and appreciated. I am looking to improve the app and your experience using it.

What do you want to see next?

---

Repository

https://github.com/KrNel/kure

Site

https://thekure.net/

---

Index

1. What is KURE?
2. What's new?
   2.1 Added icon showing if a post is flagged
   2.2 Added flag count, user list and percentage applied
   2.3 Added infinite scroll to communities page
   2.4 Added complete voting list via modal
   2.5 Added the follower and following count to blog pages
   2.6 Added followers and following user list
   2.7 Added follow and unfollow actions
3. Pull Request / Latest Commits
4. Roadmap
5. Contact

---

1. What is KURE?

Kindred United to Reward Everyone.

A Community Platform and Curation Network Remedy for Steem

Do you want to find content that other people really value, based on topics that interest you? How?

Upvotes don't do it, because so many upvotes come from autovoting, autobots, or curation trails. You don't know if a vote for content is done by a real person, or some automation. The content isn't being evaluated when it's automated.

Plus, you can upvote so many things, which can be unrelated.

Imagine a curation network where people are interacting through community groups to share and value content, and you can really see what they value globally through various communities that people organize and collaborate together to build.

KURE provides a network hub for people to create their own community groups for evaluating content to curate. It will also develop into communities to create posts within.

Create your own communities and have others join to contribute. Make up your own criteria. Manage who can add curation links to your community group. Anyone else can follow your community and engage.

My goal is to make content easier for everyone to find by all of us sharing the content we like trough communities. Others can find communities they are interested in and see what is being curated within that community to also support it with upvotes, resteems and comments.

Maybe you want to share what you value, and get others to see it or support it, but don't want to resteem it, or want more people to see it. On KURE, the community you create and those who are involved in it will popularize content you value and allow others to see it. Another way of thinking about it, is it's kind of like having a custom community feed, based on a community that engages in creating it, rather than just one person.

KURE empowers the Steem community to coordinate their curation efforts through building community networks of their own.

---

2. What's new

Video Demonstration

---

2.1 Added icon showing if a post is flagged

Knowing when a post has been flagged is a valuable visual aid to have when looking at posts. Rather than gray-out and censor the content from visibility, I opted to add a red outlined flag symbol next to the payout to show that a post has been flagged for some amount.

When a post is flagged by anyone for any amount of Sp applied through voting power, the flag icon outlines in red will appear next to the payout value.

This is determined by looking for at least one voter who has applied a negative percent. Negative percentages are how flags are calculated.

The isFlagged variable is then used to show the Semantic UI React Icon element, with some spaces for visibility.

---

2.2 Added flag count, user list and percentage applied

I added some more flagging/downvoting data on posts. In addition to the flag icon appearing which is more visually attractive to indicate a flag on a post, there is also a flag count for the amount of flag votes or downvotes, plus the user name, weight of the vote and amount deducted from the post.

Looking at a post with a flag, you can see how many flags have been applied with the counter.

Hovering over a flagged or downvoted post will show the flaggers or downvoters, along with how much they have reduced the post rewards by and the vote percentage applied to do so.

The downvote count is obtained by sorting the active_votes by vote percentages less than 0, and then calculating the dollar value from the vote rshares.

---

2.3 Added infinite scroll to communities page

There was one part of the site that was missing infinite scroll, the main Communities page that is accessible from the menu. Now every page has infinite scroll on it

The infinite scroll functionality will load more data as you scroll down the page (if data permits it).

To add infinite scroll to a component, the window.addEventListener needs to have the scroll event added to componentDidMount. Don't forget to add the window.removeEventListener to componentWillUnmount.

When the scroll bar is used, the event calls the handleScroll function to check where the scroll is at. If it's at the last item in the data shown on the page, then the call for more data is made this.getGroupsData();

In Redux, the function gets the user info from the state. If there is no user data yet if they are logged in, the user name is obtained from a cookie if it's there. If not, then that means there is no user and a default of x is used.

The results are obtained, and the a check for result length is made to determine if there are any results. If there aren't, then hasMore is set to false. Also, if the result is less than the limit size, that means there is no more data to get and hasMore is set to false as well.

---

2.4 Added complete voting list via modal

Being able to see who voted on a post, as well as the rewards they allocate and the voting percentage they used is fun to have. When hovering over the vote count, there was already a short list to peak at the top 15 voters. Now there is a modal view added when clicking on the vote count which will show all the users who have voted on the post.

Instead of hovering on the vote count to get a small list, click on it instead, and a large full voter list will appear. It includes the user avatar, name with a link to their blog, as well as the rewards allocated to a post and the vote percentage applied.

In the modal ,the avatar is obtained from a steemit image URL for convenience, rather than getting the path to their image a longer way. The dollar vlue is calculated based on rshares times the ratio of total rshares relative to the total post payout value. And the vote percentage is simply divided by 10000 to reach a decimal value for the component to covert to a whole percentage value.

A header is applied which shows the total amount of votes, and then the list cacluated above is shown.

---

2.5 Added the follower and following count to blog pages

The number of followers an account has, and the number of users they are following is now added to the blog page for a user. Next will be to add the list of users for each, and then adding the functionality for following a user, and ignoring a user.

The blog page shows the followers and following count. Pretty basic.

The data fetching is done via Redux where the Steem chain is accessed to get the follow count for the specified user.

In the Posts component that deals with Steem, Blog and Feed pages, the Follow part is also dealt with. The followers and following counts are displayed with links to show the full user list.

---

2.6 Added followers and following user list

The Follower and Following pages are up and show who a user has as followers, and who they are following themselves. The user name and avatar is shown.

The followers list is the longest. By default only 100 users will be shown. To show more, scroll down and see the infinite load get more users to show.

The following page works the same way.

The follower and following pages use a small component to iterate through their respective arrays and shows each user as an avatar and user link.

The Redux store is where the data comes from. The user being looked up is required. Optionally, the startFrom letter or name can be supplied, which is also used to continue to get more data after the first 100 users are displayed. The limit is currently 100, but I made an add option to decrease or increase it slightly, although it won't be too useful to do so as going by 100 at a time with infinite scroll is easy and no one will notice the difference.

One thing to note, like the getting of posts, you need to increase the number of results by one on subsequent data fetches limit = limit + 1; because the new result has the same user as the old result set. So with 101 new results, the same user is removed from the beginning of the results with followers = followers.slice(1).

---

2.7 Added follow and unfollow actions

Being able to see followers and who one or yourself is following is good, but being able to choose to follow and unfollow is even better. If you want to clean up your following list, then you need to be able to unfollow people.

Click on Follow button and a spinner would show up. When it's done, the button will show Unfollow instead of Follow, meaning the follow was a success and you will now see that person's blog posts and resteems on your feed. If you want to unfollow someone, click on Unfollow and when the spinner is gone the button will be back to Follow.

The following of someone is done in Redux, where all that is needed is the user who wants to do the following, and the user to be followed.

Unfollowing works in the same way, where the user doing the unfollowing is required, as well as the user being unfollowed.

---

3. Pull Request / Latest Commits

PR 21

---

4. Roadmap

I'll be adding the follow/unfollow across the site, and some search functionality to make it easier to look people up. Plus I still need to add flagging posts and comments, although that's honestly not too important for me. Maybe also add a block layout for posts to show up in a larger single-column format so that there are 3 layout viewing options.

Working on:

• Improved UI/UX, landing page, code splitting, PRPL
• Liking Kurated post submissions in communities
• Rating Kurated post submissions in communities
• Tweak comments (limit to 20, show more option, max nested depth)
• Implement PRPL Pattern for better performance
• Viewing comments in their own page view
• Adding sort functions to the Home, Communities and Kurated pages
• About page
• Dark skin for the site
• Selecting posts to vote at a later time
• Improve Blog page, with rep, description and location
• Add a settings page
• Add nsfw filtering
• Add progressive image loading
• Payouts shown in different ways
• Flag a post
• Wallet features

---

5. Contact

If you want to contact me, you can reach me on Discord at https://discord.gg/ApUp4jJ, or email at [email protected]. I'm not really on steem.chat, but I think I get emails if you send me a message.

• Discord
• Email: [email protected]
• Site: thekure.net

Contributions can be submitted as pull requests to https://github.com/KrNel/kure

Peace.

---

Posted from KURE