Generate a fully functional, multi-page Next.js MVP application for 'Privacy Guardian' following the App Router structure. This application should empower users to understand and manage the data collection practices of government and public institution apps.
**1. PROJECT OVERVIEW:**
Privacy Guardian aims to solve the critical problem of intrusive data collection by government and public institution applications. Many of these apps request excessive permissions (precise GPS, fingerprint access, background location, camera, biometrics, modification of storage) and often include multiple trackers (AdMob, Google Analytics, etc.). The core value proposition is to provide users with transparency into these data collection practices, assess the privacy risks associated with specific apps, and offer guidance on protecting their digital privacy. We will analyze known government apps and potentially allow users to input their own installed apps for permission analysis.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL compatibility)
- **UI Library:** shadcn/ui (for pre-built, customizable components)
- **Authentication:** NextAuth.js (for robust user authentication with providers like Google, GitHub, or email/password)
- **Database:** PostgreSQL (or a compatible Drizzle ORM driver)
- **State Management:** React Context API and Server State (using `use` hook in App Router for server components, potentially Zustand or Jotai for complex client-side state if needed)
- **Form Handling:** React Hook Form + Zod for validation
- **API Client:** `fetch` API or libraries like `axios` if preferred for specific client-side interactions.
- **Deployment:** Vercel or similar platform.
**3. DATABASE SCHEMA (PostgreSQL via Drizzle ORM):**
```typescript
// schema.ts
import { pgTable, uuid, text, timestamp, varchar, boolean, integer, jsonb, pgEnum } from 'drizzle-orm/pg-core';
// Enum for permission sensitivity levels
const sensitivityEnum = pgEnum('sensitivity_level', ['low', 'medium', 'high', 'critical']);
export const users = pgTable('users', {
id: uuid('id').primaryKey().defaultRandom(),
name: text('name'),
email: text('email').unique().notNull(),
emailVerified: timestamp('emailVerified', { mode: 'date' }),
image: text('image'),
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
export const apps = pgTable('apps', {
id: uuid('id').primaryKey().defaultRandom(),
name: varchar('name', { length: 255 }).notNull(),
publisher: varchar('publisher', { length: 255 }),
description: text('description'),
iconUrl: text('iconUrl'), // URL to the app icon
privacyPolicyUrl: text('privacyPolicyUrl'),
websiteUrl: text('websiteUrl'),
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
export const appPermissions = pgTable('app_permissions', {
id: uuid('id').primaryKey().defaultRandom(),
appId: uuid('appId').notNull().references(() => apps.id, { onDelete: 'cascade' }),
permissionName: varchar('permissionName', { length: 255 }).notNull(), // e.g., 'ACCESS_FINE_LOCATION', 'READ_CONTACTS'
description: text('description'), // Explanation of what the permission does
sensitivity: sensitivityEnum('sensitivity').notNull(), // 'low', 'medium', 'high', 'critical'
isSystemLevel: boolean('isSystemLevel').default(false), // Indicates if it's a core OS permission or an app-specific request
createdAt: timestamp('createdAt').defaultNow(),
});
export const appTrackers = pgTable('app_trackers', {
id: uuid('id').primaryKey().defaultRandom(),
appId: uuid('appId').notNull().references(() => apps.id, { onDelete: 'cascade' }),
trackerName: varchar('trackerName', { length: 255 }).notNull(), // e.g., 'Google AdMob', 'Firebase Analytics'
purpose: text('purpose'), // e.g., 'Advertising', 'Analytics', 'Performance Monitoring'
dataCollected: jsonb('dataCollected'), // e.g., ['IP Address', 'Device ID', 'User Activity']
createdAt: timestamp('createdAt').defaultNow(),
});
// User's installed apps and their specific permission grants (for user-uploaded data)
export const userInstalledApps = pgTable('user_installed_apps', {
id: uuid('id').primaryKey().defaultRandom(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
appId: uuid('appId').notNull().references(() => apps.id, { onDelete: 'cascade' }),
grantedPermissions: jsonb('grantedPermissions'), // Array of permission names granted by the user
riskScore: integer('riskScore'), // Calculated risk score for this specific app for this user
lastScanned: timestamp('lastScanned').defaultNow(),
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
// User reports/feedback on apps
export const userReports = pgTable('user_reports', {
id: uuid('id').primaryKey().defaultRandom(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
appId: uuid('appId').notNull().references(() => apps.id, { onDelete: 'cascade' }),
reportType: varchar('reportType', { length: 255 }), // e.g., 'Misleading Description', 'Excessive Permissions'
comment: text('comment'),
createdAt: timestamp('createdAt').defaultNow(),
});
```
**4. CORE FEATURES & USER FLOW:**
**A. User Authentication:**
- **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Login'. Redirected to NextAuth.js sign-in page. Options: Google, GitHub, Email/Password. Upon successful authentication, user is redirected to their dashboard.
- **Edge Cases:** Invalid credentials, account locked, email verification pending.
**B. App Search & Details:**
- **Flow:** Authenticated user sees a search bar on the dashboard. They can search for app names (e.g., 'FEMA App', 'FBI Dashboard'). Search results display app name, publisher, and icon. Clicking a result navigates to the App Detail Page.
- **App Detail Page:** Displays comprehensive information: Icon, Name, Publisher, Description, Privacy Policy URL, Website URL. Crucially, it lists all `appPermissions` with their `sensitivity` levels and descriptions, and all `appTrackers` with their `purpose` and `dataCollected`. A calculated `overallRiskScore` (based on sensitive permissions and trackers) is prominently displayed.
- **Edge Cases:** App not found in database, missing data for an app.
**C. My Apps Analysis (User Uploaded Data - MVP Scope Limited):**
- **Flow (Future MVP Extension):** Users can manually input apps they have installed. For each app, they can list the permissions they've granted (e.g., via their phone's settings). This data is saved in `userInstalledApps`. The system calculates a personalized risk score based on the granted permissions and compares it to the general app profile.
- **MVP Focus:** Initially, this feature might be simplified to users *tagging* apps from the searchable database as 'Installed' and providing feedback rather than detailed permission lists.
- **Edge Cases:** User provides incorrect permission information, app not found in our database.
**D. Privacy Risk Assessment:**
- **Flow:** The risk score is calculated server-side for each app based on the number and `sensitivity` of `appPermissions` and the presence/type of `appTrackers`. Critical permissions (background location, biometrics) and trackers associated with data brokering or invasive advertising significantly increase the score. This score is displayed on the App Detail Page and potentially on the dashboard.
- **Algorithm (Example):** Base score + (Count of High Sensitivity Permissions * Weight_High) + (Count of Critical Permissions * Weight_Critical) + (Count of Trackers * Weight_Tracker). Weights are configurable.
- **Edge Cases:** Zero permissions/trackers (low score), multiple critical items (high score).
**E. Feedback & Reporting:**
- **Flow:** On the App Detail Page, users can submit feedback or reports via the `userReports` table (e.g., 'This app's description is misleading', 'Found new trackers not listed'). This feedback can be used to improve the app's data.
- **Edge Cases:** Malicious/spam reports.
**5. API & DATA FETCHING:**
- **App Router Approach:** Utilize Server Components for fetching data directly from the database (e.g., `apps`, `appPermissions`, `appTrackers`). Client Components will fetch data when necessary using API routes or directly call server actions.
- **API Routes (Example - for client-side fetching if needed):**
- `GET /api/apps?search={query}`: Returns a list of apps matching the search query.
- `GET /api/apps/{appId}`: Returns detailed information for a specific app.
- **Server Actions:** Preferred method for mutations (e.g., adding user reports, marking apps as installed). `POST /api/apps/{appId}/report` (using Server Action).
- **Data Flow:** Server Components fetch data related to the current page (e.g., app details). Client Components might fetch additional data or submit mutations via Server Actions or dedicated API routes.
- **Authentication:** Middleware will protect routes. NextAuth.js session data will be accessible in Server Components and Client Components.
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/layout.tsx`:** Root layout (HTML, Head, Body, global styles, Providers like NextAuth, ThemeProvider).
- **`app/page.tsx`:** Landing Page (Marketing content, brief intro to the problem, Call to Action for Sign Up/Login).
- **`app/auth/signin/page.tsx`:** Sign-in page using NextAuth.js components.
- **`app/dashboard/layout.tsx`:** Dashboard layout (includes sidebar/navbar).
- **`app/dashboard/page.tsx`:** Main Dashboard. Features: Search bar, list of recent searches, possibly a summary of 'my apps' risk score (future), quick links.
- **`app/apps/[appId]/page.tsx`:** App Detail Page. Displays all information about a specific app, including permissions, trackers, risk score, and the feedback form.
- **`app/apps/loading.tsx`:** Loading UI for app detail page.
- **`app/apps/[appId]/error.tsx`:** Error UI for app detail page.
- **`app/profile/page.tsx`:** User Profile Page. Displays user info, potentially settings for notifications, linked accounts.
- **`app/profile/edit/page.tsx`:** Edit Profile Page.
- **`app/about/page.tsx`:** About Us / How it Works page.
- **`app/privacy/page.tsx`:** Privacy Policy page.
- **`components/ui/`:** All shadcn/ui components (Button, Card, Input, SearchBar, AppCard, PermissionBadge, TrackerInfo, etc.).
- **`components/layout/`:** Navbar, Sidebar, Footer components.
- **`components/forms/`:** FeedbackForm, potentially ProfileEditForm.
- **`lib/`:** Utility functions, database client setup (Drizzle), auth configuration.
- **`hooks/`:** Custom React hooks (if any).
- **`styles/`:** Global CSS or Tailwind directives.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern, Clean, Trustworthy, slightly technical but accessible.
- **Color Palette:**
- Primary: `#007AFF` (Bright, trustworthy Blue)
- Secondary: `#34C759` (Positive, secure Green for good ratings)
- Accent/Alert: `#FF3B30` (Red for high risk/warnings)
- Background: `#F2F2F7` (Light Gray for content background)
- Card/Element BG: `#FFFFFF` (White)
- Text (Primary): `#1C1C1E` (Near Black)
- Text (Secondary): `#8E8E93` (Gray for subtitles/less important text)
- **Typography:** System fonts for native feel (e.g., `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`). Use appropriate font weights for hierarchy.
- **Layout:** Focus on clear information hierarchy. Use cards for distinct sections (App Info, Permissions, Trackers). Ample whitespace. Responsive design is crucial, ensuring usability on mobile and desktop.
- **Sections:** Header/Navbar, Main Content Area, Sidebar (for navigation in authenticated sections), Footer.
- **Animations:** Subtle fade-ins for content loading, smooth transitions between pages/states, hover effects on interactive elements (buttons, cards). Loading spinners/skeletons for data fetching.
**8. SAMPLE/MOCK DATA:**
* **App 1 (High Risk):**
* Name: "FBI Dashboard"
* Publisher: "Federal Bureau of Investigation"
* Description: "Official app for FBI news and alerts."
* Permissions: [{"name": "ACCESS_FINE_LOCATION", "sensitivity": "high"}, {"name": "READ_PHONE_STATE", "sensitivity": "medium"}, {"name": "BILLING", "sensitivity": "low"}, {"name": "FOREGROUND_SERVICE", "sensitivity": "medium"}]
* Trackers: [{"name": "Google AdMob", "purpose": "Advertising", "dataCollected": ["IP Address", "Device ID", "Ad Interactions"]}]
* Overall Risk Score: 85/100
* **App 2 (Medium Risk):**
* Name: "CBP Passport Control"
* Publisher: "U.S. Customs and Border Protection"
* Description: "Manage your border crossings."
* Permissions: [{"name": "CAMERA", "sensitivity": "high"}, {"name": "ACCESS_BACKGROUND_LOCATION", "sensitivity": "critical"}, {"name": "USE_BIOMETRIC", "sensitivity": "high"}, {"name": "WRITE_EXTERNAL_STORAGE", "sensitivity": "medium"}]
* Trackers: []
* Overall Risk Score: 92/100
* **App 3 (Low Risk - Hypothetical Alternative):
* Name: "Citizen Weather Alert"
* Publisher: "OpenWeather Project"
* Description: "Provides local weather alerts."
* Permissions: [{"name": "ACCESS_COARSE_LOCATION", "sensitivity": "low"}]
* Trackers: [{"name": "Custom Analytics", "purpose": "Performance Improvement", "dataCollected": ["Anonymized Usage Stats"]}]
* Overall Risk Score: 15/100
* **App 4 (High Risk - Data Broker):
* Name: "SmartLINK ICE Monitor"
* Publisher: "ICE Enforcement Agency"
* Description: "ICE operational monitoring tool."
* Permissions: [{"name": "ACCESS_FINE_LOCATION", "sensitivity": "high"}, {"name": "RECORD_AUDIO", "sensitivity": "high"}, {"name": "READ_CONTACTS", "sensitivity": "medium"}, {"name": "READ_CALL_LOG", "sensitivity": "medium"}]
* Trackers: [{"name": "Venntel Data Broker", "purpose": "Location Data Aggregation", "dataCollected": ["Precise Geolocation", "Device Identifiers", "User Movement Patterns", "Voice Prints", "Pregnancy Data"]}]
* Overall Risk Score: 98/100
* **App 5 (Medium Risk):
* Name: "AP News"
* Publisher: "Associated Press"
* Description: "Get the latest news updates."
* Permissions: [{"name": "INTERNET", "sensitivity": "low"}, {"name": "ACCESS_NETWORK_STATE", "sensitivity": "low"}]
* Trackers: [{"name": "Firebase Analytics", "purpose": "App Usage Analytics", "dataCollected": ["Session Duration", "Screen Views"]}]
* Overall Risk Score: 10/100
**9. TURKISH TRANSLATIONS:**
- **App Title:** Gizlilik Gözcüsü (Privacy Guardian)
- **Sign Up:** Kayıt Ol
- **Login:** Giriş Yap
- **Search Apps:** Uygulamaları Ara
- **App Details:** Uygulama Detayları
- **Permissions:** İzinler
- **Trackers:** Takipçiler
- **Privacy Risk:** Gizlilik Riski
- **High Risk:** Yüksek Risk
- **Medium Risk:** Orta Risk
- **Low Risk:** Düşük Risk
- **Submit Report:** Rapor Gönder
- **Feedback:** Geri Bildirim
- **My Apps:** Benim Uygulamalarım
- **Dashboard:** Kontrol Paneli
- **Profile:** Profil
- **Settings:** Ayarlar
- **Loading...:** Yükleniyor...
- **No data available:** Veri mevcut değil.
- **View Privacy Policy:** Gizlilik Politikasını Görüntüle
- **Visit Website:** Web Sitesini Ziyaret Et
- **Permissions Granted:** Verilen İzinler
- **Data Collected:** Toplanan Veriler
- **Purpose:** Amaç
- **Sensitivity:** Hassasiyet
- **Critical:** Kritik
- **High:** Yüksek
- **Medium:** Orta
- **Low:** Düşük