PROJECT OVERVIEW:
This project aims to build a secure, privacy-focused communication platform, tentatively named 'Gizlilik Kalkanı' (Privacy Shield). The core problem addressed is the tension between user privacy and the legal obligations of service providers, as highlighted by the Proton Mail incident where user data was disclosed to law enforcement. Our platform will offer end-to-end encrypted communication, secure file sharing, and an option for anonymized user profiles. Crucially, it will provide a transparent and user-controlled mechanism for data sharing in response to legitimate legal requests. The value proposition is to offer a communication tool that genuinely prioritizes user privacy while maintaining compliance and control, fostering trust through transparency.
TECH STACK:
- Frontend: React (using Create React App for simplicity or Vite for faster builds)
- Styling: Tailwind CSS for rapid UI development and consistent design.
- State Management: Zustand or Redux Toolkit for efficient global state management.
- Routing: React Router DOM for client-side navigation.
- Cryptography: `libsodium-wrappers` or similar for robust end-to-end encryption (E2EE).
- API Communication: Axios or Fetch API.
- Local Storage: For storing encryption keys and user preferences securely.
- Build Tools: Vite or Webpack.
CORE FEATURES:
1. **End-to-End Encrypted Messaging:**
* User Flow: User A sends a message to User B. The message is encrypted client-side using User B's public key. The encrypted message is sent to the server. When User B logs in, the message is fetched, decrypted client-side using User B's private key. The private key is never sent to the server.
* Key Management: Public keys are exchanged securely upon initial contact or through a trusted key server. Private keys are stored encrypted in the user's browser local storage, protected by a passphrase.
2. **Secure File Sharing:**
* User Flow: User A selects a file to send to User B. The file is encrypted client-side using User B's public key. The encrypted file is uploaded to the server. User B receives a notification, downloads the encrypted file, and decrypts it client-side.
* Size Limits: MVP will have a reasonable file size limit (e.g., 100MB), to be configurable.
3. **Anonymized User Profiles (Optional):**
* User Flow: During signup, users can opt out of linking their real identity. They can choose a unique username. This username is not directly tied to any personally identifiable information (PII) stored on the server beyond what's necessary for service operation (e.g., encrypted email for recovery).
4. **Controlled Data Disclosure (Admin/Compliance Panel):**
* User Flow (Admin): A designated admin receives a legal request (e.g., warrant, subpoena). The admin accesses a secure panel. They can review the request's validity and scope. If approved, they can authorize the release of *specific*, *non-encrypted* metadata (e.g., account creation date, IP logs if collected and anonymized, payment info if applicable and stored separately) based on Swiss legal framework and platform policy. The system logs all such actions.
* User Flow (User): Users can view a log of any data requests made for their account and the actions taken. They might receive a notification depending on the legal constraints.
5. **User Dashboard:**
* Displays recent conversations, file transfers, account settings, privacy controls, and access log for data requests.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a primary sidebar for navigation (Conversations, Files, Settings, Compliance Log) and a main content area. Responsive design using a mobile-first approach.
- **Color Palette:** Primary: Dark Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Light Gray (#E5E7EB), Text: Dark Gray (#1F2937), Background: White (#FFFFFF) or very light gray.
- **Typography:** Clean, readable sans-serif font like Inter or Roboto. Clear hierarchy using font sizes and weights.
- **Component Structure:** Utilize a clear component-based architecture. Sidebar, ConversationList, ChatWindow, FileBrowser, SettingsPanel, ComplianceLogTable, InputFields, Buttons, Modals.
- **Responsiveness:** Utilize Tailwind's responsive prefixes (sm:, md:, lg:) to ensure usability across devices. Sidebar collapses into a hamburger menu on smaller screens.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing.
- `Sidebar.js`: Navigation menu. Props: `activeTab`, `onTabChange`. Renders `NavButton.js` components.
- `ChatWindow.js`: Displays messages for a selected conversation. Props: `conversationId`, `messages`, `currentUser`. Renders `MessageBubble.js`.
- `MessageBubble.js`: Displays a single message (sender, content, timestamp). Props: `message`, `isOwnMessage`.
- `ComposeMessage.js`: Input field and send button for messages. Props: `conversationId`, `onSendMessage`.
- `FileUploader.js`: Handles file selection and upload logic. Props: `onUploadSuccess`.
- `CompliancePanel.js`: Admin interface for reviewing and acting on legal requests. Props: `requestList`, `onRequestAction`.
- `DataLog.js`: User-facing log of data requests. Props: `logEntries`.
- `AuthForm.js`: Handles login and signup.
- `Settings.js`: User settings management.
DATA MODEL:
- **User:** `{ id: string, username: string, publicKey: string, emailHash: string (optional, for recovery), settings: object, created_at: timestamp }`
- **Conversation:** `{ id: string, participants: [userId1, userId2], lastMessage: object, unreadCount: number, created_at: timestamp }`
- **Message:** `{ id: string, conversationId: string, senderId: string, encryptedContent: string, sent_at: timestamp, read_at: timestamp (optional) }`
- **File:** `{ id: string, senderId: string, receiverId: string, filename: string, encrypted_url: string, size: number, uploaded_at: timestamp, status: 'uploaded' | 'downloaded' }`
- **LegalRequest:** `{ id: string, dateReceived: timestamp, requestDetails: string, requestingAuthority: string, requestedData: string[], status: 'pending' | 'approved' | 'rejected', actionTakenAt: timestamp (optional), adminId: string (optional) }`
- **State Management (Zustand Example):**
```javascript
// userStore.js
useUserStore = create((set) => ({
currentUser: null, // { id, username, publicKey, ... }
privateKeyEncrypted: null, // Encrypted private key stored locally
setUserData: (data) => set({ currentUser: data }),
setPrivateKey: (key) => set({ privateKeyEncrypted: key })
}))
// conversationStore.js
useConversationStore = create((set) => ({
conversations: [],
activeConversation: null,
messages: {},
setConversations: (convos) => set({ conversations: convos }),
addMessage: (message) => set(state => ({
messages: {
...state.messages,
[message.conversationId]: [...(state.messages[message.conversationId] || []), message]
}
}))
}))
```
- **Local Storage:** Keys like `user_private_key_encrypted`, `user_settings`.
ANIMATIONS & INTERACTIONS:
- **Transitions:** Smooth transitions between pages/views using `React Router`'s built-in capabilities or libraries like `Framer Motion` for more elaborate transitions (e.g., fade-in/out, slide). Sidebar collapse/expand animation.
- **Hover Effects:** Subtle background color changes or scaling effects on buttons and navigation items.
- **Loading States:** Skeleton loaders or spinners when fetching data (messages, files, conversation lists). Button states change to 'Sending...' or 'Uploading...' with a subtle spinner.
- **Micro-interactions:** Visual feedback when a message is sent (e.g., checkmark appears), file upload progress indicator.
- **Encryption/Decryption:** Indicate when data is being processed client-side (e.g., a subtle loading indicator while decrypting a message upon opening).
EDGE CASES:
- **Empty States:** Display informative messages when there are no conversations, no messages in a conversation, no files uploaded, or no legal requests logged.
- **Error Handling:** Graceful error handling for network failures, encryption/decryption errors, upload/download failures. User-friendly error messages displayed in toasts or inline.
- **Validation:** Input validation for signup (username format, password strength), message composition (prevent sending empty messages after trimming), legal request forms.
- **Key Management Failures:** Handle scenarios where the user loses their private key (provide recovery options if implemented, or guide them on the implications). Implement robust checks before decrypting.
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary, ensure keyboard navigability, sufficient color contrast, and alt text for meaningful images.
- **Concurrent Logins:** Prevent or manage concurrent sessions securely.
- **Rate Limiting:** Implement rate limiting on API endpoints to prevent abuse.
SAMPLE DATA:
1. **User Object:**
```json
{
"id": "user_123abc",
"username": "Guardian_07",
"publicKey": "pk_aGVsbG9fd29ybGQxMjM0NQ==",
"emailHash": "hash_of_email@example.com",
"settings": {"theme": "dark", "notifications": true},
"created_at": "2023-10-27T10:00:00Z"
}
```
2. **Conversation List (Array of Conversation Objects):**
```json
[
{
"id": "conv_xyz789",
"participants": ["user_123abc", "user_456def"],
"lastMessage": {
"id": "msg_001",
"senderId": "user_456def",
"encryptedContent": "U29tZSBlbmNyeXB0ZWQgbWVzc2FnZQ==",
"sent_at": "2023-10-27T11:30:00Z"
},
"unreadCount": 1,
"created_at": "2023-10-27T09:00:00Z"
}
]
```
3. **Single Message Object:**
```json
{
"id": "msg_002",
"conversationId": "conv_xyz789",
"senderId": "user_123abc",
"encryptedContent": "QW5vdGhlciBlbmNyeXB0ZWQgbWVzc2FnZQ==",
"sent_at": "2023-10-27T11:35:00Z"
}
```
4. **File Object:**
```json
{
"id": "file_abc123",
"senderId": "user_123abc",
"receiverId": "user_456def",
"filename": "document.pdf",
"encrypted_url": "https://storage.example.com/encrypted/file_abc123.enc",
"size": 1048576,
"uploaded_at": "2023-10-27T12:00:00Z",
"status": "uploaded"
}
```
5. **Legal Request Object (Admin View):**
```json
{
"id": "lr_987zyx",
"dateReceived": "2023-10-26T15:00:00Z",
"requestDetails": "Warrant #W12345 for user activity logs.",
"requestingAuthority": "FBI",
"requestedData": ["ip_logs", "login_timestamps"],
"status": "pending",
"actionTakenAt": null,
"adminId": null
}
```
6. **User Data Log Entry:**
```json
{
"timestamp": "2023-10-27T14:00:00Z",
"action": "Data Disclosure",
"details": "IP logs released to FBI based on Warrant #W12345. Admin: Admin_01"
}
```
7. **Mock Private Key (Encrypted):** (Simulated representation)
`"encryptedPrivateKey_f7a3b9c1d..."` - This would be stored encrypted in local storage.
8. **Mock Public Key:**
`"pk_aGVsbG9fd29ybGQxMjM0NQ=="`
9. **Error Message Object:**
```json
{
"code": "ENCRYPTION_FAILED",
"message": "Could not encrypt the message. Please check your keys or try again."
}
```
10. **Notification Object:**
```json
{
"id": "notif_567",
"type": "NEW_MESSAGE",
"conversationId": "conv_xyz789",
"userId": "user_456def",
"read": false
}
```
DEPLOYMENT NOTES:
- **Environment Variables:** Use `.env` files for API endpoints, encryption keys (if server-side needs any), and other configurations. Ensure sensitive variables are not committed to version control.
- **Build:** Optimize build using Vite/Webpack for production (`npm run build`). Analyze bundle size.
- **HTTPS:** Essential for any communication, especially when handling sensitive data.
- **CORS:** Configure Cross-Origin Resource Sharing correctly on the backend if the frontend and backend are on different domains.
- **Security:** Regularly audit dependencies. Sanitize all user inputs. Implement security headers (e.g., CSP, HSTS).
- **Scalability:** While MVP is a SPA, consider the backend architecture for scalability (stateless API, database choices).
- **Key Storage:** Emphasize secure storage of the private key in the browser (e.g., using `Crypto.subtle` API with a strong user passphrase). Consider options like Web Crypto API or secure enclaves if available for enhanced security.