PROJECT OVERVIEW:
The application, tentatively named 'Gizlilik Kalkanı' (Privacy Shield), is a comprehensive security solution designed to protect users' private communications and digital assets from intrusive surveillance, specifically addressing concerns raised by potential EU legislation mandating the scanning of private messages and photos. The core value proposition is to provide users with an impenetrable fortress for their digital lives, ensuring end-to-end encryption, robust anonymity, and secure storage, thereby safeguarding their fundamental right to privacy in an increasingly monitored digital world. It aims to empower individuals and professionals by offering them control over their data and communications, free from unwarranted external access.
TECH STACK:
- Frontend: React (Create React App or Vite for faster build times)
- UI Framework: Tailwind CSS for rapid, utility-first styling
- State Management: Zustand or Redux Toolkit for efficient global state management
- Routing: React Router DOM
- Cryptography: `libsignal-protocol` (for E2EE messaging) and standard Web Crypto API for file encryption.
- Icons: Heroicons or Font Awesome
- Form Handling: React Hook Form
- Animation: Framer Motion or Tailwind CSS animations
- Local Storage: For managing encryption keys (securely!) and user preferences. Consider `localStorage` for simple settings and potentially more secure alternatives like IndexedDB or browser's secure storage APIs if key management becomes more complex.
- Build Tool: Vite (for speed)
- Deployment: Vercel or Netlify for seamless CI/CD and hosting.
CORE FEATURES:
1. End-to-End Encrypted Messaging:
* User Flow: User A initiates a chat with User B. The application establishes a secure session using Signal Protocol. All messages sent by User A are encrypted client-side using User B's public key and decrypted client-side by User B. The same applies in reverse. The UI displays messages in a familiar chat interface.
* Details: Supports text, voice notes, images, and short videos. Message status indicators (sent, delivered, read) are implemented securely, potentially using ephemeral identifiers. Handles session establishment, key verification (QR code scanning or safety number comparison), and key rotation.
2. Secure File/Photo Encryption & Storage:
* User Flow: User selects a photo or file to upload/store. The application encrypts the file client-side using a symmetric key derived from the user's passphrase or a generated key. This encrypted file is then uploaded to secure cloud storage (e.g., integrated with S3-compatible storage or a dedicated secure vault service). Access requires the correct decryption key.
* Details: Supports common file types (JPEG, PNG, MP4, PDF, DOCX). Provides options for automatic encryption of all media uploaded through the app. Secure key management is critical here – keys should ideally be derived from a user's strong passphrase and never transmitted unencrypted.
3. Anonymity Tools:
* User Flow: Users can enable specific anonymity features before sending messages or uploading files. This could include options like IP address masking (via integrated VPN or proxy service) or metadata stripping from images (removing EXIF data).
* Details: Metadata stripping is done client-side. IP masking requires integration with a third-party service or a self-hosted solution. This feature might be part of a premium tier.
4. Security Status Dashboard & Alerts:
* User Flow: A central dashboard displays the overall security posture. It shows active encryption sessions, storage status, recent security events, and potential threats. The system actively monitors for known vulnerabilities or potential breaches related to communication protocols or the platform itself.
* Details: Real-time alerts for unusual activity, compromised session detection, or system-wide security advisories. Provides actionable steps for users to enhance their security.
5. User-Friendly Interface & Onboarding:
* User Flow: Simple, guided onboarding process explaining the security features and how to use them. Intuitive UI for messaging, file management, and settings.
* Details: Clean design, clear calls to action, and minimal jargon. Focus on making advanced security accessible to non-technical users.
UI/UX DESIGN:
- Layout: Single Page Application (SPA) with a primary dashboard view. Navigation will likely be a sidebar (desktop) or a bottom tab bar (mobile). Main content area displays the selected feature (messaging, file storage, settings).
- Color Palette: Primarily dark theme to evoke security and focus. Accent colors (e.g., a secure green or a warning orange/red) used sparingly for calls to action, status indicators, and alerts. Example: Primary: #1a1a1a (dark charcoal), Secondary: #2c2c2c (slightly lighter dark), Accent: #4CAF50 (green for success/secure), Warning: #FF9800 (orange for attention).
- Typography: Clean, readable sans-serif font like Inter or Roboto. Clear hierarchy using font weights and sizes.
- Responsive Design: Mobile-first approach. Utilize Tailwind CSS's responsive modifiers (sm:, md:, lg:) to ensure seamless experience across devices. Max-width container for larger screens to maintain readability.
- Components: Design will be modular, using components like ChatWindow, MessageBubble, FileUpload, EncryptionStatusCard, SettingsForm, NavigationBar, etc.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application wrapper, routing setup, global state provider.
- `Layout.jsx`: Contains the overall page structure (sidebar/navbar, main content area).
- `Dashboard.jsx`: Overview of security status, recent alerts, quick actions.
* Props: `securityData` (object).
* Responsibility: Aggregates and displays key security metrics.
- `ChatList.jsx`: Displays list of ongoing encrypted conversations.
* Props: `chats` (array of chat objects), `activeChatId` (string).
* Responsibility: Renders conversation list, handles selection.
- `ChatWindow.jsx`: Displays messages for a selected conversation.
* Props: `messages` (array), `currentUser` (string), `sendMessage` (function).
* Responsibility: Renders message bubbles, input field, send button.
- `MessageBubble.jsx`: Individual chat message component.
* Props: `message` (object), `isOwnMessage` (boolean).
* Responsibility: Displays message content, sender info, timestamp.
- `SecureStorage.jsx`: Interface for managing encrypted files and photos.
* Props: `files` (array), `uploadFile` (function), `downloadFile` (function).
* Responsibility: File listing, upload/download controls.
- `FileItem.jsx`: Represents a single encrypted file in the storage list.
* Props: `file` (object), `downloadAction` (function).
* Responsibility: Displays file name, size, type, download button.
- `Settings.jsx`: User settings and configuration.
* Props: `userSettings` (object), `updateSettings` (function).
* Responsibility: Manages user preferences, encryption settings, account details.
- `SecurityStatusCard.jsx`: Displays a specific security metric (e.g., E2EE status, storage health).
* Props: `title` (string), `status` (string), `details` (string).
* Responsibility: Visualizes individual security components.
- `AnonimityControls.jsx`: Toggles for IP masking and metadata stripping.
* Props: `ipMaskingEnabled` (boolean), `metadataStrippingEnabled` (boolean), `toggleFeature` (function).
* Responsibility: Manages anonymity feature toggles.
DATA MODEL:
- `UserState`: { userId: string, username: string, encryptionPublicKey: string, settings: UserSettings }
- `ChatState`: { chatId: string, participants: string[], lastMessage: Message, unreadCount: number }
- `Message`: { messageId: string, chatId: string, senderId: string, content: string, timestamp: Date, type: 'text' | 'image' | 'audio' | 'video', status: 'sending' | 'sent' | 'delivered' | 'read' | 'error' }
- `File`: { fileId: string, userId: string, filename: string, encryptedBlob: Blob, mimeType: string, fileSize: number, uploadTimestamp: Date, encryptionKeyRef: string } // encryptionKeyRef would point to a securely stored key
- `AppSettings`: { theme: 'dark' | 'light', notificationsEnabled: boolean, autoEncryptMedia: boolean, ipMasking: boolean, metadataStripping: boolean }
State Management (Zustand/Redux Toolkit):
- `useAuthStore`: Manages user authentication state, user profile, keys.
- `useChatStore`: Manages chats list, messages for active chats.
- `useFileStore`: Manages the list of encrypted files, upload/download status.
- `useSettingsStore`: Manages application-wide settings.
Mock Data Format:
```json
{
"chats": [
{
"chatId": "chat_123",
"participants": ["user_abc", "user_xyz"],
"lastMessage": {
"messageId": "msg_789",
"senderId": "user_abc",
"content": "Hey, how are you?",
"timestamp": "2023-10-27T10:00:00Z",
"type": "text",
"status": "read"
},
"unreadCount": 0
}
],
"messages": {
"chat_123": [
{
"messageId": "msg_789",
"senderId": "user_abc",
"content": "Hey, how are you?",
"timestamp": "2023-10-27T10:00:00Z",
"type": "text",
"status": "read"
},
{
"messageId": "msg_790",
"senderId": "user_xyz",
"content": "I'm good, thanks! Preparing a report.",
"timestamp": "2023-10-27T10:01:00Z",
"type": "text",
"status": "read"
}
]
},
"files": [
{
"fileId": "file_abc",
"userId": "user_abc",
"filename": "vacation_photo.jpg",
"mimeType": "image/jpeg",
"fileSize": 1572864, // 1.5 MB
"uploadTimestamp": "2023-10-26T15:30:00Z",
"encryptionKeyRef": "key_ref_xyz"
}
],
"currentUser": {
"userId": "user_abc",
"username": "Alice",
"encryptionPublicKey": "-----BEGIN PUBLIC KEY-----\n...your_public_key_here...\n-----END PUBLIC KEY-----",
"settings": {
"theme": "dark",
"notificationsEnabled": true,
"autoEncryptMedia": true,
"ipMasking": false,
"metadataStripping": false
}
}
}
```
ANIMATIONS & INTERACTIONS:
- **Hover Effects**: Subtle background color changes or slight scaling on buttons and interactive elements.
- **Transitions**: Smooth transitions between pages/views using Framer Motion (e.g., slide-in, fade-in effects). Message bubbles fading in as they arrive.
- **Loading States**: Skeleton loaders or spinners for message fetching, file uploads/downloads. Animated indicators for 'sending' status.
- **Micro-interactions**: Button press feedback, subtle animations on status updates (e.g., 'sent' tick turning into 'delivered' double tick).
- **Encryption Process**: Visual feedback during client-side encryption/decryption (e.g., a progress bar or animated icon).
EDGE CASES:
- **Empty States**: Display user-friendly messages and clear calls to action when chat lists, message histories, or file storage are empty.
- **Error Handling**: Graceful error handling for network failures, encryption/decryption errors, upload/download issues. Informative error messages to the user.
- **Validation**: Input validation for messages (e.g., length limits if any), user registration/login forms. Key verification during E2EE setup must be robust.
- **Key Management**: Secure storage and handling of encryption keys are paramount. This includes key generation, backup (user-controlled), recovery, and rotation. Accidental key loss should be handled with clear warnings about data inaccessibility.
- **Accessibility (a11y)**: Use semantic HTML, ARIA attributes where necessary, ensure sufficient color contrast, keyboard navigability, and focus management.
- **Offline Support**: Consider basic offline functionality for messaging (queueing messages to send when online).
SAMPLE DATA (See DATA MODEL section for structured examples):
- Mock user profiles with public keys.
- Multiple chat conversation examples with varying message types and statuses.
- Encrypted file entries with metadata.
- Different user settings configurations.
DEPLOYMENT NOTES:
- **Build Configuration**: Configure Vite/CRA for production builds, optimizing assets and code splitting.
- **Environment Variables**: Use `.env` files for API keys (if any), service URLs, and other sensitive information. Ensure production environment variables are securely managed.
- **Performance Optimizations**: Code splitting, lazy loading components, image optimization, memoization (React.memo, useMemo, useCallback) to prevent unnecessary re-renders.
- **HTTPS**: Enforce HTTPS for all communication.
- **Security Headers**: Implement security headers (CSP, HSTS, etc.) on the hosting platform (Vercel/Netlify).
- **Key Storage**: Reiterate the importance of *not* storing private keys directly in frontend state or easily accessible local storage without strong user-dependent encryption (e.g., derived from a robust password).