Search, sort and save your favorite restaurants. A react/redux app built to explore the Google Maps and Geocoding APIs.
You can view a live demo of this project :exclamation::arrow_right:---> HERE <---- ⬅️❗
You will need to obtain your own API keys and insert them into the code to be able to build your own version.
You will need to get your own API keys for the Google Maps / Geocoding API (the same key will work for both), and also for google firebase authentication.
Go here and follow the instructions. As of April 2019 you will need to sign up for an account (they have a free one) to get the key.
- enable google maps api on your google account
- enable geocoder api on your google account
Go here and follow the instructions for firebase for web. You will need to create a firebase project.
(You will notice that I have my own dev env variables and imports. You will be deleting/replacing these).
Go to the following files and enter the appropriate key:
- src/googleAPIs/geocoding
- delete the key import on line 2
- Geocode.setApiKey('your key here')
- src/googleAPIs/firebase
- in the config object, replace the process.env references with your own keys (as strings)
- src/components/Map.js
on line 63: googleMapURL:
https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=geometry,drawing,places
you will need both yarn and node installed on your system.
to add dependencies
to build the development version (with sourcemaps). You can also use yarn build:prod if you want to deploy (but don't forget to scrub all your api keys if committing to github)
this will allow you to hot reload while you tinker
- include a firestore database to persist user data across sessions for multiple users
- include InfoWindow components to display above the map markers of the selected restaurant locations
- restrict unnecessary API calls to the maps api (shouldComponentUpdate)
- expand the test suite
react, redux, sass, node, express, babel, wepack, yarn Google Maps API, Google Geocoding API, google firebase authentication
Tim Day