PezCoder / search-users

Search functionality to filter out users & result navigation handling using mouse & keyboard

Search Users

The website let's you search users & navigate the search suggestions using either mouse or keyboard up/down arrow keys.

Experience here: https://pezcoder.github.io/search-users

Checklist

• UI for Search, Suggestions, No results
• Mouse focus behaviour
• Keyboard navigation of list using up & down arrow keys
• One card should highlight when use both mouse & keyboard
• Focused element to scroll into view
• Mouse & keyboard events to play along

Screenshots

Search Results Found	No Search results

Tech stack used

1. Bootstrapped by Create React App
2. Redux, redux-thunk to manage data.
3. SCSS for styling
4. BEM pattern for css class names
5. Redux ducks pattern for redux

To run locally

Clone the repository & run these:

npm install
npm start

Folder Structure & Conventions

└─ src
   ├─ components              -- Contains all the individual components
   │  ├─ search-bar
   │  │  ├─ searchBar.scss
   │  │  └─ SearchBar.js
   │  └─ ...
   │     └─ ...
   ├─ redux                   -- All state logic here
   │  ├─ store.js
   │  └─ ducks                -- Follows redux duck pattern: https://github.com/erikras/ducks-modular-redux
   │     └─ search
   │        ├─ search.js.     -- Actions, Creators, Reducer, Selectors for the duck
   │        └─ ...
   ├─ styles
   │  └─ -- All common styles here --
   └─ utilities
      └─ -- All utilities here--