blob: f9dfa92933495dee80a8b53512737cc6810154d4 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
# 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
|
