Web: As a user, I want to sort and filter the bounty list by technical stack / keywords

[mbeacom]

As a user, I want to sort and filter the bounty list by technical stack / keywords.

Description

Per https://gitcoincommunity.slack.com/archives/C8E45J5D0/p1517417702000337
A user should be able to filter and sort bounties by technical stack and relevant keywords (python, go, javascript, etc).

Possible Implementation

Add sort and filtering options by keywords populated from Github.

Child of #1131.

[owocki]

note: you can do this via the search field up top... but it may make sense to make it into a formal filter field on the left

[owocki]

gonna bounty this.. if you are the hunter, please do the bounty in two steps:

1. propose a few ux options
2. code it up and submit as a PR

[gitcoinbot]

__This issue now has a funding of 0.04 ETH (44.47 USD) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $12213.36 more Funded OSS Work Available at: https://gitcoin.co/explorer

[gitcoinbot]

__Work has been started on the 0.04 ETH (44.86 USD) funding by__:

1. @KennethAshley

__Please work together__ and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $12495.28 more Funded OSS Work Available at: https://gitcoin.co/explorer

[KennethAshley]

@mbeacom @owocki not sure who to talk to about this issue. I looked into getting popular keywords from Github and other sources. Issue with that is those keywords might not match with the keywords from the bounties. Another option would be to query the boundaries and get the top keywords then display them on the left and in the sort bar. What do you guys think?

[owocki]

There is a Keywords table you could pull them from

[KennethAshley]

@owocki this?

[owocki]

i meant the Keywords table in the gitcoin database.. where is that screenshot from?

[mkosowsk]

HTML and CSS as languages!? Clutching my pearls over here 😂

[KennethAshley]

@owocki oh. if you preform a search on github it will list out popular languages.

[mbeacom]

@KennethAshley Are you still interested? Anything I can answer regarding this bounty?

[KennethAshley]

@mbeacom Yea still interested. Been quite busy but im gonna take this soon. If anyone takes this before me i'll understand!

[D3RPZ1LLA]

I'll take this one.

[D3RPZ1LLA]

Here is my purposed UX design:

This design is to replace the search and filter UI at http://gitcoin.co/explorer
@mbeacom @owocki

Let me know what you guys think. I went a bit beyond what a $45 bounty is worth but the page needed it. I'll be using this to compliment my Front End Engineer application to your company and others.

• All existing UI elements are still there but are restyled
• The purple and pink colors are the same as those used on the homepage
• Adds a new multi-select field for types of "tech stack"
  
  
  
  • Colors are based on the colors used on github to indicate language type
  
  
• Sorting is now designated with an underline

Default State

Tech Stack Selection

• Selected stack types are Tokenized and are deselectable via their "X" or selected them again from the dropdown
• In the dropdown, stack types are selected are emphasized.
• Making a selection or clicking away collapses the dropdown
• Dropdown items can be filtered if the user begins typing their desired input

Sorted

• Click the attribute to sort on to sort
• No UI distinction between Ascending or Descending on an attribute
• All sorts begin Descending. Can be clicked again to invert.

Mobile

• All features are mirrored on the mobile version

[owocki]

hey @PixelantDesign curious what you think of the above ^^

[owocki]

one thing i think we might want to consider doing is consolidating the filters (on the left hand side) into the search bar (up top).. not in the original scope though now that i look above it.

@D3RPZ1LLA what did you use to build this? is there a JS library you had in mind? or was it all done in a design tool?

[D3RPZ1LLA]

@owocki I built those images using GIMP, an open source version of PhotoShop.
I don't have a JS library in mind.
I can build it from scratch.

[tardisdriver]

@owocki

Like this? Because this is definitely what I'd do. Easy enough to code up frontside, but I just used GIMP to quickly throw a visual together.

[gitcoinbot]

__Work has been started on the 0.04 ETH (37.55 USD) funding by__:

1. @tardisdriver

__Please work together__ and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $10256.78 more Funded OSS Work Available at: https://gitcoin.co/explorer

[PixelantDesign]

@owocki @mbeacom

I would love to see us move the left rail filters to this paradigm- See attached. Would need to work through what the design actually looks like given that the current implementation are radio buttons which allow for selection of single item vs ability to check all from different sections.

[mkosowsk]

Looks great!

When design is fleshed out, I'd be interested in grabbing this one... looks like a big value add!

[thelostone-mc]

@mkosowsk FTW 😛

[mkosowsk]

@thelostone-mc missed you in Denver dude, hope we meet irl sooner rather than later... let me know next time you're in NYC!

[D3RPZ1LLA]

@PixelantDesign
That's a great improvement for the left rail.
What do you think of my design for the top search?

[PixelantDesign]

Hi @D3RPZ1LLA

I think it’s a nice exploration in a way that it could work. I’d like to take a look at the left rail filters to see if those are really being used (data). I think there is an opportunity to clean up the many ways to filter the page. I’m actually working on a redesigned search, perhaps we could collaborate through slack.

[D3RPZ1LLA]

Sure, I have the same @ on slack. Which channel do you want to talk in?

[thelostone-mc]

@D3RPZ1LLA you could either DM @PixelantDesign or converse in #focus-design channel
I've added you to it ^_^

@mkosowsk Yeah my flight back to India was just a week before ETHDenver!
Next time I'm in US ( probably later this year ) -> Denver + NY are on the list !

[mkosowsk]

@thelostone-mc awesome!

it's always great when people visit the greatest city in the world, nyc.

i'm a very proud resident (despite some outrageous claims being made by @vs77bb 🙄)

[owocki]

@D3RPZ1LLA mind submitting your work on gitcoin @ https://gitcoin.co/funding/details?url=https://github.com/gitcoinco/web/issues/343 and i will pay you out? or just DM me your ETH address on slackl

[owocki]

very excited to see this done @eswarasai -- i think we resolved any technical concerns over slack, right?

[eswarasai]

@owocki -- Yep. Currently working on getting this done along with #412