Weekly UI Challenge, Week 2: Search Input, Part 1
Tags: weeklyui, challenge, design
Published: 2018-04-17 03:48:39

---
title: Weekly UI Challenge, Week 2: Search Input, Part 1
published: true
description: The start of the search input UI challenge 
tags: weeklyui, challenge, design
---

This week's [Weekly UI Challenge](https://dev.to/geoff/week-2-day-1-design-a-search-bar-mo6) is to design a search bar, complete with autocomplete and previous search cacheing.

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

![](https://thepracticaldev.s3.amazonaws.com/i/usc4c9ujmp0w93rc5ld6.gif)

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](https://callcongress-how.herokuapp.com)) 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:

![](https://thepracticaldev.s3.amazonaws.com/i/vtdonbd6w3wzj9umxwov.JPG)

### 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](https://github.com/jlr7245/callcongresshow). 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.