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!
Since I'm working off a search feature I've already built, I didn't do any high-fidelity sketches, just this one:
- 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.
- Redis (currently one of my favorite technologies)
- The ProPublica congress API
The repository so far lives here. So far, it has an auth boilerplate and the beginnings of our politician router.
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.
- Create temporary legislators table
- Create search form
- Create actions/reducers relating to the actions that form should take
- Implement a fuzzy search
- Implement LocalStorage to save user's recent searches
- 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
- 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
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.
As software gets more and more integrated into our lives, the industrialization of its crafting process becomes inevitable. But the over-generalization of software engineering can be crushing the creative side of programming.