Creating a geolocation app powered by Firebase

on YouTube ↗47m

" summary

A working Progressive Web App that combines Google Maps API, Angular and Firebase shows realtime synced location-based notes stored as Firestore documents with Firestore GeoPoint fields and offline support. The demo uses Angular CLI, Angular Material UI, Firebase Hosting, Cloud Storage for images, and Cloud Functions image thumbnails plus Cloud Messaging for push invites. Examples include location queries with GeoFirestore, current-position via navigator.geolocation, and a map with clickable note markers that actually navigate to the items.

AI-written summary · about

" chapters (17)

1. 0:00Start
2. 5:05Google Tasks
3. 8:50Starting the Project
4. 9:32Angular Cli
5. 11:04Create a New Angular App
6. 13:04End-to-End Tests
7. 16:59Documentation
8. 21:51Set Up Angular Material
9. 24:59Firebase
10. 26:50Firebase Cli
11. 27:52Firebase Json
12. 29:56Authentication
13. 34:15Firebase Rules
14. 35:38Google Maps Platform
15. 43:03Google Maps
16. 43:27Map Mode
17. 44:25Firebase Summit

" related talks

• 29mProgressive Web Apps with Angular and FirebaseErik Haddad · AngularUP 2017
• 31mProgressive Web Apps with Angular and FirebaseErik Haddad · JSPoland Conf 2017
• 26mProgressive Web Apps with Angular and FirebaseErik Haddad · ngVikings 2018
• 23mProgressive Web Apps with Angular and FirebaseErik Haddad · ng-europe 2018
• 53mWeb goes Native: Progressive Web Apps with AngularShmuela Jacobs · GDG DevFest Ukraine 2017
• 35mProgressive Web Apps with Angular 2Manfred Steyer · Angular Camp 2016
• 49mA progressive open web with Angular 2Huiren Woo · Voxxed Days Singapore 2017
• 29mAwesome Progressive Web Apps with AngularMike Hartington · ngAtlanta 2019