Background
When I first joined steemit, I found it very frustrating not being able to search using multiple tags. Steemit currently only able to search by ONE tag at a time and the 'advance search' is just a google custom search. As for busy.org, it can only search by a single user name. So I did a bit of digging around and found that some people had actually looked into this issue, namely steemmts by @cryptofrench and the retired project by @kasperfred. Both of these projects used the now defunct steemdata service and steemians are now left without a proper search application. So, I took it upon myself to build a new multi tag search application using the dsteem library. So hello to Smults!
Repository
https://github.com/Alvin-Voo/smults
What is Smults?
Smults is an acronym for Steem MULti Tag Search. It allows users to search multiple tags (up to 5 tags) at a time. User can also mark the 'First tag as category' checkbox, such that all returned results will be in the category as the first tag searched.
TL;DR I have prepared a youtube video below for those who just want a basic intro, instead of reading this entire post ;)
I am going to go over into more details about the project below.
Search Bar
When users first click on the search bar, the drop down will show the 15 trending tags. These tags will be refreshed everytime the search page is refreshed. This is so that users will have a default list of tags to select from. To get the tags using dsteem library is simple:
const client = new dsteem.Client(STEEM_API);
const request = client.database.call('get_trending_tags', [
"",
MAX_TAGS,
]);
Of course, users can also search using their own custom tags. They just need to start typing and press 'Enter' to enter the tag when done. Maximum of 5 tags are allowed. The posts in the return results will contain the tags a user is searching for. The more tags users search with, the more specific the return results they will get.
The magic of searching tags
The core of this search feature is actually it's ability to filter those post which contains the tags provided, and to do that was actually quite straightforward. It did take me some head scratching and experimenting but once I figured it out, it just boils down to a single line of code.
//source tags should contain all the selected tags, regardless of the order
//if after intersect is equal back to the selected tags, means it matches
const ret = _.isEqual(selectedTags,_.intersection(selectedTags,tags));
where by 'tags' here refers to the tags in post,
and 'selectedTags' are users' search tags
Of course, what you are seeing here is leveraging the power of Lodash ;)
Tags filter and First tag as category
Just like in steemit.com, user will need to choose a filter before searching. By default the 'new' filter will be chosen. The rest of the filters should be quite familiar to any steemian.
A category of a post is determined by it's first tag. I added a little personal touch here by providing user with the option to search for posts which match the first tag (i.e. category). This is achieved by:
//if check box is ticked, check whether first tag equals to selected first tag
if(firstTagIsCategory){
if(selectedTags[0]===tags[0]) ret = _.isEqual(selectedTags,_.intersection(selectedTags,tags));
}else{
//source should contain all the selected tags, regardless of the order
//if after intersect is equal back to the selected tags, means it matches
ret = _.isEqual(selectedTags,_.intersection(selectedTags,tags));
}
User can now do more specific search for posts that only belonged in some categories; This just elevates the 'first tag' into a more unique position (i.e. I guess it's more useful to put your trademark as the first tag? For example, I see some artists consistently use 'elegance' as the first tag.)
Back to top!
A small unobtrusive button on the right corner that when clicked, will scroll you back to the top!
Ah.. it's always so satisfying to see the scrolling effect back to the top! =)
About page
There's also an about page for those who are curious.
Technology Stack
I used Next.js + Next-Routes for the Server Side Rendering (SSR) for React. Of course, there's no React without Redux. Here I used Redux-Promise and Redux-Thunk as middlewares. The component library is the elegant React Semantic UI library. There are also some nifty libraries that I will attribute here:
- dsteem - this project wouldn't have happened without dsteem!
- lodash - swiss army knife for data manipulation
- moment - helped me format the 'created time'
- remove-markdown - helped me format the markdown body
Road Map
There is a TODO list and some features that I want to try out:
High Priority
- Explore unit testing with Jest and Enzyme
Medium Priority
- [UI - Enhancement]Clickable author and category links
- [UI + Functional - Enhancement]Filter by author
Low Priority
- [UI + FUNCTIONAL - Potential Enhancement]Results order are haphazard. Sort results by ascending or descending time.
- [UI - Potential Enhancement]Sortable/Movable tags in search bar. Such that first tag can be changed.
- [UI + FUNCTIONAL - Potential Enhancement]Feeling lucky - Random filter + random (not so popular tags) tags search results.
- [UI - Potential Enhancement]It could be good if author reputation are displayed
- e2e testing
Other than the High and Medium priorities which I will follow up with, the Low priorities enhancements are mere ideas and not finalized yet.
How to contribute?
For those of you who encounter bugs/issues while using the application, you could either comment below this post or log an issue at the github page.
Same for those who want to contribute or have any idea/suggestion, please leave a comment below or log an issue at the github page by first writing '[FEATURE]' or '[SUGGESTION]' in front of the title.
Github Account
If you liked what I have done, please share this with your friend, and don't forget to follow me and upvote my post.
Thank you!