Front End of the coding challenge for Medwing.
Front end of the geocoding challenge for Medwing done with react.
It displays on a Google Map Markers from a Db. It allows you to search for locations and to delete or edit previously created markers.
I decided to have a front end approach leveraging on npm like react-google-maps and
react-places-autocomplete that allows smooth use Google Maps Api.
Back end repository HERE
Live demo of the project HERE
Clone the repository and install the dependencies:
git clone https://github.com/MikeLunDev/geocodingChallenge-BE.git
cd geocodingChallenge-FE
npm iRun a mongo istance if you have mongo as a service:
mongodGet Google Maps API Key:
Create a new API key from the Google developer console, making sure that Maps JavaScript API has been enabled.
Copy that key into your .env file creating an ENV var with the name REACT_APP_GOOGLE_KEY.
Create a second API key for the cdn making sure that Places API has been enabled.
Create a .env file with:
- REACT_APP_GOOGLE_KEY (necessary to display the map)
Run the app:
npm start- create-react-app - Boiler plate for ReactJs applications
- react-google-maps - Creates HOC component that wrap the map and allows to display Markers
- react-places-autocomplete - Npm that allows autocomplete powered by google