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.