https://github.com/ogm710811/react-google-maps-and-places-api

"Shark Activity" React App where we cover how Google Maps, Google Places, and browser geolocation works.
https://github.com/ogm710811/react-google-maps-and-places-api

combobox firebase-database geolocation-api reach-ui react react-google-maps react-query reactjs snazzy-maps use-places-autocomplete

Last synced: about 1 month ago
JSON representation

"Shark Activity" React App where we cover how Google Maps, Google Places, and browser geolocation works.

• Host: GitHub
• URL: https://github.com/ogm710811/react-google-maps-and-places-api
• Owner: ogm710811
• Created: 2020-09-29T14:54:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-07T14:19:29.000Z (over 4 years ago)
• Last Synced: 2024-11-15T02:33:37.835Z (3 months ago)
• Topics: combobox, firebase-database, geolocation-api, reach-ui, react, react-google-maps, react-query, reactjs, snazzy-maps, use-places-autocomplete
• Language: JavaScript
• Homepage:
• Size: 368 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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/