# 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