# 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

## Setup Instructions

1. Clone the repository
   ```bash
   git clone https://github.com/yourusername/realtime-location.git
   cd realtime-location
   ```

2. Install dependencies
   ```bash
   npm install
   ```

3. Create a `.env` file in the root directory with the following variables:
   ```
   DATABASE_URL="postgresql://username:password@localhost:5432/realtime_location"
   NEXTAUTH_SECRET="your-nextauth-secret-key"
   JWT_SECRET="your-jwt-secret-key"
   SMTP_HOST="smtp.example.com"
   SMTP_PORT=587
   SMTP_USER="your-email@example.com"
   SMTP_PASSWORD="your-email-password"
   EMAIL_FROM="your-email@example.com"
   NEXT_PUBLIC_SITE_URL="http://localhost:3000"
   ```

4. Set up the PostgreSQL database and run Prisma migrations
   ```bash
   npx prisma migrate dev
   ```

5. Start the development server
   ```bash
   npm run dev
   ```

6. Open [http://localhost:3000](http://localhost:3000) in your browser

## Features Implementation Status

- [x] Basic Next.js setup with TypeScript
- [x] UI components using Shadcn UI
- [x] OpenStreetMap integration with Leaflet
- [x] Real-time location tracking
- [x] Location sharing via email
- [ ] User authentication
- [ ] Database integration with Prisma
- [ ] Socket.IO for real-time updates
- [ ] Location history tracking
- [ ] QR code generation for sharing
- [ ] Mobile responsiveness improvements
- [ ] Testing
- [ ] Deployment

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Acknowledgments

- OpenStreetMap for providing the map data
- Shadcn UI for the beautiful component library
- Next.js team for the incredible framework