Google Maps & Google Places in React

This project builds a "Shark Activity" React App where we cover how Google Maps, Google Places, and browser geolocation works. All using modern React (hooks) and up to date packages for 2020.
In addition, we cover how to use react-query mutation functionality to post data to the server, and update the UI with fresh content. We cover three approaches to UI updates, going from easiest but worst performing, to most complicated but best performing. [Refetching Data, Response Cache Update, and Optimistic Cache Update]

About this project

The project intends to be an advanced shark reporting and alerting platform on the US Area.

APIs that needs to be enabled

• Geocoding API
• Maps JavaScript API
• Places API

Dependencies

Google Maps React: https://www.npmjs.com/package/@react-google-maps/api
Google Places React: https://www.npmjs.com/package/use-places-autocomplete
Reach Combobox: https://reach.tech/combobox/
Snazzy Maps Style: https://snazzymaps.com/style/8097/wy
Browser Geolocation: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
FireBase Real DataBase: https://firebase.google.com/products/realtime-database
React-Query: https://react-query.tanstack.com/