DEV Community

Cover image for Real-time Location tracking App build with MongoDB Change Streams and
Mohamed Ashiq Sultan
Mohamed Ashiq Sultan

Posted on


Real-time Location tracking App build with MongoDB Change Streams and

What I built

A Real-time Delivery Service application. The concept is similar to Uber but for carrying packages locally. I have used MongoDB Change Streams to update location and Shipment status notifications in real-time. For this I have to build two UIs one for users and other to simulate delivery associates.

real-time location update

Left Window: User App
Right Window: Driver Simulator

Category Submission:

Video Explanation

App Link

How to Simulate the demo

Note: Browser's Geolocation API is 🚫 not used to avoid storing any user location information (GDPR).
To make things easy I have made Chennai, a city in India as the base location. Please simulate the app in the location which gets loaded
🚫 Signup is disabled. Please use the credentials provided below in the post
The Backend is hosted on free tier so there might be some cold start issues when trying to login

Password: s24x546olk45edxf
Enter fullscreen mode Exit fullscreen mode
  • In the User app click on the "New delivery" button
  • Confirm pickup location
  • Confirm drop location
  • You will see a notification on the driver simulator
  • Accept the new delivery request
  • In the simulator move the truck icon across the marker (GIF provided below)
  • You will see the truck movement on the user map in real-time
  • In the simulator Update the delivery status
  • You will see the status information getting updated in the user app real time


Architecture Diagram
Architecture Diagram
Live location and Status updates
Delivery with live updates
Driver Simulator
Driver Simulator


There are three repos to this project.

  1. The Backend
    The Backend is connected to MongoDB Atlas and does CRUD operations on API calls. The Backend service also uses to handle socket connections. MongoDB Change Streams events are broadcasted via There are three main Change Stream subscriptions in this application

    • Delivery Agent's location update change stream to track package
    • Shipment Status updates to update status in User UI
    • New Shipment Created notification broadcasted to Agents to Accept or Reject a shipment.
  2. User UI
    Both frontends are build React and uses Leaflet for Maps. The User UI is used to do CRUD events like Signup, Login, Create new deliveries and to show real-time events.

    • Real-time information updates on Delivery Status.
    • Real-time location of the the package being delivered can be seen on the Map
  3. Delivery Associate Simulator
    This is used to simulate a delivery agent. This app receives real-time notification when any new delivery gets initiated. Agents can Accept or Reject deliveries and Update delivery status.
    The important functionality the simulator provides is the ability to simulate the GPS location update event of an agent. The current location of an Agent is denoted by a Truck Marker on the map. Dragging the marker across the Map emits an event to update the Agent's current location in the DB.

Link to Source Code

Permissive License

  • MIT License


What made me decide to build this particular app?

I wanted to try MongoDB's Change Stream functionality, so I was thinking about building a real-time application. And since MongoDB supports GeoJSON out of the box I wanted to challenge myself and decided to build a real-time application which uses location data.

What inspired me?

Uber and Food delivery Apps. There's a company in India named Dunzo who do similar delivery service.

How I built it

I have used MongoDB Atlas free tier for this application.
Something new I learned building this app is MongoDB Change Stream.
I have used to create Socket Connection rooms and broadcast events. Socket room name is just the Shipment id and user subscribes to the respective room i.e Shipment id he has created. When there's a MongoDB Change Stream event on Shipment Collection I'm publishing the updated document to the room using the shipmentId which got updated.[], watchOptions).on('change', (data: any) => {
    const fullDocument = data.fullDocument;
    if (data.operationType === 'update') {
Enter fullscreen mode Exit fullscreen mode

I have used Render to deploy the backend and Netlify to deploy the frontend applications

Additional Resources/Info

Latest comments (1)

hugoroam profile image

@ashiqsultan perhaps you also want to consider building an app using's location tracking SDK?

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!