Sebastian Gomez

Apr 13, 2023

Updated: Jun 25, 2026

Diving Deeper into a Tech Stack for Real Time Apps like Uber

"Uber Like" (like Uber) or "Rappi Like" apps have gained huge popularity over the last few years. Several technology solutions try to emulate the behavior and functionality of this kind of app. This happens because many companies are venturing into the world of delivery and ecommerce, looking to replicate already established success stories.

It's amazing to watch the Uber driver approaching our location in real time and to be ready almost exactly on time to get into the vehicle. In the same way, we like knowing when the courier has picked up our order and seeing their location at every moment.

In this article we'll explore how apps that track objects in real time actually work, and we'll learn to visualize them using Google Maps, Angular and Firebase. Unlike the original version of this post, this time I won't send you off to an external link: we're going to build a minimal, working example, step by step. Let's get started!

The idea behind real time

The trick behind these apps is simpler than it looks. There are two pieces that talk to each other:

• A real time backend that stores the position of each object (a driver, a courier, your order) and notifies whoever is listening every time that position changes. This is where Firebase comes in: both Firestore and the Realtime Database offer listeners that fire automatically whenever the data changes, without you having to ask over and over.
• A map that draws that position and moves it smoothly on screen. This is where Google Maps comes in, integrated into Angular through the official `@angular/google-maps` package.

The driver (or another process) writes their coordinate to Firebase every few seconds, and your app, subscribed to that document, receives the new value and moves the marker on the map. That, in essence, is the "real time" you see in Uber or Rappi.

Setting up the Angular project

We're going to work with modern Angular: standalone components (no NgModule) and signals for reactive state, which is the idiomatic approach today. Create the project and install the dependencies:

ng new uber-like-tracker
cd uber-like-tracker

# Official Google Maps integration for Angular
npm install @angular/google-maps

# Firebase SDK (modular, v9+)
npm install firebase

Note: The @angular/google-maps package replaces older third party libraries like @agm/core (AngularJS Google Maps), which is discontinued. For Firebase, the modular firebase SDK no longer requires @angular/fire for simple cases; we'll use it directly.

Load the Google Maps API script in your index.html (you'll need an API key from the Google Cloud console with the Maps JavaScript API enabled):

<!-- index.html -->
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async"
  async
></script>

Configuring Firebase and the real time listener

Initialize Firebase with your project's configuration and create a service that listens for the object's position. We use onSnapshot, which is the key piece: every time the document changes in Firestore, our callback runs with the fresh data.

// firebase.config.ts
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project',
  // ...rest of your configuration
};

export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

// driver-location.service.ts
import { Injectable, signal } from '@angular/core';
import { doc, onSnapshot } from 'firebase/firestore';
import { db } from './firebase.config';

export interface LatLng {
  lat: number;
  lng: number;
}

@Injectable({ providedIn: 'root' })
export class DriverLocationService {
  // A signal with the current position; the map reacts to its changes.
  readonly position = signal<LatLng>({ lat: 4.711, lng: -74.0721 });

  // We subscribe to a Firestore document: each update
  // fires onSnapshot and we move the marker.
  trackDriver(driverId: string): void {
    const ref = doc(db, 'drivers', driverId);
    onSnapshot(ref, (snapshot) => {
      const data = snapshot.data();
      if (data?.['lat'] != null && data?.['lng'] != null) {
        this.position.set({ lat: data['lat'], lng: data['lng'] });
      }
    });
  }
}

Notice the important detail: we're not polling (asking "did it change?" every few seconds). onSnapshot keeps an open channel and pushes the new value to us the moment the driver updates their coordinate. That's what makes the experience feel instant.

Showing the position on the map

Now the standalone component that ties it all together: it imports GoogleMap and MapAdvancedMarker from @angular/google-maps, reads the position signal, and centers the map on the object.

// app.component.ts
import { Component, computed, inject, OnInit } from '@angular/core';
import { GoogleMap, MapAdvancedMarker } from '@angular/google-maps';
import { DriverLocationService } from './driver-location.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GoogleMap, MapAdvancedMarker],
  template: `
    <google-map
      height="100vh"
      width="100%"
      [center]="center()"
      [zoom]="15"
    >
      <map-advanced-marker [position]="center()" title="Driver" />
    </google-map>
  `,
})
export class AppComponent implements OnInit {
  private readonly locationService = inject(DriverLocationService);

  // computed derives the map center directly from the position signal.
  readonly center = computed(() => this.locationService.position());

  ngOnInit(): void {
    this.locationService.trackDriver('driver-123');
  }
}

Note: in recent @angular/google-maps versions, MapAdvancedMarker (selector map-advanced-marker, based on Google's AdvancedMarkerElement) replaces the old MapMarker/google.maps.Marker, which Google flagged as legacy. The advanced marker requires a Map ID configured in your Google Cloud project (the mapId attribute on the parent GoogleMap).

With this, every time the drivers/driver-123 document changes in Firestore, the signal updates, center is recomputed, and the marker repositions itself. You didn't write a single line of code to "refresh" the map.

Conclusions

• "Uber Like" and "Rappi Like" apps have revolutionized the world of delivery and ecommerce by offering real time tracking to users.
• Visualizing the location and movement of drivers and couriers in real time is possible thanks to technologies like Google Maps, Angular and Firebase, and the central piece is a listener (onSnapshot) that pushes changes instead of polling.
• Diving deeper into this tech stack, today with Angular standalone, signals and the modular SDKs, can let us build similar apps or even improve existing ones.

Suggested exercises

1. Build a basic app with Angular and @angular/google-maps that shows an object's location on the map from a signal.
2. Wire up Firestore with onSnapshot so the object's location updates in real time, and write a small script that updates the document every few seconds to simulate movement.
3. Design an interface that lets users interact with the app: request a vehicle, order a product, or even chat with the driver or courier.

3-point summary

1. "Uber Like" and "Rappi Like" apps are popular and have changed the way users interact with delivery and ecommerce services.
2. To build real time tracking apps we can combine Google Maps, Angular and Firebase, leaning on Firestore listeners to receive every position change instantly.
3. Diving deeper into this tech stack, with modern Angular and the current SDKs, lets us develop similar apps or improve existing ones.

That's all, I hope this post is useful to you and that you can apply it to a project you have in mind. If you have any questions, don't hesitate to leave me a comment below. And remember, if you liked it, you can also share it using the social links below. Good luck!