search-app

---

---

Problem Statment: You have to make a search input box which will search over a list of users. The user object has the following fields id: a unique id name: user’s name items: list of items ordered by user address: address of the user pincode: user address pin code You have to implement search on all of the fields. The search results will show up as a list of User Cards. Refer to the screenshots for how the UI would look like Placeholder (empty input) Search Result List 3. No Results Card To Summarize On typing in the search input box, the search results list opens up. The search could be just a string matching search. The list of cards can be navigated through keyboard or mouse only one card should highlight at a time if both mouse and keyboard are used for navigation (keyboard will take preference if mouse is kept hovered on the list, similarly mouse will take preference if keyboard navigation is not used). This behaviour is similar to how youtube search works When no search results are found, an empty card is displayed The card list would be scrollable The highlighted card (via keyboard/mouse) will scroll into view You can find the mock data here Evaluation Criteria Modularity of code Handling of Keyboard navigation with mouse. Handling  ScrollIntoView You are free to use any framework for the webapp. 1. No jQuery. 2. No need for fancy CSS - We know you can do it if you can code this stuff. (But the card structure). 3. To submit the solution, please upload the entire folder on Google Drive / Dropbox, share the folder as 'anybody with link can view' & then reply back with the link to this email. 5. The assignment can be done using plain JS, or any frameworks such as AngularJS, ReactJS. 6. Do not use a library for handling ScrollIntoView.