Real-Time Location Tracker

This is a lightweight web application that lets multiple users share and view their locations on a live map in real time. It uses WebSockets to broadcast movements instantly, meaning everyone connected can see exactly where other users are moving without needing to manually refresh the page.

🚀 Features

• Real-Time Position Updates: High-precision tracking using the browser's Geolocation API.
• Dynamic Mapping: Interactive map interface powered by Leaflet.js and OpenStreetMap.
• Unique Identification: Name-based user sign-in that prevents duplicate usernames in active sessions.
• Location Pickup: Click any point on the map to see its latitude and longitude instantly.
• Auto-Cleanup: Instantly removes markers when users disconnect or close the tab.
• Responsive Web Design: Optimized CSS layout for both desktop monitors and mobile devices.

App SS

Tech Stack

• Node.js – JavaScript runtime built on Chrome's V8 JavaScript engine.
• Express - A fast, unopinionated, minimalist web framework for Node.js.
• Socket.IO – Handles the real-time, bi-directional communication channels between the browser and server.
• Leaflet.js & OpenStreetMap – Renders the visual map, pin tracking layers, and pop-up username bubbles.
• Vanilla JavaScript – The programming language used for both client-side and server-side logic.

📂 Project Structure

├── app.js              # Server-side Express & Socket.io logic
├── package.json        # Node.js project dependencies & scripts
├── public/
│   ├── css/
│   │   └── style.css   # Clean layout & overlay modal styling
│   └── js/
│       └── hello.js    # Client-side map & event socket routing
└── views/
    └── index.ejs       # Main HTML UI document

Installation & Setup

Ensure you have Node.js installed (version 14.0.0 or higher recommended).

1. Clone or download this project repository.
2. Open your terminal in the project's root folder.
3. Install the required platform dependencies:

   npm install

Running the Application

Local Machine

Start the server locally with:

npm start

Open your browser and navigate to: http://localhost:3000

Testing with Multiple Mobile Devices

To see markers move across different phones or tablets:

1. Find your laptop's local network IP address:
   • Windows (CMD): Run ipconfig (look for IPv4 Address)
   • Mac/Linux (Terminal): Run ifconfig or ip a
2. Connect your testing devices to the same Wi-Fi network as your host computer.
3. Open your mobile browser and navigate to: http://YOUR_LAPTOP_IP:3000

Important Note on GPS Privacy

• This app requires standard browser Geolocation permission to work.
• Most mobile web browsers block location access over unencrypted HTTP. When testing on a live public link, ensure you deploy using secure HTTPS.

Live Link

You can try the live demo here. (It might take a few seconds for server to wake up).

Hope you have a nice day 😊