abhay-vaidya / shopify-web-challenge-2019

Shopify Web Engineer Intern Challenge 2019

Toronto Waste Lookup

Shopify Web Engineer Intern Challenge - Summer 2019

App deployed via Heroku can be accessed here: https://abhay-shopify-2019.herokuapp.com/

Instructions from Shopify

• Reproduce the design as provided in the screenshot, which displays example search results.
• The data must be taken from the Waste Wizard Lookup data (JSON).
• Typing in the search field should NOT perform an API call.
• A search must be performed when hitting enter or clicking the search button.
• When the search input field is cleared, the list of results should also be cleared.
• Performing a search should render a list of potential matching items based on keywords. Each item should:
  • Render the title and description of the item.
  • Render a grey star button if the item is not already favourited.
  • Render a green star icon if the item is not already favourited.
  • Clicking the star button should add the item to the favourites list.
• When the number of favourites is more than one, the app should render a list of items. Each saved item should:
  • Render the title and description of the item.
  • Render a green star button if the item has been favourited.
  • Clicking the green star button should remove the item from the saved list.

Requirements

Node 8.10.0 or later

Environment Variables

You will need the following environment variables to serve the app:

Key	Suggested Value	Description
REACT_APP_API_BASE	https://secure.toronto.ca/cc_sr_v1/data	The Waste Wizard Lookup Data source
REACT_APP_ITEM_LIMIT	1000	Item limit for data source

This allows for swapping the data source and/or item limit without needing a code change.

Running locally

1. npm install
2. npm run start to begin the application on port 3000

Running Tests

npm run test

Implementation

Node.js, React, Redux, TypeScript, Jest

Since the Waste Wizard Lookup Data is a data-dump and not a typical API that accepts query parameters, I chose to download the data when the main App component loads, which is at the beginning. This raw data is transformed and stored in Redux, where it can be accessed by the various components in the application. When the user submits a query, the app performs a search through the stored data to find matches by keyword. Currently, searches are only performed if the user enters more than 1 character. This is to reduce computation for insignificant queries.

Managing favourites is also handled via Redux. Favourites are persisted between page refreshes as they are also stored in the browser session. When the page loads, the application checks to see if favourites exist in session storage, and if so, populates the data accordingly. Favourites get cleared when the user closes the browser.