blob: ed00e45fc391c28cef35362aed59ed9a20c5d1ae (
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
# 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="[email protected]"
SMTP_PASSWORD="your-email-password"
EMAIL_FROM="[email protected]"
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
|
