https://github.com/abhinav2087/realtime-device-tracker
https://github.com/abhinav2087/realtime-device-tracker
device-tracker expressjs geolocation-api leafletjs nodejs reactjs socket-io
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/abhinav2087/realtime-device-tracker
- Owner: ABHINAV2087
- Created: 2025-02-11T17:38:59.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-11T19:26:51.000Z (11 months ago)
- Last Synced: 2025-04-06T18:24:11.735Z (10 months ago)
- Topics: device-tracker, expressjs, geolocation-api, leafletjs, nodejs, reactjs, socket-io
- Language: JavaScript
- Homepage: https://realtime-device-tracker-two.vercel.app
- Size: 1.58 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# **RealTime Device Tracker**
A **real-time device tracking system** powered by **Node.js, Express, Socket.IO, React, and Leaflet**. This application enables users to monitor device locations dynamically on an interactive map using **geolocation services**.
## **Key Features**
✅ **Live Tracking** – Instantly updates device locations using WebSockets.
✅ **Interactive Map** – Visualize real-time positions with **Leaflet.js**.
✅ **Custom Markers** – Easily differentiate users on the map with unique markers.
✅ **Dynamic Tooltips** – Hover over a location to view the associated **User ID**.
✅ **Responsive & Interactive UI** – Built with **React** for a smooth experience.
## **Tech Stack**
### **Backend:**
🛠 **Node.js + Express** – Handles server-side logic and API endpoints.
💬 **Socket.IO** – Enables real-time, bidirectional communication between clients and server.
### **Frontend:**
⚛ **React.js** – Component-based UI with efficient rendering.
🗺 **Leaflet.js** – Lightweight and flexible map rendering for tracking.
🎨 **Tailwind CSS (or CSS/SCSS)** – Modern styling for an intuitive UI.
## **Getting Started**
### **Prerequisites**
Ensure you have **Node.js, npm, and React** installed.
### **Backend Setup**
1️⃣ **Clone the Repository**
```sh
git clone https://github.com/ABHINAV2087/Realtime-Device-Tracker.git
```
2️⃣ **Install Dependencies**
```sh
npm install
```
3️⃣ **Run the Server with Automatic Reloading**
```sh
npm install -g nodemon
npx nodemon app.js
```
### **Frontend Setup**
1️⃣ Navigate to the frontend directory:
```sh
cd ../client
```
2️⃣ Install dependencies:
```sh
npm install
```
3️⃣ Start the React development server:
```sh
npm start
```
Now, open your browser and access `http://localhost:3000` to start tracking devices in real time! 🚀