## AI Master Prompt: Privacy Shield MVP Development
### 1. PROJECT OVERVIEW:
**Project Name:** Privacy Shield
**Core Problem:** Microsoft Windows'u giderek daha fazla zorunlu yapay zeka entegrasyonları (Copilot), istenmeyen reklamlar (Promoted), hesap kilidi (Account Lock-in), zorunlu bulut senkronizasyonu (OneDrive Hijacking), gizlilik ihlali oluşturan ekran kaydı özellikleri (Recall), e-atık yaratan donanım gereksinimleri, karanlık desenler (Dark Patterns) ve şeffaf olmayan telemetri ayarları ile dolduruyor. Bu durum, kullanıcıların işletim sistemleri üzerindeki kontrolünü azaltmakta ve gizliliklerini tehlikeye atmaktadır.
**Value Proposition:** Privacy Shield, kullanıcılara Windows ekosistemine yakın, tanıdık bir arayüz sunarken, bu zorunlu ve gizlilik ihlali oluşturan ögeleri ortadan kaldırarak tam kontrol ve mahremiyet sağlayan, güvenli ve özelleştirilebilir bir işletim sistemi katmanı veya alternatif arayüzdür. Kullanıcılar, verilerinin nerede saklandığına, hangi özelliklerin çalıştığına ve sistemlerinin nasıl davrandığına tam hakimiyet kurabilirler.
**Target Platform:** Desktop (Windows, macOS, Linux üzerinde çalışabilen bir uygulama veya hafif bir işletim sistemi).
### 2. TECH STACK:
* **Frontend Framework:** Next.js (App Router)
* **UI Library:** shadcn/ui (Tailwind CSS ile entegre)
* **Styling:** Tailwind CSS
* **State Management:** Zustand (veya React Context API kritik durumlar için)
* **ORM:** Drizzle ORM
* **Database:** PostgreSQL (veya SQLite MVP için)
* **Authentication:** NextAuth.js (Credentials, Google/GitHub providers)
* **Form Handling:** React Hook Form + Zod for validation
* **Data Fetching:** Server Actions (Next.js App Router), React Query (isteğe bağlı client-side caching için)
* **Icons:** Lucide React
* **Deployment:** Vercel (veya benzeri Next.js uyumlu platform)
### 3. DATABASE SCHEMA:
**1. `users` Table:**
- `id` (UUID, Primary Key)
- `name` (VARCHAR, nullable)
- `email` (VARCHAR, Unique, Not Null)
- `emailVerified` (TIMESTAMP, nullable)
- `image` (TEXT, nullable)
- `password` (TEXT, nullable) // For credentials provider
- `createdAt` (TIMESTAMP, Default: now())
- `updatedAt` (TIMESTAMP, Default: now())
**2. `accounts` Table (for NextAuth.js):**
- `id` (BIGSERIAL, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`, Not Null)
- `type` (TEXT, Not Null) // 'oauth' or 'credentials'
- `provider` (TEXT, Not Null)
- `providerAccountId` (TEXT, Not Null)
- `refresh_token` (TEXT, nullable)
- `access_token` (TEXT, nullable)
- `expires_at` (BIGINT, nullable)
- `token_type` (TEXT, nullable)
- `scope` (TEXT, nullable)
- `id_token` (TEXT, nullable)
- `session_state` (TEXT, nullable)
**3. `sessions` Table (for NextAuth.js):**
- `sessionToken` (VARCHAR, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`, Not Null)
- `expires` (TIMESTAMP, Not Null)
**4. `verificationTokens` Table (for NextAuth.js):**
- `identifier` (TEXT, Not Null)
- `token` (TEXT, Not Null)
- `expires` (TIMESTAMP, Not Null)
**5. `settings` Table:**
- `userId` (UUID, Primary Key, Foreign Key to `users.id`)
- `interfaceTheme` (VARCHAR, Default: 'system') // 'light', 'dark', 'system'
- `customThemeName` (VARCHAR, nullable) // For user-defined themes
- `enableCopilot` (BOOLEAN, Default: false)
- `enableAds` (BOOLEAN, Default: false)
- `enableTelemetry` (BOOLEAN, Default: false)
- `enableRecall` (BOOLEAN, Default: false)
- `recallStorageType` (VARCHAR, Default: 'local') // 'local', 'encrypted_cloud'
- `autoSyncOneDrive` (BOOLEAN, Default: false)
- `fileDeletionOnLimit` (BOOLEAN, Default: false)
- `allowLocalAccounts` (BOOLEAN, Default: true)
- `createdAt` (TIMESTAMP, Default: now())
- `updatedAt` (TIMESTAMP, Default: now())
**6. `customThemes` Table (Optional for MVP, can be JSON in `settings`):**
- `id` (SERIAL, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`)
- `themeName` (VARCHAR, Not Null)
- `primaryColor` (VARCHAR, Not Null)
- `secondaryColor` (VARCHAR, Not Null)
- `accentColor` (VARCHAR, Not Null)
- `backgroundColor` (VARCHAR, Not Null)
- `textColor` (VARCHAR, Not Null)
**7. `blockedFeatures` Table (For features to block/monitor):**
- `id` (SERIAL, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`)
- `featureName` (VARCHAR, Not Null) // e.g., 'CopilotInjection', 'PromotedAds', 'RecallFeature'
- `status` (VARCHAR, Default: 'blocked') // 'blocked', 'monitored', 'allowed'
**Relationships:**
* One-to-One: `users` to `settings` (can be extended with `customThemes`)
* One-to-Many: `users` to `accounts`
* One-to-Many: `users` to `blockedFeatures`
### 4. CORE FEATURES & USER FLOW:
**A. Authentication Flow:**
1. **Initial Visit:** User lands on the homepage. Sees a brief value proposition and options to 'Sign In' or 'Sign Up'.
2. **Sign Up:** User clicks 'Sign Up'. Presented with options: Email/Password, Google, GitHub.
* **Email/Password:** User enters email and password. Zod validation checks format. Server Action creates a new user in `users` table and `settings` table (with defaults). `verificationTokens` generated. Email verification link sent.
* **OAuth (Google/GitHub):** User clicks provider. Redirected to OAuth provider. User authenticates. Redirected back to Privacy Shield. NextAuth.js handles account creation/linking in `users`, `accounts` tables. User is logged in.
3. **Sign In:** User clicks 'Sign In'. Presented with same options.
* **Email/Password:** User enters credentials. Server Action verifies against `users` table. If verified, NextAuth.js session is created.
* **OAuth:** Similar to sign up.
4. **Email Verification:** User clicks verification link. Server Action updates `emailVerified` timestamp in `users` table. User is redirected to dashboard.
5. **Session Management:** NextAuth.js handles session cookies and server-side checks for protected routes.
**B. Dashboard & Core Interface:**
1. **Access:** Logged-in users see the main dashboard.
2. **Layout:** Clean, minimalist layout (see UI/UX section). Main navigation (sidebar/topbar) includes links to Dashboard, Settings, File Manager (mock), and potentially a 'Security Status' overview.
3. **Data Display:** Dashboard shows key privacy metrics (e.g., 'Telemetry Blocked: ON', 'Ads Blocked: ON', 'AI Features Disabled: ON'). Uses Server Components to fetch initial user settings and display them.
4. **User Flow:** User can navigate to 'Settings' to adjust privacy preferences.
**C. Settings Management:**
1. **Access:** Navigate to the 'Settings' page.
2. **UI:** Uses shadcn/ui components (Toggle switches, dropdowns, input fields) organized into logical sections (e.g., 'Interface', 'Privacy Controls', 'AI & Integrations', 'File Management').
3. **Functionality:**
* **Interface Theme:** Select 'Light', 'Dark', or 'System'. Changes UI theme immediately using Zustand/Context.
* **AI Integration (Copilot):** Toggle switch to enable/disable Copilot. Updates `settings.enableCopilot`. If disabled, relevant UI elements are hidden/disabled.
* **Ads:** Toggle switch to enable/disable 'Promoted' ads. Updates `settings.enableAds`.
* **Telemetry:** Toggle switch. Updates `settings.enableTelemetry`. If false, API routes/backend logic simulate telemetry blocking.
* **Recall Feature:** Toggle switch. Updates `settings.enableRecall`. If enabled, prompts user for storage type (`recallStorageType` Local/Encrypted Cloud) and potentially configures local storage path.
* **File Management (OneDrive Sync):** Toggle switch for `autoSyncOneDrive`. If disabled, UI warns that local files are primary and cloud sync is off.
* **Local Accounts:** Toggle switch for `allowLocalAccounts`. Updates setting.
4. **Saving:** Changes are saved via Server Actions directly updating the `settings` table for the logged-in user. Optimistic UI updates where appropriate.
**D. Feature Blocking/Monitoring (Conceptual MVP - UI Representation):
1. **Access:** 'Security Status' or dedicated section in Settings.
2. **UI:** A list of potential Windows features (Copilot, Promoted Ads, Recall, Telemetry, Edge Hijacking) with their current status ('Protected', 'Monitored', 'Vulnerable').
3. **User Action:** User can click to 'Block' or 'Monitor' a feature. This updates the `blockedFeatures` table.
4. **Backend Simulation:** In a true OS, this would involve system-level changes. In the MVP, this primarily serves to inform the user and potentially alter the frontend's behavior or display messages.
### 5. API & DATA FETCHING:
* **Authentication:** `POST /api/auth/signup`, `POST /api/auth/signin`, `POST /api/auth/signout` (handled by NextAuth.js)
* **Settings CRUD:** All settings operations will use Next.js Server Actions for direct server-side database interaction.
* `fetchUserSettings()`: Server Action to get current user's settings from `settings` table. Used in Server Components on load.
* `updateSetting(key: string, value: any)`: Server Action to update a specific setting. Takes setting key and new value. Updates `settings` table. Returns success/failure.
* **Data Flow:**
* **Server Components:** Fetch user settings directly using Server Actions for initial render (e.g., on Dashboard and Settings pages).
* **Client Components:** Use `useState` or Zustand for immediate UI updates. Trigger Server Actions for persistence (e.g., toggling a switch in Settings). Use `use` hook with Server Actions or `fetch` for data needed client-side.
* **API Routes (Minimal for MVP):** Primarily for NextAuth.js. Other logic should leverage Server Actions for cleaner integration with App Router.
### 6. COMPONENT BREAKDOWN (Next.js App Router Structure):
* `app/layout.tsx`: Root layout, includes `<html>`, `<body>`, global providers, Tailwind CSS setup, ThemeProvider.
* `app/page.tsx`: Landing Page (Homepage).
* Components: `HeroSection`, `ProblemStatement`, `Solution`, `Features`, `CTAs` (Sign Up/In).
* `app/auth/layout.tsx`: Auth layout wrapper.
* `app/auth/signin/page.tsx`: Sign In page.
* Components: `SignInForm` (Email/Pass), OAuth buttons.
* `app/auth/signup/page.tsx`: Sign Up page.
* Components: `SignUpForm` (Email/Pass), OAuth buttons.
* `app/dashboard/page.tsx`: Main dashboard after login.
* Server Component.
* Components: `DashboardLayout` (Sidebar/Topbar), `PrivacyMetricsCard`, `WelcomeMessage`.
* `app/settings/page.tsx`: User settings configuration page.
* Client Component (due to interactive toggles).
* Components: `SettingsLayout`, `ThemeSwitcher` (uses `use` hook with Server Action for initial value), `PrivacyToggles` (Copilot, Ads, Telemetry, Recall), `FileManagementSettings`, `AccountSettings`.
* `app/components/`: Shared UI components.
* `ui/`: Components from shadcn/ui (Button, Input, Card, Toggle, Sheet, DropdownMenu, etc.).
* `layout/`: `Sidebar.tsx`, `Topbar.tsx`, `PageWrapper.tsx`.
* `auth/`: `OAuthButtons.tsx`, `EmailPasswordForm.tsx`.
* `settings/`: `SettingToggle.tsx`, `SettingSection.tsx`.
* `common/`: `LoadingSpinner.tsx`, `ErrorMessage.tsx`.
* `app/api/auth/[...nextauth]/route.ts`: NextAuth.js handler.
* `lib/`: Utility functions, database connection (Drizzle), Zod schemas.
* `styles/globals.css`: Tailwind CSS base and custom styles.
**State Management:**
* **Global State (Theme, User Session):** Zustand (`store/useStore.ts`).
* **Page-Specific State:** Local component state (`useState`) for form inputs, temporary UI states.
* **Server Data Fetching:** `use` hook in Server Components, Server Actions called from Client Components.
### 7. UI/UX DESIGN & VISUAL IDENTITY:
* **Design Style:** **Minimalist Clean with a hint of Trustworthy Tech.** Focus on clarity, usability, and conveying a sense of security.
* **Color Palette:**
* Primary Background: `#F8F9FA` (Light Mode) / `#121212` (Dark Mode)
* Primary Text: `#212529` (Light Mode) / `#E0E0E0` (Dark Mode)
* Primary Accent (Buttons, Links, Toggles): `#007AFF` (iOS Blue - conveys tech & trust) or a custom teal like `#20C997`.
* Secondary Accent (Subtle highlights): `#6C757D` (Gray for borders, disabled states).
* Notification/Warning (if needed): `#FFC107` (Yellow)
* Error: `#DC3545` (Red)
* **Typography:**
* Font Family: Inter (Sans-serif, modern, readable)
* Headings: Inter Bold (e.g., `h1` = 36px, `h2` = 30px)
* Body Text: Inter Regular (16px)
* Labels/Small Text: Inter Medium (14px)
* **Layout:**
* Use a consistent `max-w-screen-xl` or similar container for content.
* Sidebar (collapsible) for main navigation, Topbar for user profile/logout.
* Generous whitespace.
* Card-based design for settings sections and dashboard widgets.
* **Icons:** Use Lucide React icons - clean, consistent, and easily customizable.
* **Forms:** Clearly labeled inputs, visible validation states (via Zod/RHF), distinct primary action buttons.
* **Responsiveness:** Mobile-first approach. Ensure usability on smaller screens, scaling gracefully to tablet and desktop. Sidebar might become a drawer/modal on mobile.
* **Visual Cues:** Use subtle borders, shadows, and background color variations to distinguish sections and interactive elements. Ensure high contrast for accessibility.
### 8. SAMPLE/MOCK DATA:
* **User Settings (Default):**
```json
{
"userId": "uuid-for-user-1",
"interfaceTheme": "system",
"customThemeName": null,
"enableCopilot": false,
"enableAds": false,
"enableTelemetry": false,
"enableRecall": false,
"recallStorageType": "local",
"autoSyncOneDrive": false,
"fileDeletionOnLimit": false,
"allowLocalAccounts": true
}
```
* **User Settings (Privacy Conscious):**
```json
{
"userId": "uuid-for-user-2",
"interfaceTheme": "dark",
"customThemeName": null,
"enableCopilot": false,
"enableAds": false,
"enableTelemetry": true, // Note: This is intentionally TRUE here to show a user enabling it despite the app's goal, illustrating control.
"enableRecall": false,
"recallStorageType": "local",
"autoSyncOneDrive": false,
"fileDeletionOnLimit": false,
"allowLocalAccounts": true
}
```
* **User Settings (Advanced Customization):**
```json
{
"userId": "uuid-for-user-3",
"interfaceTheme": "light",
"customThemeName": "CyberPunk",
"enableCopilot": true, // User explicitly enabling
"enableAds": false,
"enableTelemetry": false,
"enableRecall": true,
"recallStorageType": "encrypted_cloud",
"autoSyncOneDrive": true,
"fileDeletionOnLimit": true,
"allowLocalAccounts": false
}
```
* **Blocked Features List (Example):**
```json
[
{"userId": "uuid-for-user-1", "featureName": "CopilotInjection", "status": "blocked"},
{"userId": "uuid-for-user-1", "featureName": "PromotedAds", "status": "blocked"},
{"userId": "uuid-for-user-1", "featureName": "RecallFeature", "status": "blocked"},
{"userId": "uuid-for-user-1", "featureName": "TelemetryOverride", "status": "monitored"}
]
```
* **User Profile Data:**
```json
{
"id": "uuid-for-user-1",
"name": "Alice",
"email": "alice@example.com",
"emailVerified": "2024-01-15T10:30:00Z",
"image": "https://example.com/path/to/alice.jpg"
}
```
* **Mock File Entry (Conceptual for File Manager):**
```json
{
"name": "document.pdf",
"size": "2.5MB",
"type": "pdf",
"lastModified": "2024-05-10T09:00:00Z",
"location": "local://Documents/" // Or 'onedrive://Documents/' if sync enabled
}
```
### 9. TURKISH TRANSLATIONS:
* **App Title:** Gizlilik Kalkanı
* **Homepage:**
* Hero Headline: İşletim Sisteminize Tam Hakimiyet
* Sub-headline: Gizliliğinizi Geri Kazanın, Kontrolü Elinize Alın.
* CTA (Sign Up): Kaydol
* CTA (Sign In): Giriş Yap
* **Auth:**
* Sign In Title: Giriş Yap
* Sign Up Title: Hesap Oluştur
* Email Label: E-posta
* Password Label: Şifre
* Sign In Button: Giriş Yap
* Sign Up Button: Kaydol
* Continue with Google: Google ile Devam Et
* Continue with GitHub: GitHub ile Devam Et
* Forgot Password?: Şifremi Unuttum?
* **Dashboard:**
* Title: Kontrol Paneli
* Welcome: Hoş Geldiniz, [User Name]!
* Metric Card Titles: Gizlilik Durumu, Güvenlik Profili
* Privacy Metrics:
* Telemetry Blocked: Telemetri Engellendi
* Ads Blocked: Reklamlar Engellendi
* AI Features Disabled: Yapay Zeka Özellikleri Devre Dışı
* **Settings:**
* Title: Ayarlar
* Section Titles:
* Arayüz
* Gizlilik Kontrolleri
* Yapay Zeka ve Entegrasyonlar
* Dosya Yönetimi
* Hesap Ayarları
* Setting Labels:
* Tema: Tema
* Sistem Varsayılanı: Sistem Varsayılanı
* Açık Mod: Açık Mod
* Koyu Mod: Koyu Mod
* Copilot'u Etkinleştir: Copilot'u Etkinleştir
* Reklamları Göster: Reklamları Göster
* Telemetriyi Etkinleştir: Telemetriyi Etkinleştir
* Recall Özelliğini Etkinleştir: Recall Özelliğini Etkinleştir
* Dosya Silme Limit:
* Otomatik OneDrive Senkronizasyonu:
* Yerel Hesaplara İzin Ver:
* Save Button: Kaydet
* **General:**
* Loading: Yükleniyor...
* Error: Bir hata oluştu.
* Success: Kaydedildi.
* Block: Engelle
* Monitor: İzle
* Protected: Korumada
### 10. ANIMATIONS:
* **Page Transitions:** Subtle fade-in/fade-out using Next.js `AnimatePresence` (if needed, or rely on App Router's default behavior).
* **Component Mount/Unmount:** Fade-in/slide-up for elements appearing/disappearing (e.g., error messages, form confirmations).
* **Button Hovers:** Slight scale-up or background color change.
* **Toggle Switches:** Smooth sliding animation for the toggle handle.
* **Loading States:** Centered `LoadingSpinner.tsx` component with a subtle rotation animation. Use skeleton loaders for data fetching where appropriate.
* **Transitions:** Use Tailwind CSS's `transition` utility for properties like `opacity`, `transform`, `background-color` with durations like `duration-200` or `duration-300`.
### 11. EDGE CASES:
* **Authentication:**
* Email verification required before full access.
* Handling expired verification tokens.
* OAuth callback errors.
* Incorrect password/credentials.
* **Settings:**
* Form validation errors (Zod/RHF handle this).
* Database errors during update (show user-friendly message).
* Default settings applied for new users.
* Handling null/undefined values in settings.
* **Data Display:**
* Empty states for lists (e.g., if `blockedFeatures` is empty).
* Error handling during data fetching (displaying `ErrorMessage.tsx`).
* **Authorization:** Ensure users can only access and modify their own settings. Route guards (middleware or Server Component checks).
* **App State:** Ensure UI reflects the latest settings after updates, potentially using data revalidation (`revalidatePath`, `revalidateTag`).
* **UI States:** Loading, error, success, and empty states for all interactive elements and data displays.