Track Live

Real-time location sharing for groups, events, geofences, location history, and emergency SOS workflows.

Track Live is a full-stack MERN application built for live GPS collaboration. It combines a polished React dashboard, Leaflet maps, Socket.IO realtime updates, JWT authentication, MongoDB geospatial storage, event rooms, and geofence alerts into one deployable system.

Preview

Dashboard

Geofence Builder

What It Does

• Share live GPS location with connected users in realtime.
• Create and join group events with invite codes.
• View online users, active events, sharing status, and quick actions from a modern dashboard.
• Draw geofences on an interactive map and trigger enter/exit alerts.
• Inspect location history with map trails and movement stats.
• Send SOS alerts with current location data.
• Authenticate with JWT access tokens, refresh tokens, and bcrypt password hashing.
• Deploy frontend and backend independently on Vercel, Render, Docker, or any Node-capable host.

Live Architecture

flowchart LR
  Browser["React SPA<br/>Vercel / Static Host"]
  API["Express REST API<br/>Render / Node.js"]
  Socket["Socket.IO Gateway"]
  DB["MongoDB Atlas<br/>GeoJSON + TTL indexes"]

  Browser -->|"HTTPS REST /api"| API
  Browser -->|"WebSocket / polling"| Socket
  API --> DB
  Socket --> DB
  Socket -->|"location-update<br/>event chat<br/>geofence alerts"| Browser

Loading

Tech Stack

Layer	Tools
Frontend	React 18, React Router, Context API, custom CSS design system
Maps	Leaflet, OpenStreetMap tiles
Realtime	Socket.IO with websocket and polling fallback
Backend	Node.js, Express, Helmet, CORS, rate limiting
Database	MongoDB, Mongoose, GeoJSON, 2dsphere indexes
Auth	JWT access tokens, refresh tokens, bcryptjs
DevOps	Docker, Docker Compose, GitHub Actions, Render, Vercel

Core Features

Feature	Description
Live Map	Realtime user markers with avatar initials, status, and live movement updates.
Dashboard	Online users, sharing counters, event summaries, and fast navigation actions.
Events	Create events, join with invite codes, chat with participants, and share location inside event rooms.
Geofences	Create circular zones, set radius, choose enter/exit alerts, and monitor watched users.
History	Load recent GPS trails, render polylines, and calculate distance/speed summaries.
SOS	Broadcast emergency location with optional message.
Profile	Avatar upload, user info, sharing status, and session controls.

Project Structure

TrackLive/
|-- backend/
|   |-- src/
|   |   |-- app.js                  # Express app, middleware, CORS, routes
|   |   |-- server.js               # HTTP server and Socket.IO bootstrap
|   |   |-- config/                 # Database and seed scripts
|   |   |-- controllers/            # Auth, events, locations
|   |   |-- middleware/             # JWT auth and error handling
|   |   |-- models/                 # User, Location, Event, Geofence
|   |   |-- routes/                 # REST route modules
|   |   |-- socket/                 # Realtime connection handlers
|   |   `-- utils/                  # Logger
|   |-- Dockerfile
|   `-- package.json
|-- frontend/
|   |-- src/
|   |   |-- components/             # Dashboard, map, events, geofences, shared UI
|   |   |-- context/                # Auth, socket, toast state
|   |   |-- pages/                  # Auth page
|   |   |-- services/               # Axios API clients
|   |   |-- styles/                 # Global design system
|   |   |-- App.jsx
|   |   `-- index.js
|   |-- Dockerfile
|   `-- package.json
|-- docs/images/                    # README screenshots
|-- docker-compose.yml
`-- README.md

Getting Started

Prerequisites

• Node.js 18+
• MongoDB Atlas or local MongoDB
• Git

1. Clone

git clone https://github.com/manojk909/TrackLive.git
cd TrackLive

2. Configure Backend

Create backend/.env:

NODE_ENV=development
PORT=5000
MONGODB_URI=your_mongodb_connection_string

JWT_SECRET=your_access_token_secret_min_32_chars
JWT_EXPIRES_IN=15m
JWT_REFRESH_SECRET=your_refresh_token_secret_min_32_chars
JWT_REFRESH_EXPIRES_IN=7d

ALLOWED_ORIGINS=http://localhost:3000
FRONTEND_URL=http://localhost:3000
LOG_LEVEL=info

Generate strong secrets:

node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

3. Configure Frontend

Create frontend/.env:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_SOCKET_URL=http://localhost:5000

4. Install And Run

cd backend
npm install
npm run dev

In another terminal:

cd frontend
npm install
npm start

Open http://localhost:3000.

Docker

docker compose up --build

Common services:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000
• Health check: http://localhost:5000/health

Deployment

Backend On Render

Create a Render Web Service with root directory backend/.

Setting	Value
Build command	npm install
Start command	node src/server.js
Environment	NODE_ENV=production

Required environment variables:

MONGODB_URI=your_mongodb_atlas_uri
JWT_SECRET=strong_secret
JWT_REFRESH_SECRET=another_strong_secret
ALLOWED_ORIGINS=https://your-vercel-app.vercel.app
FRONTEND_URL=https://your-vercel-app.vercel.app

Frontend On Vercel

Deploy with root directory frontend/.

Setting	Value
Framework preset	Create React App
Build command	npm run build
Output directory	build

Recommended environment variables:

REACT_APP_API_URL=https://your-render-backend.onrender.com/api
REACT_APP_SOCKET_URL=https://your-render-backend.onrender.com

The app also includes production fallbacks for the current deployed backend:

• https://tracklive-backend.onrender.com/api
• https://tracklive-backend.onrender.com

API Reference

Base path: /api

Auth

Method	Endpoint	Purpose
POST	/auth/register	Create account and return tokens
POST	/auth/login	Login and return tokens
POST	/auth/refresh	Rotate refresh/access token pair
POST	/auth/logout	Revoke refresh token
GET	/auth/me	Fetch current user

Users

Method	Endpoint	Purpose
GET	/users/online	List online users
PATCH	/users/me	Update profile
POST	/users/me/avatar	Upload avatar

Locations

Method	Endpoint	Purpose
POST	/locations	Save location point
GET	/locations/history/:userId	Fetch movement history
GET	/locations/nearby	Find nearby users
POST	/locations/sos	Send SOS alert

Events And Geofences

Method	Endpoint	Purpose
GET	/events	List my events
POST	/events	Create event
POST	/events/join	Join by invite code
POST	/events/:id/messages	Send event chat message
GET	/geofences	List geofences
POST	/geofences	Create geofence
PATCH	/geofences/:id	Update geofence
DELETE	/geofences/:id	Delete geofence

Realtime Events

Client emits:

Event	Payload
start-sharing	optional event context
stop-sharing	none
location-update	{ lat, lng, accuracy, speed, heading, eventId }
join-event-room	{ eventId }
leave-event-room	{ eventId }

Server emits:

Event	Purpose
initial-locations	Sends current shared locations after connect
location-update	Broadcasts user location movement
user-status-changed	Online/sharing status changed
user-started-sharing	User began live sharing
user-stopped-sharing	User stopped live sharing
geofence-alert	Watched user entered/exited a zone
sos-alert	Emergency alert broadcast
new-message	Event chat message

Security Notes

• Passwords are hashed with bcrypt.
• JWT access tokens are short-lived.
• Refresh tokens are rotated and stored server-side.
• Protected routes use Bearer token middleware.
• Socket connections are authenticated before joining rooms.
• Express uses Helmet, request size limits, CORS allowlists, and rate limiting.
• Uploaded avatars are size/type checked before storage.

Useful Scripts

Backend

npm run dev      # Start backend with nodemon
npm start        # Start production server
npm run seed     # Seed demo data

Frontend

npm start        # Start React dev server
npm run build    # Create production build

Roadmap Ideas

• Friend/contact system with approval flows.
• Push notifications for geofence and SOS alerts.
• Event roles and admin moderation.
• Mobile PWA install prompts and background sync.
• Exportable location history reports.
• Team/workspace mode for organizations.

License

MIT