Repositories
https://github.com/steemgigs/steemgigs
https://github.com/steemgigs/steemgigsServer
This post is partially related to the following task request, however, I conducted some further work that I believe would benefit both the completion of the tasks as well as provide the site an easier to use experience.
Introduction
It's been a little while since my last update surrounding SteemGigs, but behind the scenes, I have been able to move the site forward slowly. The following post helps to show some of the latest changes and improvements made to SteemGigs.
Pull Request
The work that I carried out on SteemGigs can be found in the following pull requests:
https://github.com/steemgigs/steemgigs/pull/99
and
https://github.com/steemgigs/steemgigsServer/pull/5
The site is live at the following URL:
New Features/Improvements
The items I completed from the task request were as follows:
- Enhanced Search
In addition to the above I completed the following:
- Add the ability to set as free when creating a gig
- Resolve issue surrounding title display on gig card
- Images not marked up using markdown will display as images
- Search cards will pull from the blockchain
- Advanced search options with filtering
- Autosave posts and comments
- Ability to reblog from the post preview page and only ability to reblog other user blogs
- Add a page for privacy policy
- Basic FAQ area with few questions and answers
Enhanced Search
The main feature completed within this release was the ability for a user to search using a selection of different search options, the aim of this was to provide a user with more control in finding the gigs they need. The search page now has the following search options:
- Min & Max Price
- Search Text
- Category & Sub Category
- Currency
In combination with this all of the results can now be sorted using the following sort options:
- Lowest Price First
- Highest Price First
- Newest
- Oldest
Prior to this release, the search page looked like this:
As you can see from the above, a user had the ability to search using just search text. Upon initiating a search a user would be shown a list of gigs related to their search query. In the previous release a the gigs were not pulling data from the blockchain, this is why the Steemgigs logo is showing as the image for all searches. Following this work being completed the search page now looks like this:
In order to get the enhanced search feature, there were two main pieces to consider, first how the results would be surfaced and secondly how they would be displayed on the page.
In terms of the server side search, the search is carried out using an aggregation within MongoDB. The code surrounding search can be found here:
https://github.com/steemgigs/steemgigsServer/blob/master/src/controllers/search.controller.js
As you can see within the search method there are a number of optional matches within the aggregation, this is because I plan to replace a number of the get post calls within the code to overall reduce the maintenance of controllers. To simplify my explanation, the following shows an example of the search end to end based on a request to the server. If a request is made with the following body:
The following pipeline will be created:
once the posts have been gathered from the database, I then go and get the blockchain data for each post, this can be seen in the following promise:
Once this promise is resolved I then send the results in the response, this a combination of the data found within the data and the blockchain for a particular post.
Note: In writing this up I realized I don't reject the promise at any point, I will resolve in a future release.
In order to bring this into the UI I created a new component here:
https://github.com/steemgigs/steemgigs/blob/develop/src/components/search/search-panel.vue
This component handles both how the search panel will look and be displayed within the search page combined with how the request is made.
Autosave Posts & Comments
One of the features @surpassinggoogle requested was the ability for posts and comments to be saved when a user either navigates away from the page or loses connection. In order to allow for the autosaving of both posts and comments I created a mixin that could be reused throughout all of the different post & comment editors within SteemGigs, the mixin can be found here:
https://github.com/steemgigs/steemgigs/blob/develop/src/mixins/form.js
however, the items of importance for this feature can be found here:
In the above the there are 3 main methods, Create/Update, Get & Delete. These methods are commonly used on change of the post and comment editors to allow for a draft to be saved between refreshes or navigating away from the page.
Other Items
In relation to some of the other features added you can use the following links to quickly access the code changes related to these changes:
| Feature | Commits |
|---|---|
| Privacy Policy | Here |
| Basic FAQ area with few questions and answers | Here |
| Images not marked up using markdown will display as images | Here |
| Ability to reblog from the post preview page and only ability to reblog other user blogs | Here |
| Add the ability to set a free option on create gig | Here |
What's next?
Next, I plan to work on the following task request:
I have already mocked this up (will share with graphics in the next couple of days) and will begin to build this shortly.
GitHub Account
A link to my GitHub account can be found here: