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.
Top comments (0)