Travel smarter by saving the places you want to go. Demo
This app took about 40-hours to build for an interview assignment. I learned lots along the way. Below were the given instructions:
Create a web app (desktop or mobile) that provides a query box and a search button and then calls the Places Library for Google Maps (https://developers.google.com/maps/documentation/javascript/places). Format the results to give a good user experience.
Your app must include: A map with location markers/pins A list of locations (Some interactivity is expected between the two). You should implement at least one of your own features to show off your abilities (for example a build system, tests, user accounts / cloud storage, in addition to other cool features... the sky is the limit!).
Use whatever libraries, documentation, tutorials, or frameworks you consider necessary. This should be a client-side app, with little or no server code.
- run
npm install - run
npm startto spool upwebpack-dev-server - run
npm run buildto build a production copy into the/distfolder
- hovering over a place on the list bounces that place's marker on the map
- clicking on a marker on the map opens that place's details in list view
- save your favorite places by labeling them
- view your labeled locations with 1-click by clicking an existing label below the search bar
- indiviually view each of your saved locations sorted by label by clicking the bookmarks icon at the top right
- stores and syncs saved places to localStorage
- search results biased towards the area you see on the map
- sharing your geolocation pans map bounds to your area
- map's viewport smoothly transitions between places list and place details view to fit markers within view.
Libraries: React, Redux, redux-logger, redux-thunk, spinkit, Google Places API
Tools: webpack, npm