Utopian Top 20
What is Utopian Top 20?
Utopian Top 20, is a web application built using node.js. The main functions of the web application is it displays the data of contributions to utopian.io based on number of comments, number of upvotes, and based on pending payout value of the contribution. The data is from the SteemSQL Database created by @arcange. Creating this app ea helps me in easily seeing latest quality and great contributions/posts/updates on Utopian.
If you want to skip the introduction, and see it in action you can check it out here:
https://utopiantop20.herokuapp.com
What Data does it contain?
It contains data of contributions to utopian in the last 48 hours, I have added 3 pages mainly first is the page which lists the Top 20 commented on contributions, next is the Top 20 contributions based on the number of upvotes. Lastly is the Top 20 contributions based on pending payout value.
The Top 20 Commented Page
Posts/Contributions with the most comments from the last 48 hours.
The Top 20 Upvote Page
Posts/Contributions with the most upvoets from the last 48 hours.
The Top 20 Payout Value Page
Posts/Contributions with the most pending payout value from the last 48 hours.
The author and the post title is hyperlinked, so clicking it will open a new tab where you can easily read now the post on steemit, also the author name is hyperlinked so you can easily click on it and follow the autor/contributor.
How is the Data queried
The data is queried by getting the posts which has the main tag which is 'utopian-io' then it gets the top 20 based on comments, upvotes, and post pending payout value. The contributions that it gets is from the past 48 hours from now. Here is a sample query yung sql this gets the Top 20 Commented on Contributions
select top 20
author,
title,
category,
url,
net_votes,
pending_payout_value,
children,
JSON_QUERY(json_metadata, '$.tags')
from
Comments (NOLOCK)
where
title <> '' and
parent_author = '' and
category = 'utopian-io' and
datediff(hour, created, GETDATE()) between 0 and 2*24
order by
children desc
If you want to create your own application that gets other tags as well just replace the category in the where clause. You can add for example 'philippines', or 'steemit' to generate the top 20 for the respective tag. You can find the queries of the application in the sql folder on the repository.
Technologies Used
- node.js
- express.js
- seriate for mssql
- bootstrap
- handlebars
How to Run Locally
Make sure node.js is installed
In the terminal or command prompt clone the repository
git clone https://github.com/renegade47/utopiantop20.git
Go to the project directory
cd utopiantop20
In the command line enter: npm install
npm install
Next In the command line enter: node setup.js
node setup.js
To run the app in the command line enter: node server.js
node server.js
Go to http://localhost:3000
Links
Github Proof
Posted on Utopian.io - Rewarding Open Source Contributors





Thank you for the contribution. It has been approved.
You should add the installation instructions also to you README.md. I opened up a pull request for that. ;)
You can contact us on Discord.
[utopian-moderator]
Thank you for looking into my contribution, just merged your pull request. I forgot to do add it. Thank you very much :)
This is a great contribution, I agree you can browse the top 20 latest top contributions faster with the app you have created.
Yes, I made it as one of the main problems that it solves, my day would not be complete if I have not read some awesome utopian contributions :)
Really,, very informative.
Thank you, what do you think? how can it be more improved?
I wish I could understand how to make this stuff!
You can, just needs some learning I suggest courses on Udemy that is where I learn most of the stuff like this :)
Woo! I hope it has courses for dummies xD
Hey @vallesleoruther I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x