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

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.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

Also, add the Google Maps JavaScript library CDN link to the project.

#web-development #firebase #front-end-development #javascript #vuejs