Generate a fully functional, multi-page Next.js MVP application for DroneGuard. This application will empower drone operators, journalists, and activists by monitoring flight restrictions, providing legal resources, and facilitating reporting of potential rights infringements. The core value proposition is to ensure safe, legal, and informed drone operations in compliance with regulations while protecting freedom of expression.
**1. PROJECT OVERVIEW:**
DroneGuard addresses the growing concern around restrictive airspace regulations, particularly those impacting the ability to record law enforcement and government agencies. The FAA's Temporary Flight Restrictions (TFRs), like the one mentioned concerning ICE/CBP, can hinder journalistic work and public oversight. DroneGuard will provide a centralized platform for users to stay informed about flight restrictions, understand their legal rights, and report potential violations. The app aims to be a vital tool for anyone operating drones for journalistic, advocacy, or public interest purposes, ensuring they can operate safely and legally while safeguarding fundamental rights.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (for PostgreSQL)
- **Database:** PostgreSQL
- **Authentication:** NextAuth.js (with Google, GitHub, and email providers)
- **UI Library:** shadcn/ui (for accessible and customizable components)
- **State Management:** React Context API / Zustand (for global state, if needed)
- **Data Fetching:** Server Actions and Route Handlers for API calls
- **Form Handling:** React Hook Form with Zod for validation
- **Deployment:** Vercel
- **Other Libraries:** date-fns (date manipulation), lucide-react (icons)
**3. DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
* **users Table:**
* `id` (uuid, primary key, default gen_random_uuid())
* `name` (text)
* `email` (text, unique)
* `emailVerified` (timestamp)
* `image` (text)
* `createdAt` (timestamp, default now())
* `updatedAt` (timestamp, default now())
* **accounts Table:** (For NextAuth.js)
* `id` (uuid, primary key, default gen_random_uuid())
* `userId` (uuid, foreign key to users.id)
* `type` (text)
* `provider` (text)
* `providerAccountId` (text)
* `refresh_token` (text)
* `access_token` (text)
* `expires_at` (timestamp)
* `token_type` (text)
* `scope` (text)
* `id_token` (text)
* `session_state` (text)
* **sessions Table:** (For NextAuth.js)
* `id` (uuid, primary key, default gen_random_uuid())
* `sessionToken` (text, unique)
* `userId` (uuid, foreign key to users.id)
* `expires` (timestamp)
* **verificationTokens Table:** (For NextAuth.js)
* `identifier` (text)
* `token` (text)
* `expires` (timestamp)
* **flightRestrictions Table:**
* `id` (uuid, primary key, default gen_random_uuid())
* `faaId` (text, unique, indexed) // FAA's unique identifier for the TFR
* `title` (text)
* `description` (text)
* `effectiveDateTime` (timestamp)
* `expiryDateTime` (timestamp)
* `centerLat` (numeric)
* `centerLon` (numeric)
* `radiusMiles` (numeric)
* ` wilayah` (text) // e.g., 'National', 'State', 'Local'
* `relevantAgencies` (jsonb) // e.g., ['ICE', 'CBP', 'FAA', 'TSA']
* `isPermanent` (boolean, default false)
* `sourceUrl` (text)
* `createdAt` (timestamp, default now())
* `updatedAt` (timestamp, default now())
* **userPreferences Table:**
* `id` (uuid, primary key, default gen_random_uuid())
* `userId` (uuid, unique, foreign key to users.id)
* `notificationRadiusMiles` (integer, default 10)
* `trackedAgencies` (jsonb) // Array of agencies to get alerts for, e.g., ['ICE', 'CBP']
* `trackedRegions` (jsonb) // Array of region names or lat/lon/radius for alerts
* `receiveEmailAlerts` (boolean, default true)
* `receivePushAlerts` (boolean, default false)
* **legalResources Table:**
* `id` (uuid, primary key, default gen_random_uuid())
* `title` (text)
* `category` (text) // e.g., 'Regulations', 'Case Law', 'Articles', 'FAA Guidance'
* `url` (text)
* `summary` (text)
* `tags` (jsonb)
* `createdAt` (timestamp, default now())
* **reports Table:**
* `id` (uuid, primary key, default gen_random_uuid())
* `userId` (uuid, foreign key to users.id)
* `restrictionId` (uuid, foreign key to flightRestrictions.id, nullable) // Link to a specific restriction if applicable
* `reportType` (text) // e.g., 'Potential Infringement', 'Feedback', 'Other'
* `description` (text)
* `incidentDateTime` (timestamp)
* `location` (text)
* `evidenceUrl` (text, nullable) // Link to uploaded evidence (e.g., video, image)
* `status` (text, default 'New') // e.g., 'New', 'Under Review', 'Action Taken', 'Closed'
* `createdAt` (timestamp, default now())
**4. CORE FEATURES & USER FLOW:**
* **Authentication (NextAuth.js):**
* Flow: User lands on homepage -> Clicks 'Sign Up/Login' -> Presented with options (Google, GitHub, Email/Password) -> User selects provider -> Redirected to provider for authentication -> Redirected back to DroneGuard dashboard.
* Protected Routes: Dashboard, Settings, Report Submission pages require authentication.
* Edge Cases: Invalid credentials, provider errors, email verification.
* **Flight Restriction Monitoring & Display:**
* Flow: Admin/Scheduled Task (or Server Action on startup) fetches TFR data from FAA API (or reliable public sources). Data is parsed, cleaned, and stored in `flightRestrictions` table. Frontend fetches and displays restrictions based on user preferences (location, date range).
* User Experience: A main dashboard displays active restrictions, filterable by date, region, and agency. A map view (using a library like Leaflet or Mapbox GL JS) visualizes restriction zones.
* Details View: Clicking a restriction shows all details: FAA ID, title, description, effective/expiry times, location (map marker), radius, relevant agencies, source URL.
* **User Preferences & Notifications:**
* Flow: Authenticated user navigates to 'Settings' -> Configures notification radius, preferred agencies, and tracked regions. Saves preferences via Server Action.
* Backend Logic: A scheduled job or webhook listener checks new/updated restrictions against user preferences. If a match occurs, a notification is triggered (e.g., via email using a service like Resend/Nodemailer, or potentially push notifications if implemented).
* Edge Cases: User has no preferences set, notification service fails.
* **Legal Resources Browser:**
* Flow: User navigates to 'Legal Resources' -> Sees a categorized list of articles, regulations, case summaries. -> Can filter by category, search by keyword.
* Content Display: Clicking a resource shows its title, summary, and provides a link to the external URL. Data is fetched from `legalResources` table.
* Admin Interface (Implied): A mechanism (e.g., a separate admin panel or a simple form in the app) for adding/updating legal resources.
* **Report Submission:**
* Flow: User navigates to 'Submit Report' -> Selects report type -> Fills out description, incident date/time, location. Optionally links to a related restriction and uploads evidence (requires cloud storage like S3/Cloudinary integration).
* Submission: Data saved to `reports` table via Server Action. Validation ensures all required fields are present.
* Status Tracking: User can view the status of their submitted reports.
* Edge Cases: File upload fails, invalid data, network errors.
**5. API & DATA FETCHING:**
- **Next.js App Router:** Utilize Server Components for initial data loading and client-side fetching where necessary.
- **Server Actions:** For mutations (creating/updating user preferences, submitting reports). Example: `await updateUserPreferences(formData)`. These will handle DB interactions directly.
- **Route Handlers (API Routes):** For fetching data that doesn't fit Server Actions or for external API integrations (e.g., fetching TFR data initially). Example: `GET /api/restrictions`. Provide `json()` responses.
- **Data Flow:** Server Components fetch data directly from the DB using Drizzle. Client Components can trigger Server Actions or fetch data from Route Handlers.
- **Authentication:** NextAuth.js middleware handles session management and protects routes.
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
* **`app/layout.tsx`:** Root layout with shared UI (Navbar, Footer), global styles, and metadata.
* **`app/page.tsx`:** Landing Page - Introduction to DroneGuard, value proposition, call to action (Sign Up/Login).
* **`app/(auth)/login/page.tsx`:** Login page with provider options.
* **`app/(auth)/signup/page.tsx`:** Sign up page (if using email/password).
* **`app/(protected)/dashboard/page.tsx`:** (Protected) Main dashboard. Displays a summary of active restrictions, recent alerts, quick links.
* Components: `RestrictionList`, `AlertFeed`, `MapOverview`.
* **`app/(protected)/restrictions/page.tsx`:** (Protected) Detailed view of all flight restrictions. Includes filtering, sorting, search, and map integration.
* Components: `RestrictionFilter`, `RestrictionTable`, `RestrictionMap`, `RestrictionDetailModal`.
* **`app/(protected)/settings/page.tsx`:** (Protected) User profile and preference management.
* Components: `ProfileForm`, `NotificationSettingsForm`.
* **`app/(protected)/resources/page.tsx`:** (Protected) Legal resources browser.
* Components: `ResourceCategoryFilter`, `ResourceSearch`, `ResourceList`, `ResourceDetailView`.
* **`app/(protected)/reports/page.tsx`:** (Protected) Form for submitting new reports and viewing past reports.
* Components: `ReportForm`, `ReportList`, `ReportDetailView`.
* **Shared UI Components (in `components/ui` using shadcn/ui):** `Button`, `Input`, `Card`, `Table`, `Alert`, `Dialog`, `Form`, `DropdownMenu`, `Avatar`, `Separator`, `Tabs`, `Badge`, `Checkbox`, `Label`, `Sheet`, `Skeleton`, `Toaster`.
* **Layout Components (e.g., `components/layout/Navbar.tsx`, `components/layout/Footer.tsx`, `components/layout/Sidebar.tsx` if applicable).**
* **State Management:** Primarily Server Component data fetching. Use Zustand or Context API for cross-client-component state if needed (e.g., managing map interactions).
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** Minimalist Clean with subtle modern accents.
- **Color Palette:**
* Primary: `#007AFF` (Vibrant Blue - for actions, links)
* Secondary: `#5856D6` (Muted Purple - for accents, highlights)
* Background: `#FFFFFF` (White)
* Surface/Card: `#F2F2F7` (Light Gray)
* Text (Primary): `#000000` (Black)
* Text (Secondary): `#8E8E93` (Gray)
* Success: `#34C759` (Green)
* Warning: `#FF9500` (Orange)
* Danger: `#FF3B30` (Red)
- **Typography:** System fonts for clean rendering. Use `Inter` or `SF Pro` via Tailwind CSS configuration.
* Headings: `font-bold`, `text-3xl` to `text-5xl`
* Body: `font-normal`, `text-base`
- **Layout:** Use a consistent 12-column Tailwind grid. Ample whitespace. Clear visual hierarchy.
- **Responsiveness:** Mobile-first approach. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) for breakpoints. Ensure navigation adapts well.
- **Iconography:** Use `lucide-react` for clear, consistent icons.
**8. SAMPLE/MOCK DATA:**
* **`flightRestrictions`:**
1. `{ faaId: 'FDC-2024-1234', title: 'National TFR - ICE Enforcement Zone', description: 'Temporary flight restriction within 0.5 miles of any ICE or CBP vehicle nationwide.', effectiveDateTime: '2024-01-16T00:00:00Z', expiryDateTime: '2025-10-29T23:59:59Z', centerLat: null, centerLon: null, radiusMiles: null, region: 'National', relevantAgencies: ['ICE', 'CBP', 'FAA'], isPermanent: false, sourceUrl: 'https://tfr.faa.gov/save_pages/detail_1234.html' }`
2. `{ faaId: 'FDC-2024-5678', title: 'Major Event TFR - Super Bowl LIX', description: 'Airspace restricted around Allegiant Stadium.', effectiveDateTime: '2025-02-09T18:00:00Z', expiryDateTime: '2025-02-09T23:00:00Z', centerLat: 36.0800, centerLon: -115.1364, radiusMiles: 5, region: 'Las Vegas, NV', relevantAgencies: ['FAA', 'Local LE'], isPermanent: false, sourceUrl: 'https://tfr.faa.gov/save_pages/detail_5678.html' }`
3. `{ faaId: 'P-1234', title: 'Restricted Airspace - Presidential Visit', description: 'Area restricted due to Presidential movement.', effectiveDateTime: '2024-11-15T09:00:00Z', expiryDateTime: '2024-11-15T17:00:00Z', centerLat: 38.9072, centerLon: -77.0369, radiusMiles: 3, region: 'Washington D.C.', relevantAgencies: ['FAA', 'Secret Service'], isPermanent: false, sourceUrl: 'https://tfr.faa.gov/save_pages/detail_9012.html' }`
* **`legalResources`:**
1. `{ title: 'FAA Advisory Circular AC 107-2A', category: 'Regulations', url: 'https://www.faa.gov/documentLibrary/media/Advisory_Circular/AC_107-2A.pdf', summary: 'Provides guidance for small unmanned aircraft systems.', tags: ['drone', 'regulation', 'sUAS'] }`
2. `{ title: 'First Amendment - Freedom of Speech', category: 'Case Law', url: 'https://constitutioncenter.org/the-constitution/amendments/amendment-i', summary: 'Protects freedom of speech and the press.', tags: ['First Amendment', 'free speech', 'journalism'] }`
3. `{ title: 'ACLU - Know Your Rights: Recording Police', category: 'Articles', url: 'https://www.aclu.org/know-your-rights/stopped-by-the-police', summary: 'Information on the right to record law enforcement.', tags: ['recording', 'police', 'rights', 'ACLU'] }`
* **`reports`:**
1. `{ userId: 'some-user-id', reportType: 'Potential Infringement', description: 'Felt pressured to stop filming a CBP vehicle, despite being over 0.5 miles away.', incidentDateTime: '2024-10-20T14:30:00Z', location: 'Near US-Mexico Border Crossing', status: 'New' }`
* **`userPreferences`:**
1. `{ userId: 'user-id-123', notificationRadiusMiles: 5, trackedAgencies: ['ICE', 'CBP'], trackedRegions: ['National'], receiveEmailAlerts: true, receivePushAlerts: false }`
**9. TURKISH TRANSLATIONS (for UI elements):**
- **App Title:** DroneGuard
- **Login/Sign Up:** Giriş Yap / Kayıt Ol
- **Dashboard:** Kontrol Paneli
- **Restrictions:** Kısıtlamalar
- **Map:** Harita
- **Settings:** Ayarlar
- **Profile:** Profil
- **Notifications:** Bildirimler
- **Legal Resources:** Yasal Kaynaklar
- **Submit Report:** Rapor Gönder
- **My Reports:** Raporlarım
- **Active Restrictions:** Aktif Kısıtlamalar
- **Filter:** Filtrele
- **Search:** Ara
- **Save:** Kaydet
- **Cancel:** İptal
- **New Report:** Yeni Rapor
- **Report Type:** Rapor Türü
- **Description:** Açıklama
- **Incident Date/Time:** Olay Tarihi/Saati
- **Location:** Konum
- **Evidence (Optional):** Kanıt (İsteğe Bağlı)
- **Submit:** Gönder
- **Status:** Durum
- **Effective From:** Geçerlilik Başlangıcı
- **Expires On:** Bitiş Tarihi
- **Distance:** Mesafe
- **Tracked Agencies:** Takip Edilen Kurumlar
- **Notification Radius:** Bildirim Mesafesi
**10. ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/out using Next.js `AnimatePresence` or Framer Motion.
- **Hover Effects:** Slight scale-up or background color change on interactive elements (buttons, links, cards).
- **Loading States:** Use shadcn/ui's `Skeleton` component or simple spinners (`lucide-react`'s `Loader` icon) with `opacity` transitions for data fetching.
- **Form Submissions:** Button changes to a loading state with a spinner. Show a toast notification on success or error.
**11. EDGE CASES:**
- **Initial State:** Display empty states with clear calls to action (e.g., 'No restrictions found matching your criteria.', 'Configure your settings to receive alerts.').
- **Authentication:** Handle expired sessions, redirect to login, display appropriate messages.
- **Data Fetching Errors:** Implement try-catch blocks in Server Actions and API routes. Show user-friendly error messages using the `Toaster` component. Implement fallback UI.
- **Form Validation:** Use Zod and React Hook Form for robust client-side and server-side validation. Provide clear error messages next to fields.
- **No Data Available:** Gracefully handle cases where FAA API or other data sources are unavailable or return errors.
- **Permissions:** Ensure users can only access/modify their own data (preferences, reports).
- **Large Datasets:** Implement pagination for restriction lists and reports if the number of entries grows significantly.
- **Map Interactions:** Handle cases where map tiles fail to load or user location services are unavailable.