aboutsummaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'README.md')
-rw-r--r--README.md93
1 files changed, 93 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..400b429
--- /dev/null
+++ b/README.md
@@ -0,0 +1,93 @@
+# 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
+
+## License
+
+MIT \ No newline at end of file