Weekly UI Challenge, Week 2: Search Input, Part 1

This week's Weekly UI Challenge is to design a search bar, complete with autocomplete and previous search cacheing.

This is actually pretty close to something I've already built:

I am happy with the design of this search bar already. However, its functionality leaves something to be desired. Instead of dynamically getting legislator information, it does a filter through a large JSON object that has to be updated manually. Less than ideal! And, as you can see, it doesn't cache previous searches.

This project (callcongress.how) is a site I've been meaning to rebuild in the first place -- it has some serious flaws, and needs an overhaul badly. I love the idea of doing this project in community rather than on my own, and I have been meaning to start writing about my development process. So, let's get to it!

Sketches & Design Considerations

Since I'm working off a search feature I've already built, I didn't do any high-fidelity sketches, just this one:

Thoughts & Questions

• At what point is a user's search cached to appear in a "recent searches"? When the user chooses a card? When the user stops typing for an amount of time?
• Maybe it would be good to have some kind of search button functionality. The cards can have minimal info and the results page would have a little bit more.
• Want to implement memoization & debounce techniques to manage the fetches for the autocomplete.

Tech Stack

• React/Redux/Router
• Redis (currently one of my favorite technologies)
• Express/Postgres/pg-promise
• Flexbox
• The ProPublica congress API

The repository so far lives here. So far, it has an auth boilerplate and the beginnings of our politician router.

Timeline

I am one day behind the official timeline of this challenge. I'm also thinking that most of the heavy lifting here is going to be backend work, which I don't get to do very much of at the moment but really enjoy, so that's fine with me. So, here's the steps I think I'm going to need to take in order to accomplish this.

PHASE -1

• Create temporary legislators table
• Create search form
• Create actions/reducers relating to the actions that form should take

PHASE 0

• Implement a fuzzy search
• Implement LocalStorage to save user's recent searches

PHASE 1

• Improve data -- at this point I should attempt to get actual data out of the ProPublica API
• Rework search form to make API calls while user is typing
• Styling!

PHASE 2

• Improve performance -- implement Redis cacheing to save past searches over users and save time by not querying the DB
• Results page -- user can either use the mini-cards on the search page to add legislators to their watchlist or go to a results page that will contain more info
• A11y concerns

Closing Thoughts

This is a really ambitious project to try to finish in a week, and I have maybe stretched what the challenge is supposed to be about, but I'm excited to tackle it. The CallCongress.How project is something I've felt strongly about for a while and I'm looking forward to getting the chance to improve it.