blob: 7aef3e47e222ac8f9b9aca83c60a75aeac2c5ca7 (
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
# 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
|
