Contest Hero Development Update (Create contests with comment entries, Feed Sorting, FAQ, Comment Component)

Repository

https://github.com/tobias-g1/contest-hero

Contest Hero is a new app built on top of the Steem Blockchain that allows you to easily create, manage, find and enter great contests on the Steem blockchain. The following is an update surrounding the development of Contest Hero. If you want to take a look at the site, you can use the link below:

https://contesthero.io

Here's an overview of the changes in this update:

New Features

1. Ability to create contests with different entry methods (comments or posts)
2. Additional parameters in GET contests request to allow sorting
3. Ability to sort feed by newest/oldest contests
4. An indication of success or failure via a toast notification
5. Frequently asked question area

Improvements

1. Adjustments to feed layout in line with the ability to sort feed
2. Added tooltips create a contest and edit contest page
3. Move comments into own component
4. Minor CSS improvements throughout
5. Remove Dist from Repo & add to .gitignore

Bug Fixes

1. Resolved issue with <pre> not wrapping in the parent container
2. Resolved issue with image styling

The changes mentioned above relate to the following pull request:

https://github.com/tobias-g1/contest-hero/pull/84

Ability to create contests with different entry methods (comments or posts)

The most important feature in this was release was the addition of the ability to create contests with differing entry methods. Previously the only way for a user to enter a contest was to make a full post on the blockchain. I have now added the ability to make entries via comments. In order to access this feature, a contest creator is able to select their entry method on the contest create and edit pages. Based on the contest creators selection a contestant will see an indication of the entry method on the enter contest button shown underneath the contest post. This can be seen in the image below:

This feature was so important because a lot of giveway style contest don't require a full post and a comment is enough, with the addition of the feature I believe it will aid the creation of 'casual' contests.

The following shows how this is configured in the create contest page:

In order to implement this feature there were two main changes, firstly I needed to adjust the create contest page with the ability to create both comments and normal post. This was a simple change by pinning the user's selection against the following code:

let parentAuthor

let parentPermlink

let entryMethod

switch (this.contestData.entry_method) {

case 'post':

parentAuthor = ''

parentPermlink = this.finalTags[0]

break

case 'comment':

parentAuthor = this.contestAuthor

parentPermlink = this.contestPermlink

break

}

As a comment is dictated based on whether or not a parent author and permalink is provided all I needed to do was take the value of the user's selected entry method and based on whether or not it was a comment or post, set the parentAuthor and parentPermlink as the contestAuthor & contestPermlink. Based on the users selection I also set the contest entry method in the DB to allow other pages to read this.

Following this, I needed to make an adjustment to the view entry page to load the comments in the same way it would a standard post. In order to this, I created a new method within my dsteem.js mixin as follows:

getSingleComment: function (author, permlink) {

return client.database.getDiscussions('comments', {

tag: author,

start: permlink,

start_author: author,

limit: 1

})

From here I would then call this method based on the entry method associated with the contest upon loading of an entry.

The above was completed in the following commit:

https://github.com/tobias-g1/contest-hero/pull/84/commits/4a3a413e9374a575680bec0c97abea946db12968

Frequently asked question area

With the hope to create an easy to use and valuable experience, I created a quick frequently asked questions page that will allow a user to find some useful information about Contest Hero.

The above was completed in the following commit:

https://github.com/tobias-g1/contest-hero/pull/84/commits/c71ecbf9d356d881f488fb91588870ed350562f9

Indication of success or failure via toast notification

Previously there was only limited feedback as to whether or not the action and user carried out was successful or not. In order to aid this experience, I did some work to handle the errors on the calls to the database in a more consistent way, as well as firing a notification upon success or failure. An example success message can be seen here:

this.$notify({ title:  'Success', message:  'Your contest has been created', type:  'success'  })

The above was completed in the following commit:

https://github.com/tobias-g1/contest-hero/pull/84/commits/367339d723196b8f1655635d067f189eadb33ba8

Move comments into own component

In previous commits I had created a duplication in relation the comments sections shown on both on the contest and entries page, in order to help improve the maintenance of the code going forward I moved this into a single component which can be found here:

https://github.com/tobias-g1/contest-hero/blob/master/client/src/components/comment-panel/comment-panel.vue

Now both the entries and the contest pages use the same component and simply passes in the parent post and the comments will be gathered within the component. The following shows an example of how this component is referenced in these pages:

<commentpanel  :post="post"/>

The above was completed in the following commit:

https://github.com/tobias-g1/contest-hero/pull/84/commits/d62538041ff93e36b379b61aeb96dac312bcce15

Ability to sort feed by newest/oldest contests

Finally, another welcome addition to the site is the ability to sort the contest feed by newest/oldest contests. This will provide the basis for more detailed filtering in the coming months and will provide benefit to the users when more contests are created.

In order to complete this I needed to make a change to contests controller and routes to allow a sort method to be passed into the request, the following shows an example of the new contest route:

router.get('/all/:sortby', contest_controller.get_contests);

Based on the parameter passed into :sortby it will then sorted the results by either newest or oldest based on the _id key from the results. This can be seen here:

exports.get_contests  =  function  (req,  res)  {

  

let  sortmethod;

  

switch (req.params.sortby) {

case  'oldest':

sortmethod  =  {

_id:  1

}

break;

case  'newest':

sortmethod  =  {

_id:  -1

}

break;

}

  

console.log(sortmethod)

  

Contest.find({},  function  (error,  contests)  {

if (error) {

console.error(error);

}

res.send({

contests:  contests

})

}).sort(sortmethod)

}

The above was completed in the following commit:

https://github.com/tobias-g1/contest-hero/pull/84/commits/380c70f7547149b7334e8520d55fd6d8a8679585

What's next?

Although I previously planned to create these in this release, the next items I plan to work on is:

1. User Profile with entries and contests
2. Ability to edit entries

I plan to open Contest Hero up to the bug-hunting category in the coming days, so expect that a few bugs will need to be fixed based on the contributor's findings. With that said, I believe the site is nearly ready to use and plan to work on getting Contest creators involved with the site in the coming week.

GitHub Account

A link to my GitHub can be found here:

https://github.com/tobias-g1/