Giter Site home page Giter Site logo

acme-search-1's Introduction

ACME Co. Search

Problem

Alice is about to head into a meeting with Acme Co. She visits https://foo.com which has a search box where she types "Acme Co." and gets content from various data sources (listed below) relevant to the upcoming meeting.

Data Sources:

  • Contacts
  • Dropbox file
  • Slack message/thread
  • Calendar Entry
  • Twitter

Each item has a matching_terms field, you could treat that as the set of query terms which will retrieve that item (so you don't have to bother with actually searching content).

Feel free to edit the schema, add or remove entries, etc. The attached files are just a starting point. For example, if you'd like to add more random tweets to demonstrate scrolling updates, feel free to generate random ones. The ordering of search results is unspecified, feel free to do whatever you feel like. Do share any thoughts you have about ranking though.

Requirements

Build a search UI that supports searching over the items contained in the JSON files. There should be a search box where the user can type, press a button, and see content that matches the search query.

Additionally, please pick one of these "advanced" features to implement:

  • User interaction with search results (pin, delete, tagging)

How to run the project

  • Install Node and NPM
  • Open terminal/command line and clone the git repository
  • Run npm install
  • Run npm start
  • Navigate to (http://localhost:3000)

Main Features

  • Implemented a search UI where users can search over items contained in JSON files
  • The search box produces search results for items that match the query
  • Implemented user interaction with search results, where users can pin and unpin certain results and items from the search data

Approach

  • One of the main design decisions/tradeoffs that I had to make for this project was how I was going to structure the application state for the pinned items. Using an array to as the main data structure was not optimal, because pinned items should be unique and users should not be able to pin the same item more than once. I figured, using a JavaScript set would be the most optimal because it would only add unique items to the set of pinned items.
  • Another main design decision I made was the use React Hooks. React hooks make it easier to follow and make our code cleaner to read when handling local state and we can group different entities separately instead of keeping one large object as the main structure of our application state.
  • The functionality of the search bar is improved by adding logic using keyboard navigation, allowing the user to search results by hitting the enter key when searching for items.

acme-search-1's People

Contributors

ernestman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.