Real-Time Tracking System

A real-time location tracking application built using Node.js, Express, Socket.IO, and Leaflet.js. Connected users share their live geolocation, which is broadcast over WebSockets and rendered on an interactive map in real time.

✨ Features

• 🌍 Live location tracking using the browser's Geolocation API
• ⚡ Real-time, bidirectional communication powered by Socket.IO
• 🗺️ Interactive map rendering with Leaflet.js and OpenStreetMap tiles
• 👥 Multi-user support — every connected client appears on the map
• 🧹 Automatic marker cleanup when a user disconnects
• 📱 Works on desktop and mobile browsers

🛠️ Tech Stack

Layer	Technology
Backend	Node.js, Express
Realtime	Socket.IO
Frontend	EJS, Vanilla JavaScript
Mapping	Leaflet.js + OpenStreetMap

📁 Project Structure

REALTIME_TRACKER/
├── app.js                  # Express + Socket.IO server
├── package.json
├── views/
│   └── index.ejs           # Main HTML template
├── public/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js       # Client-side socket + Leaflet logic
└── assets/
    └── banner.jpg

🚀 Getting Started

Prerequisites

• Node.js v16 or higher
• npm (bundled with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/<your-username>/realtime-tracker.git
   cd realtime-tracker

2. Install dependencies:

   npm install

3. Start the server:

   node app.js

4. Open your browser and visit:

   http://localhost:3001
   

   Allow location access when prompted.

📱 Testing on Mobile

The browser Geolocation API requires a secure context (HTTPS) on mobile devices. To test from your phone, expose your local server over HTTPS using ngrok:

ngrok http 3001

Open the generated https://...ngrok-free.app URL on your mobile browser.

🧠 How It Works

1. The client requests the user's coordinates using navigator.geolocation.watchPosition().
2. Updates are emitted to the server via socket.emit('send-location', ...).
3. The server broadcasts the location to all connected clients with io.emit('receive-location', ...).
4. Each client renders or updates a Leaflet marker on the map for every connected user.
5. When a client disconnects, its marker is removed via the 'user-disconnected' event.

🔮 Future Improvements

• User authentication and named markers
• Persisted location history with a database
• Custom map themes and marker icons
• Distance and route calculation between users
• Deployment guide (Render / Railway / Fly.io)

📄 License

This project is licensed under the ISC License.

🙌 Acknowledgements

• Leaflet.js
• OpenStreetMap
• Socket.IO
• Express