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.
Left Window: User App
Right Window: Driver Simulator
Category Submission:
- Real-time Change Stream
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 Render.com free tier so there might be some cold start issues when trying to login
- Open the Driver Simulator
- Enter this associate id to continue
637f9183e03774d5c46ddffc - Open the User app
- Use the below credentials to login
Email: carl@example.com
Password: s24x546olk45edxf
- 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
Screenshots
Architecture Diagram
Live location and Status updates
Driver Simulator
Description
There are three repos to this project.
-
The Backend
The Backend is connected to MongoDB Atlas and does CRUD operations on API calls. The Backend service also uses Socket.io to handle socket connections. MongoDB Change Streams events are broadcasted via Socket.io. 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.
-
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
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
Background
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 Socket.io 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.
Shipment.watch([], watchOptions).on('change', (data: any) => {
const fullDocument = data.fullDocument;
if (data.operationType === 'update') {
io.to(String(fullDocument._id)).emit(
socketEvents.SHIPMENT_UPDATED,
fullDocument
);
}
});
I have used Render to deploy the backend and Netlify to deploy the frontend applications
Top comments (1)
@ashiqsultan perhaps you also want to consider building an app using Roam.ai's location tracking SDK?