Build A Locations Tracker App With Vue.js + Firebase

Track Multiple Users’ Locations In Real-Time

By the end of this tutorial, you’ll be able to:

• Track an individual driver’s location, with their permission, using HTML5 Geolocation API after logging into the app.
• Store authenticated driver’s location data to the Cloud Firestore as the location changes.
• Show all active drivers’ current locations in real-time on Google Maps in the Admin view.

🛑 The app will only get location updates as long as it’s in the foreground state and it will STOP giving updates when it’s in background mode.

Infographics

Table Of Contents

• Create A New Firebase User
• Add User Roles
• Firebase Security Rules
• Sign In A User
• Navigation Auth Guards
• Driver View
• Get User Location Using watchPosition()
• Show Current Location On The Map
• Stop Location Updates
• Add Location Data To The Cloud Firestore
• Mock Multiple Driver’s Movement on the iOS Simulator
• Admin View — Show Map, Markers and InfoWindows

Project Setup

I have created five page-based components in the starter Vue project which are:

• Login.vue
• Signup.vue
• Driver.vue
• Admin.vue

Before going further, we need to include a couple of files to index.html.

Add a Semantic UI CSS framework to build a UI.