LiveTrack 📍

Real-Time Device & Location Tracking System

📌 Overview

LiveTrack is a lightweight, real-time location tracking application that enables multiple clients to broadcast and visualize live geographic positions on a shared map.
Built using an event-driven architecture powered by Socket.IO, LiveTrack ensures instant synchronization of location data across connected devices with automatic lifecycle handling for online/offline clients.

The project demonstrates real-time communication, WebSocket-based event handling, and live map visualization using a clean and minimal full-stack setup.

🎯 Key Objectives

• Enable real-time location sharing between multiple clients
• Visualize live device locations on an interactive map
• Handle device disconnects gracefully
• Maintain a clean, scalable, and understandable architecture

🧠 How It Works (High-Level Flow)

1. A client browser captures live geolocation using the Navigator Geolocation API
2. Location data is emitted to the backend via Socket.IO
3. The server broadcasts the location to all connected clients
4. Clients render or update live markers on the map
5. When a client disconnects, its marker is automatically removed

🧩 System Workflow Diagram

The following diagram illustrates the end-to-end real-time workflow of LiveTrack, including client-side geolocation capture, WebSocket communication, server-side broadcasting, and live map rendering across connected devices.

flowchart LR
    A[Browser Client<br/>Device 1] -->|Geolocation API<br/>Latitude, Longitude| B(Socket.IO Client)
    C[Browser Client<br/>Device 2] -->|Geolocation API<br/>Latitude, Longitude| B2(Socket.IO Client)

    B -->|emit: send-location| D[Socket.IO Server]
    B2 -->|emit: send-location| D

    D -->|broadcast: receive-location| E[All Connected Clients]

    E -->|Update / Create Marker| F[Leaflet Map Renderer]

    D -->|on disconnect| G[User Disconnected Event]
    G -->|emit: user-disconnected| E
    E -->|Remove Marker| F

Loading

🗺️ Verified Functional Behavior

The following behavior was validated during local testing:

• Two different browsers act as independent devices
• Each browser displays a separate live marker
• Markers appear slightly apart, confirming independent geolocation capture

When one browser is closed:

• The corresponding marker disappears instantly on the other browser

✔️ This confirms proper disconnect detection and offline device handling.
✔️ This validates correct real-time synchronization and lifecycle management.

🧩 Tech Stack

Backend

• Node.js
• Express.js
• Socket.IO
• EJS

Frontend

• HTML5 / CSS3
• JavaScript (ES6)
• Leaflet.js
• OpenStreetMap

📂 Project Structure

LiveTrack/
├── public/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── views/
│   └── index.ejs
├── app.js
├── .gitignore
├── package.json
└── package-lock.json

⚙️ Installation & Local Setup

Prerequisites

• Node.js installed
• Modern browser with geolocation support

Steps

git clone https://github.com/<your-username>/LiveTrack.git
cd LiveTrack
npm install
node app.js

Access

Open in browser:

http://localhost:8700

Open the same URL in two different browsers to observe real-time behavior.

---

🎥 Demo & Screen Recording

Example:

https://github.com/<your-username>/LiveTrack/assets/<video-id>

🔒 System Characteristics

• Stateless backend
• Event-driven WebSocket communication
• Automatic client cleanup on disconnect
• Real-time map synchronization without polling

🚧 Known Limitations

• No authentication or authorization (by design)
• Accuracy depends on browser geolocation
• Localhost testing reflects the same physical device location

🛣️ Future Enhancements

• Authentication and device identification
• Named devices and metadata
• Redis adapter for Socket.IO scaling
• Persistent location history
• Dockerized and cloud deployment

🤝 Contribution

Contributions are welcome.
Frontend UI improvements and feature extensions are encouraged.

📄 License

This project is licensed under the MIT License.

👤 Author

Samrat Saha
Backend & Full-Stack Developer