# Real-Time Location Tracking App

## Overview
This application enables real-time location tracking using OpenStreetMap. Users can share their location, which is updated in real-time, and the system sends an email notification containing their location information.

## Technical Stack

### Frontend
- **Next.js**: React framework for the application
- **Shadcn UI**: Component library for building the user interface
- **Leaflet/React-Leaflet**: For integrating OpenStreetMap
- **TailwindCSS**: For styling components
- **Zustand**: State management

### Backend
- **Next.js API Routes**: Server-side API endpoints
- **Prisma**: ORM for database interactions
- **PostgreSQL**: Database for storing user and location data
- **Socket.IO**: Real-time bidirectional communication
- **Nodemailer**: For sending email notifications

## Implementation Breakdown

### 1. Authentication System
- User registration and login
- JWT-based authentication
- Password reset functionality

### 2. OpenStreetMap Integration
- Map display with Leaflet/React-Leaflet
- Custom markers for user locations
- Zoom and pan controls
- Geolocation API integration

### 3. Real-Time Location Tracking
- Browser Geolocation API to obtain user coordinates
- Socket.IO for real-time updates
- Location history tracking
- Location update frequency controls

### 4. Email Notification System
- Nodemailer integration for sending emails
- Email templates for location sharing
- Link generation with location coordinates
- Email verification system

### 5. Database Structure
- User profiles
- Location history
- Sharing permissions
- Session management

### 6. Location Sharing Features
- Generate shareable links
- Permission management
- Time-based expiry for shared locations
- QR code generation for easy sharing

### 7. UI/UX Components
- Responsive map interface
- Location control panel
- User profile management
- Notifications center
- Settings page

### 8. Performance Optimization
- Server-side rendering for initial load
- Client-side updates for real-time data
- Data caching strategies
- Lazy loading of map components

### 9. Security Measures
- Data encryption
- HTTPS enforcement
- Rate limiting
- CORS policies
- Input validation

### 10. Deployment
- Vercel deployment setup
- Environment configuration
- CI/CD pipeline
- Performance monitoring

## Setup Instructions

1. Clone the repository
2. Install dependencies: `npm install`
3. Set up environment variables (see `.env.example`)
4. Set up PostgreSQL database
5. Run Prisma migrations: `npx prisma migrate dev`
6. Start the development server: `npm run dev`

## Project Structure

```
├── app/
│   ├── api/             # API routes
│   ├── components/      # Reusable UI components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions and services
│   ├── providers/       # Context providers
│   └── (routes)/        # App routes/pages
├── prisma/              # Database schema and migrations
├── public/              # Static assets
└── config/              # Configuration files
```

## Feature Implementation Plan

1. Project setup and environment configuration
2. Authentication system implementation
3. Database schema design and implementation
4. Map integration with OpenStreetMap
5. Real-time location tracking with Socket.IO
6. Email notification system
7. Location sharing functionality
8. UI/UX implementation with Shadcn
9. Security enhancements
10. Testing and deployment