Map Search Test

How To Run Project

Create a split terminal in root directory
In right terminal run "npm run tw" to trigger tailwind
In left terminal run "npm run build" to build project files
After npm run build is done executing, run "npm start" to fire up the project

Base Files

You've been given:

index.html: The base HTML file with a full-page Google Map
main.css: The base CSS file
main.js: The base JS file
sample-data.js: The sample data that should be searched. Each record has at least an id and name.
icon-search.svg & icon-pin.svg: SVG's to use in your design (see the provided designs below)

The Task

Create a user interface that resembles the images below as closely as possible and implements the following:

"Autocomplete" search field - Using the provided sample data in sample-data.js, allow users to search in an input field for results based on the data name value.
Results list - Show the results of the autocomplete search as a list of items that a user can select/click.
Locations/markers - When a user finds and clicks a search result, display the location on the map.
Details modal - When a user clicks a map location/marker, display a modal that contains additional information about that location. (see below)

How the initial page should look:

Search Field

When entering a query into the search field the matching results should populate an area below the search as a user types. If no results are found, make sure to show a message letting a user know that :) Nothing is worse than thinking it's trying to load forever!

How the search interface should look:

Details Modal

When clicking on a map location/marker you should display a modal that contains information about that specific location. This modal should be both horizontally and vertically aligned.

How the modal should look - (ignore the vertical line guides in your design):

Things to think about

Document your code! This is your opportunity to help us understand you. Let us know:
- why you did (or did not) do something,
- why you used (or did not use) any frameworks/libraries,
- what you wanted to do, but could not because...?
How close does your final design match the provided images above?

Extra Credit

We use Vue.js for our user interface at Ground Signal. If you find it useful for this exercise, by all means give it a go!
We also implement lots of charts using Chart.js. We've included some data (see avgStoreTraffic) in the sample-data.js in case you want to spice up your modal with that.
Let us know how we could improve this test. Bug? Improvement? Send us a pull request!
Anything else awesome. :)

Be Unique!

If you have any questions/comments/feedback, don't hesitate to shoot us an email!

For quick reference, some Google Maps documentation can be found at https://developers.google.com/maps/documentation/javascript/

cabarnes2020 / ground-signal-challenge