Domain Steem with JavaScript: Lesson #6 - Account Authorities
Hello everyone! Today I am here to participate in the Domain Steem with JavaScript course by @alejos7ven. It is about learning the Account Authorities and Final Project. If you want to join then:
.png)
Present your final project to the entire community, it must fulfill at least one of the main functions that you proposed in your previous task.
It is really interesting task in this week in which all the students have to show the project related as proposed in the previous lesson. So I proposed a Real-Time Analytics Dashboard in the previous lesson. So seeing that previous proposed project idea I will develop a Real-Time Analytics Dashboard with the following features:
- Price Ticker of Steem
- Price Ticker of SBD
- Trending Tags
- Active Witnesses
- Latest Posts
- The account data of the user with search bar
I will use the following tech stack for the preparation of the project:
- HTML
- CSS
- Steem API
First of all I will start building the project starting with the structure of the web view.
This is the header for the website of the project where there are these elements:
- Title
- Price labels
- Search bar
- Search button
This is the body of the website which have the following attributes:
- Account Details with sub data:
- Voting Power:
- Reputation:
- Account Created:
- Posts:
- Trending Tags
- Active Witness Accounts
- Latest Posts
- Button to fetch posts
This is the footer of the website which has the information about the builder who is me.
This is the final interface of the project after applying CSS. I applied green colour to the background, white colour to the headings, then again green colour to the headings of the data containers, white colour to the search bar and black colour to the buttons. The sub cells of the account details data has light grey colour which makes them look prominent.
At the end I have used Steem API to make the functions and add their functionality to the application to make it dynamic.
Here I have implemented the first function to fetch the live price data of STEEM and SBD and display it on the screen.
I added the filter function to search the user from the blockchain and then fetch the details of the user to display.
After writing my name in the search bar I have clicked the search button and it has returned me the required details as shown in the picture. There is the information about the reputation, voting power, account creation date and time and at the end there are the number of the posts published by the user. I have published 4780 posts and it is showing the data correctly.
Here in the other sections the data is also visible and the first sections shows the trending tags and the second section shows the active witness accounts in the blockchain who are producing the latest blocks. In the third section there are the number of the latest published posts. Each posts has its own link as well and we can access that latest posts by clicking on the link.
Here is the live working of the project. You can see that the project is displaying the trending tags, the active witnesses and the latest published posts as well the data of the account for the user searched by the search bar.
Instructions to use:
It is very simple to use this dashboard. We need to enter the website and it will automatically fetch and show the data for the price, tags and active witnesses accounts.
And in order to search the account details of the user we need to add the username in the search bar and click on search. It will fetch the related account details.
In order to fetch the details of the latest published posts just hit the button named Fetch New Posts and it will fetch the latest posts published on the blockchain excluding the comments.
GitHub Repository
