Real-Time Location Tracking App

A Next.js application for real-time location tracking and sharing using Socket.IO.

Features

Real-Time Location Tracking

• Track your location in real-time on an interactive map
• Share your location with other users
• See other users' locations updated in real-time
• Direct location sharing between specific users

Location Sharing via Email

• Generate shareable links for location sharing
• Email location links to anyone
• Set expiration times for shared locations
• View shared locations without an account

Tech Stack

• Frontend: Next.js, React, TypeScript, TailwindCSS, shadcn/ui
• Maps: Leaflet with OpenStreetMap
• Real-Time Communication: Socket.IO
• Email: Integrated email services

Implementation Details

Socket.IO Implementation

The real-time features are implemented using Socket.IO with the following main components:

1. Server-Side Socket.IO Service: - Located in src/server/socket.ts and src/services/socketService.ts - Manages user connections, broadcasting, and direct messaging - Tracks active users and their socket IDs

2. Client-Side Socket Hook: - Located in src/hooks/useSocket.ts - Manages client-side socket connection and events - Provides functions for location updates and sharing

3. Events: - user:register: Register a user with the socket server - location:update: Broadcast location updates to all users - location:share: Share location with a specific user - users:update: Update the list of active users - location:broadcast: Receive broadcasted location updates - location:shared: Receive shared location from another user

Map Component

The interactive map is implemented using Leaflet with OpenStreetMap:

• Located in src/components/Map.tsx
• Supports real-time location updates
• Displays user and shared locations
• Tracks location history with path visualization

Setup and Configuration

1. Install dependencies: npm install

2. Start the development server: npm run dev

3. Start the Socket.IO server: npm run socket

Environment Variables

Create a .env file with the following variables:

NEXT_PUBLIC_APP_URL=http://localhost:3000
SOCKET_PORT=3001

Pages

• /: Home page with feature overview
• /track: Real-time location tracking page
• /view/[userId]: View a specific user's location
• /map: Location sharing via email page
• /shared/[token]: View a shared location