DEV Community

Cover image for Discover Realtime Location Tracker: An Open-Source PWA for Real-Time Device Monitoring and Communication
Mahmud Rahman
Mahmud Rahman

Posted on

Discover Realtime Location Tracker: An Open-Source PWA for Real-Time Device Monitoring and Communication

#node #socket #pwa #webdev

Hey devs! If you're into building apps that involve location services, real-time communication, or IoT-like tracking, I've got an exciting open-source project to share. It's called Realtime Location Tracker, created by Mahmud Rahman (GitHub: mahmud-r-farhan). This Progressive Web App (PWA) lets you monitor and track connected devices in real-time, complete with interactive maps, instant messaging, and even voice calls. Whether you're working on fleet management, delivery apps, team coordination, or personal safety tools, this project packs a punch.

What is Realtime Location Tracker?

At its core, this is a PWA designed to track the real-time locations of multiple devices. It uses GPS data to plot positions on an interactive map and supports features like emergency SOS alerts, live chat, and audio communication. The app is responsive, works offline (with limitations), and can be installed on desktops or mobiles just like a native app.

Key use cases include:

  • Fleet management and delivery tracking
  • Team coordination in the field
  • Personal location sharing with friends/family
  • Emergency response systems

The project emphasizes reliability as it scales, with updates pushing for actionable insights and user-friendly design. Mahmud describes it as a "game-changer" that turns simple monitoring into intelligent, confidence-boosting management.

Key Features

Here's a breakdown of the standout features:

  • Real-Time Tracking: Continuous GPS updates visualized on a Leaflet map. Devices appear as markers with pop-up details like battery level, platform, and connection status.
  • Device Management: Automatic device identification, custom icons, and a connection panel to oversee all active users.
  • Communication Tools:
    • Live chat powered by WebSockets (Socket.IO) – send messages and even click them to zoom to the sender's location.
    • Real-time audio calls via WebRTC, including a "megaphone" mode for broadcasting to all users.
  • Emergency SOS (Version 4.0+): Hold a button to send an alert with GPS coords, battery info, IP geolocation, and more. Receivers get audio alarms, vibrations (on mobile), and browser notifications.
  • PWA Capabilities: Installable, offline support with a fallback page, service worker caching, auto-updates, and push notifications.
  • Activity Logging: Server-side logs for connections, disconnections, and events.
  • Geofencing and Intelligent Monitoring: Recent updates add battery alerts to prevent disconnections and geofencing for location-based triggers.
  • Responsive UI: Dark/light themes, intuitive controls like Floating Action Buttons (FAB), and compatibility across devices.

These features make it more than just a tracker – it's a full-fledged communication hub.

Tech Stack

The project is built with a modern, lightweight stack that's easy to hack on:

  • Backend: Node.js (v18+), Express.js
  • Real-Time Comms: Socket.IO for messaging and location events
  • Mapping: Leaflet with OpenStreetMap (supports offline maps)
  • Audio: WebRTC for peer-to-peer voice
  • Frontend: HTML, CSS, JavaScript, EJS templates
  • PWA Essentials: Web App Manifest, Service Worker
  • Deployment: Docker and Docker Compose for easy containerization
  • Other Tools: npm, Git, GitHub Actions

No heavy frameworks here – it's vanilla JS with targeted libraries, making it performant and straightforward to extend.

How to Get Started

Setting up is a breeze. Here's the quick guide:

  1. Clone the Repo: 
   git clone https://github.com/mahmud-r-farhan/Realtime-Location-Tracker.git
   cd Realtime-Location-Tracker
Enter fullscreen mode Exit fullscreen mode
  1. Install Dependencies: 
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the App: 
   npm start
Enter fullscreen mode Exit fullscreen mode
  1. Open http://localhost:3007 in your browser, grant location permissions, and start tracking!

For production, use Docker:

docker build -t realtime-location-tracker .
docker run -p 3007:3007 realtime-location-tracker
Enter fullscreen mode Exit fullscreen mode

Or Docker Compose: docker-compose up -d.

To test real-time features, open the app in multiple browsers or devices and invite others to join. Grant location access, and watch the magic happen on the map.

Demo and Visuals

Check out the live demo here: https://realtime-location-tracker-v9ow.onrender.com/. It's best experienced with multiple users – share the link and see real-time updates in action.

Mahmud also shared a demo video on LinkedIn: Watch the Demo. It showcases the updated UI, audio rooms, and tracking in motion.

Screenshots are available in the repo's public/assets/ folder, covering Android/iOS logs and more.

Why Contribute or Use This Project?

As an open-source project, it's licensed under terms that encourage collaboration (check LICENSE in the repo). If you're interested in contributing:

  • Follow CONTRIBUTING.md for guidelines.
  • Adhere to the CODE_OF_CONDUCT.md.
  • Report security issues via SECURITY.md.
  • Submit pull requests with tests and alignment to the core stack.

This is a great starting point for learning about WebSockets, WebRTC, PWAs, or location-based apps. Plus, with features like geofencing and IoT integration, it has real-world potential for customization.

Wrapping Up

Realtime Location Tracker is a solid example of how open-source can drive innovation in tracking and communication tech. Kudos to Mahmud Rahman for building and sharing this – it's pushing boundaries in real-time apps.

If this sparks your interest, star the repo on GitHub: https://github.com/mahmud-r-farhan/Realtime-Location-Tracker, fork it, and build something awesome. Drop your thoughts in the comments – have you built similar apps? What's your take on WebRTC for audio in PWAs?

Top comments (0)