diff options
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 93 |
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 |