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

J Silverstein — Tue, 17 Apr 2018 03:48:39 +0000

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