DEV Community

loading...
Cover image for Weekly UI Challenge Week 3 Day 4: Add sorting

Weekly UI Challenge Week 3 Day 4: Add sorting

geoff profile image Geoff Davis ・2 min read

Welcome to Week 3, Day 4 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day four, our goal is to…

Add sorting

The sorting of search results are an important part of a useful results page. Whether it is for an ecommerce platform– sorting by price or customer review, or a search engine– sorting by date or relevance, or some other type of app/site, proper sorting methods help users get the best of your search implementation.

Following the original design I created, this is what I've got for Day 4:

A results page component in list view, with one result entry highlighted to indicate it is sponsored

The design is a little different due to the fact that I am using the native HTML select element, but the functionality is all there. The design continues to emulate the results of a mock soccer blog, so the sorting methods reflect that of a blog, i.e. sorting by date. If you were using a more robust search platform and flexible API, you could also sort by relevance (like Google and Amazon do, for example) or by price or customer rating, as previously mentioned.

Here's an animation of the feature in action:

A results page component switching between list and grid views, with certain sorting parameters in place

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 3 Calendar

  1. (Sunday 4/22) Design component ✅
  2. Result entry, sponsored/best seller indicators ✅
  3. Grid/list view toggles ✅
  4. Sorting 🎯
  5. Pagination/load more
  6. 100% a11y score
  7. Tweaks, refactors, fixes

Discussion (0)

pic
Editor guide