Introducing Contest Hero [0.1.9]

in #utopian-io6 years ago (edited)

Group 128@2x.png

Repository

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

About Contest Hero

Contest Hero allows you to create, manage and enter contests on Steem. It's clear to see that there is a large number of users on the Steem blockchain who take part in and/or create contests regularly. Contests provide users the ability to get to know one another, shows their talents and overall provide value to the blockchain. Contest Hero was created to help provide users with more tools when creating and entering contests.

Currently, there has been one release of the site, within this release the following features have been created:

  1. Feed of contests
  2. Ability to create a contest
  3. Ability to set a deadline for a contest
  4. Ability to enter a contest
  5. Ability to view the relationship between entries and contests
  6. Ability to log in via SteemConnect
  7. Ability to vote on a contest
  8. Ability to view entry posts
  9. Ability to view comments related to post
  10. Ability to vote on comments related to post

All of the features mentioned above can be found with the following pull request:

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

Some of the features above can been seen in the following example contest:

https://www.contesthero.io/view-contest/tobias-g/example-contest-ch-b279d0c40

and an example entry:

https://www.contesthero.io/view-entry/tobias-g/example-entry-61252996481000000000

Here's a little more information about the features mentioned above shown in context.

Contest Feed

The contest feed shows all of the contests that have been created on Contest Hero, it's looking pretty bare at the moment...

image.png

View a contest

The view a contest page, this allows you to view a contest that has been created on Contest Hero, it shows the contest title, the contest body, the deadline of the contest, who made the contests, and a list of associated entries.

image.png

Create a contest

The create a contest page allows you to create a post in the form of a contest, it allows you to configure a contest title, deadline, contest type, contest body, and tags.

image.png

View an entry

The entry view page allows you to quickly view an entry to a contest that has been created on Contest Hero.

image.png

Technology Stack

The site purely client side and is built using Vue.js, some notable libraries include:

  • dSteem (mainly because there is an issue with steem.js when using the VueCli
  • Vue SteemConnect for easy integration of SteemConnect
  • Element UI as a general UI kit, I introduced this as I didn't want to style the forms or create the validation, I may swap this out for another kit or just use custom CSS throughout, but for now, it works. You will see that the majority of the CSS is from scratch anyway.

Roadmap

The following are a few things I've got planned for future releases. There are quite a few little pieces I would like to clean up, this includes both CSS and refactoring a few areas of code duplication

  1. Ability to select winners
  2. Ability to randomly select winners
  3. Ability to allow the community to vote for a winner
  4. Ability to edit a contest
  5. Ability to edit comments
  6. Enhanced Feed
  7. Image Upload
  8. User Profile & Wallet

How to contribute?

Whether you experienced with Vue.js or not feel free to get in touch if you like to contribute to Contest Hero, feel free to contact me via discord (tobias-g#123) or open an issue in the Contest Hero Repo for discussion. I will open this project up to bug hunters in a few more releases and will likely be looking to a few other categories for a few different task requests.

GitHub Account

A link to my GitHub account can be found below:

https://github.com/tobias-g1

Sort:  

Thanks for the contribution, @tobias-g! It looks amazing already, I'm actually very impressed - well, I shouldn't really be surprised as I knew beforehand that you were a CSS god.

The amount of work and features that you have put into this first contribution is crazy - amazing job! It's a great example for other contributors as to what is a quality contribution. I'm really interested in using it when the need arises and seeing what kind of contests others come up with. Definitely choosing this as a staff pick, can't wait to see your future development contributions!

A couple of remarks:

  • I tried logging in with a test account and it would just say "You're being logged in, please wait a moment." It works fine when I log in with my main account, so I have no idea what the problem is.
  • It wasn't immediately clear to me what the three icons in the header are after I logged in. Maybe adding a title to it so you can see what they are when hovering over them is a good idea.
  • On your test post the link to the contest doesn't work because it's missing a # in the URL. I haven't really looked into Vue.js much yet, but I think you can remove the # from showing up in URLs and iirc it's recommended to do so (I could be chatting complete shit, I don't know).

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Awesome feedback, thank you.

I really wanted to build a working product before posting anything, it turns out there is a lot of little things I didn't expect along the way, but it's coming together nicely. This is one of the first things I've built with Vue, so all in all I know there are a few things I need to improve, but it's coming together well. Few more releases and I'll try to build the user base a little more.

In terms of your additional feedback:

I tried logging in with a test account and it would just say "You're being logged in, please wait a moment." It works fine when I log in with my main account, so I have no idea what the problem is.

That's strange, is an error being thrown? I've used two different accounts when testing and didn't see anything like that. Is it logging in via SteemConnect ok on other sites?

It wasn't immediately clear to me what the three icons in the header are after I logged in. Maybe adding a title to it so you can see what they are when hovering over them is a good idea.

Good point, my plan was to revisit the navigation in a later release as I think there will be quite a few new things to add. With that said you're right, something as simple as a hover over will help with that. I have added that in now :)

On your test post the link to the contest doesn't work because it's missing a # in the URL. I haven't really looked into Vue.js much yet, but I think you can remove the # from showing up in URLs and iirc it's recommended to do so (I could be chatting complete shit, I don't know).

100% needed to remove the # from the URL, wasn't really sure what it was, but after looking into it a little more.

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

Changing this to the router to mode: 'history' and then adding https://github.com/bripkens/connect-history-api-fallback to server.js seemed to resolve this nicely. Again I don't know much about this, but somebody reading may have a similar issue and haven't bothered to read the docs like I didn't before you reminded me hah ;)

I put both of those things live a moment ago with a few other fixes I hadn't released yet, thanks again for the feedback :D

Thank you for your review, @amosbastian!

So far this week you've reviewed 13 contributions. Keep up the good work!

Looks like a project that could come in useful. From what you say, it remindsme a little of an extended version of the steem-bounty.com website.

Just a short sidenote: I didn't see you mention things like categories and tags (or maybe I missed it - if so, sorry)

As the owner of the @newbiegames account I can tell you there are a whole lot of contests going on. By separating for example the writing contests from the Steemmonsters contests and the drawing contests, users will have a much better experience

Posted using Partiko Android

Thanks for your reply, in terms of tags/categories currently the site supports the following categories:

  1. Writing
  2. Design
  3. Giveaway
  4. Photo
  5. Other

This is done via tags and allows the category to be set in the contest creation and then the feed can be filtered its respective category.

Also great to see that you think the site could provide value, that's what I was hoping to achieve from this first development update. I think there is a lot of other features that can take the site forward, but as you can imagine it's a long road.

In the next couple of weeks, I hope to release a new version that cleans up a few bugs and provides a few other key features and then I will start to push it around a little more. With that said, the first version does a working prototype that does all the features mentioned in this post. You can check it out here:

https://contesthero.io

Note: It's pretty bare at the moment in terms of contests and without users, part of my goal to provide visibility to smaller contests cannot be achieved, but definitely shows where I'm starting from :)

@simplymike, you should keep an eye on this cool project!

Hhanks for the heads up, @wizardave

Posted using Partiko Android

As a weekly contest runner, this looks like an interesting concept! When do you think it will be ready for action?

Shouldn't be too long, the ability to create and enter contests has already been implemented so from that respect it's good to go, the aim is to get a few more features along with some bug fixes done in the coming days/weeks and then it should start to offer a real advantage over creating your contests directly on steemit or busy. I will post about the new features when they're done, so stay tuned :)

I like this @tobias-g. I'll love to be a part of your project. I'm a copywriter. Just in case there's any work I could do. Thanks.

Hey, @tobias-g!

Thanks for contributing on Utopian.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the development category on Utopian for being of significant value to the project and the open source community.

We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Hey, @tobias-g

Thank you for your contribution

So far you've submitted 25 contributions on Utopian. Keep up the good work!

Your 24 contributions have been appoved and upvoted by Utopian

Here is your contributions details..

  • Bughunting : 21
  • Development : 1
  • Graphics : 1
  • Ideas : 1
Your total payout for 24 contributions is $ 573.39

Upvote chronicled's comment to Support!

I like the idea of providing stats about a contributor, but it would provide more value if this was remotely accurate, I realise that the data is being pulled from utopian.rocks, but if you didn't know already. Utopian.rocks only hold part of the total number of contributions that a user, it doesn't hold contributions prior to the front end being down. I would estimate that I have 4 times that amount of contributions tbh. Might be better to look for an alternative way to grab that data if you want it to be accurate. I'm sure there will APIs available in the future which makes this easy, but could be grabbed from the blockchain with tools that are currently available.

Again nice idea, but just my thoughts...

Hi @tobias-g
Thanks for reviewing and reporting to us, will work on it.

Nice website, it will make it much easier to find contests on Steem, especially for newbies. I'm looking forward to it.

This post is feature on my daily news (in Chinese :D) for today.

Greetings from Brussels, @joythewanderer


Your articles seem interesting to me.

Hi, @tobias-g!

You just got a 5.64% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

That's pretty cool!

PS: you could consider removing the white flashing between changing contests.

Thanks for the feedback, although I hadn't really noticed it until you mentioned it I agree it creates a bit of weird look at the moment. When I originally created it there were quite a few test posts I had made so it wasn't noticeable. (it's the loading blanket showing and hiding really quickly as there is no data in the other contests). Will take a look when I'm running through a few other fixes :)

It feels really good! Keep it up!

Ohhh this sounds interesting since there are a lot of contests in the community. Awesome job.

Posted using Partiko Android

Very cool! I see many contests and love that this is the case here, hopefully people find this tool useful. Cheers!

I am not really into contest like that but with the provision of this I am more than happy and willing to start a strategic planning on how to join various contests that are necessary and helpful for growth. This is really incredible and thanks to @abh12345 for resteeming this. I am gonna share it too.

Hey, @tobias-g.

There are certainly many contests running on STEEM, and having a (dare I say it) centralized location for them, in my mind, would be beneficial. I guess time will tell what others think about it, not only from what they say, but what they ultimately do.

Looks like you've got plenty of features implemented and more coming. I seem to be having trouble loading the page in Firefox.

Do you happen to have a goal in mind, if not a clear deadline, as to when this might be up and running with all the features you plan to put into place? No hurry, but my guess is you'd like to have it ready to go (bug free, of course) within a couple of months or so, if not sooner.

Thanks for your feedback, I really appreciate it!

Strange you're having trouble on Firefox, I see there are a few layout issues but it seems to load. Some of the links in my post were broken due to a fix I did in relation to the Utopian moderator's feedback so that might be why some didn't load. https://contesthero.io should work :S if it doesn't and you have the time it would be great if you could add an issue and some extra details to an issue on GitHub https://github.com/tobias-g1/contest-hero/issues. In terms of the layout and other bugs I can replicate on other browsers I will resolve those tomorrow. As this is a first version the majority of my testing has been done on Chrome, but will up my game with other browsers to make sure everything is running smoothly.

In terms of a goal, I would hope that there would have the ability to select winners and edit contests and entries done sometime this week (edit contest is basically finished locally already) and from there I think there should be enough to start pushing a few contests of my own to get a few other people using the site. Like you say I will want to have it bug-free to, so I'll likely open it up to the bug hunting whitelist at Utopian to see if they can help speed up that the process up, but overall shouldn't be too long getting those bugs ticked off. So long story short, it should be weeks rather than months to deliver the items mentioned and getting something everyone can enjoy up (note: the main function could be used already and creating contests and entries should work as expected, minus the mentioned above :)) Stay tuned as more features will be coming soon :)

hey, @tobias-g.

Okay, so if all goes well, weeks rather than months.

I've tried the link in Chrome, Safari and Firefox now and it just times out. I'll try to add that to the github issues link you provided but I'll need to set up an account there first. Not sure exactly what I would say other than it's not loading in any browsers I have. I'm on a Mac, too, if that makes any difference.

I will also keep checking back periodically to see what progress there may be. I don't know how many contests I'll be making personally, but it will be great to see what others are doing.

This would be a great project. I am hoping to come this soon. Will it be opponent of steem-bounty.

Hmmm. I run a weekly contest that doesn't require a post to enter, you just need to comment on the post.
You might work in a way for them to select if it is a post based contest or a comment contest. You couldn't do it on the steem chain I don't think, you would need an additional DB to track a few things. Which might be good for some user settings. On that same note a feature to save a contest template could be useful as many contests are recurring.
Another thought at least to get going, possibly a couple dropdown filters with some of the contest tags in them. That way you can get some contests that are already live I would suggest may be a primary filter then a secondary to narrow it down a little.

this is so helpful and interesting. thanks for this :)