You are a seasoned AI assistant tasked with generating the complete codebase for a single-page application (SPA) called 'Gizlilik Kalkanı' (Privacy Shield). This application aims to empower users to manage their digital footprint, prevent misuse of their personal data, and protect their privacy against government or corporate surveillance. The target audience is privacy-conscious individuals, tech enthusiasts, journalists, activists, lawyers, and the general public concerned about data breaches and surveillance.
PROJECT OVERVIEW:
'Gizlilik Kalkanı' addresses the growing concerns around digital privacy and surveillance, inspired by discussions like the Wyden Siren incident regarding NSA surveillance under Section 702. The application provides users with a unified dashboard to monitor their digital presence, identifies potential privacy risks, facilitates the removal of personal data from data brokers, and educates users on digital security best practices and relevant surveillance laws. The core value proposition is to provide a user-friendly, accessible, and actionable tool for reclaiming digital privacy.
TECH STACK:
- Frontend Framework: React.js (using Create React App for simplicity or Vite for speed)
- Styling: Tailwind CSS (for rapid UI development and utility-first approach)
- State Management: Zustand (lightweight and efficient for global state)
- Routing: React Router DOM (for client-side navigation)
- UI Components: Headless UI (for accessible, unstyled components) and custom Tailwind-styled components.
- Data Fetching: Axios (for making HTTP requests)
- Form Handling: React Hook Form (for efficient form validation)
- Icons: Heroicons (integrated with Headless UI)
- Local Storage: Utilized for storing user preferences, temporary data, and potentially offline capabilities.
- Deployment: Target is a static site host like Vercel or Netlify.
CORE FEATURES:
1. **Digital Footprint Dashboard:**
* **User Flow:** Upon login/signup, the user is presented with a dashboard. They can connect various accounts (social media, email, cloud storage - simulated initially with mock data). The system analyzes the privacy settings and data exposure of these connected services. It displays a summary of connected accounts, potential risks (e.g., public profiles, excessive data sharing), and a privacy score.
* **Details:** This section aggregates information about the user's online presence. Initially, it will use mock data. Future iterations could involve API integrations (where available and secure) or guided manual input.
2. **Data Broker Opt-Out Assistant:**
* **User Flow:** Users can search for their name or common identifiers. The system presents a list of known data broker websites (initially a static list). For each broker, the user can initiate an opt-out process by clicking a button. This action either pre-fills a form on the broker's site (if a direct integration were possible) or provides clear, step-by-step instructions and templates for manual opt-out requests. The user can track the status of their requests (e.g., 'Pending', 'Submitted', 'Completed').
* **Details:** This feature focuses on guiding users through the tedious process of removing their data from people-search websites and data aggregators.
3. **Surveillance Watch & Education:**
* **User Flow:** A dedicated section provides concise, easy-to-understand articles, news summaries, and explainers about current surveillance laws (like Section 702), technological advancements in surveillance, and relevant government actions. Users can filter content by topic or recency.
* **Details:** Content should be digestible, avoiding overly technical jargon. It aims to keep users informed about the landscape of digital privacy threats and legal frameworks.
4. **Privacy Toolkit:**
* **User Flow:** This section offers practical tools and guides. Examples include: recommendations for secure password managers, guides on setting up VPNs, best practices for secure browser configurations, advice on encrypting communications (e.g., using Signal), and checklists for securing online accounts.
* **Details:** Focuses on actionable advice and tool recommendations to improve users' day-to-day digital security.
UI/UX DESIGN:
- **Layout:** A clean, minimalist, single-page application layout. A persistent sidebar navigation for core features (Dashboard, Opt-Out, Education, Toolkit, Settings). Main content area dynamically updates based on the selected navigation item.
- **Color Palette:** Primary: Deep Navy Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Light Gray (#E5E7EB), Text: Dark Gray (#374151), White (#FFFFFF) for backgrounds and cards.
- **Typography:** Use a clean, readable sans-serif font like Inter or Roboto for body text and headings. Headings should be bold and slightly larger. Maintain clear hierarchy.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts to fit screen width. Ensure usability across all devices (desktops, tablets, smartphones).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions between sections. Loading indicators (spinners or skeletons) for data fetching.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Layout.jsx`: Wrapper component for sidebar navigation and main content area.
- `Sidebar.jsx`: Contains navigation links. Receives `active` state and `setActive` function as props.
- `Dashboard.jsx`: Displays the Digital Footprint overview. Fetches and renders `AccountSummary`, `RiskAnalysis`, `PrivacyScore`.
- `AccountSummary.jsx`: Renders a list of connected accounts and their basic status.
- `RiskAnalysis.jsx`: Displays identified privacy risks using `RiskCard` components.
- `PrivacyScore.jsx`: Shows the user's current privacy score with visual indicators.
- `OptOutAssistant.jsx`: Main component for the data broker opt-out feature. Manages search, results, and request status.
- `BrokerSearch.jsx`: Input field and button for searching data brokers.
- `BrokerList.jsx`: Renders `BrokerListItem` components based on search results.
- `BrokerListItem.jsx`: Displays individual broker info and the 'Opt-Out' button/status.
- `Education.jsx`: Displays articles and news related to privacy and surveillance.
- `ArticleList.jsx`: Renders `ArticleListItem` components.
- `ArticleListItem.jsx`: Displays a summary of an article with a link to view details.
- `ArticleDetail.jsx`: Shows the full content of a selected article.
- `PrivacyToolkit.jsx`: Lists various privacy tools and guides.
- `ToolkitItem.jsx`: Displays a single tool/guide with a description and link.
- `Settings.jsx`: User profile and application settings.
- `LoginForm.jsx`, `SignupForm.jsx`: Authentication forms.
- `Button.jsx`, `Input.jsx`, `Card.jsx`, `Spinner.jsx`, `Modal.jsx`: Reusable UI components styled with Tailwind CSS.
DATA MODEL:
- **UserState:**
```json
{
"userId": "uuid",
"email": "string",
"isAuthenticated": "boolean",
"profile": {
"name": "string",
"privacyScore": "number",
"connectedAccounts": ["string"]
}
}
```
- **AccountData (Mock):**
```json
[
{
"id": "acc1",
"platform": "Facebook",
"type": "Social Media",
"privacyLevel": "Medium", // Low, Medium, High, Very High
"riskFactors": ["Public Profile", "Excessive Data Sharing"]
},
// ... more accounts
]
```
- **DataBrokerData (Mock):**
```json
[
{
"id": "broker1",
"name": "PeopleFinder Pro",
"url": "https://peoplefinderpro.com",
"optOutStatus": "Not Initiated" // Not Initiated, Pending, Submitted, Completed, Failed
},
// ... more brokers
]
```
- **EducationContent (Mock):**
```json
[
{
"id": "edu1",
"title": "Understanding NSA Section 702",
"summary": "A brief overview of the...',
"content": "Detailed explanation...",
"datePublished": "YYYY-MM-DD"
},
// ... more articles
]
```
- **ToolkitItems (Mock):**
```json
[
{
"id": "tool1",
"name": "Password Manager Guide",
"description": "Tips for choosing and using a secure password manager.",
"link": "/path/to/guide"
},
// ... more tools
]
```
- **State Management:** Zustand store will manage `UserState`, fetched `AccountData`, `DataBrokerData`, `EducationContent`, and `ToolkitItems`.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Smooth fade-in/fade-out transitions between different sections of the SPA using `React Router DOM`'s transition capabilities or libraries like `Framer Motion`.
- **Button Hovers:** Subtle background color change or slight scale-up effect on interactive elements (buttons, links).
- **Loading States:** Use `Spinner` components or skeleton loaders (`SkeletonLoader.jsx`) while data is being fetched from mock APIs. Indicate loading clearly to the user.
- **Micro-interactions:** Slight animation when adding/removing an account, or when the opt-out status changes. Expand/collapse animations for accordion-like elements (e.g., detailed risk factors).
- **Form Feedback:** Visual cues (e.g., green checkmark, red exclamation mark) for form validation status.
EDGE CASES:
- **Empty States:** Display user-friendly messages and clear calls-to-action when lists are empty (e.g., 'No accounts connected yet. Connect your accounts to get started.', 'No data brokers found for your search.').
- **Error Handling:** Implement try-catch blocks for all data fetching operations. Display user-friendly error messages (e.g., 'Failed to load accounts. Please try again later.'). Gracefully handle API errors (e.g., 404, 500).
- **Validation:** Use React Hook Form for client-side validation of all user inputs (login, signup, search). Implement necessary validation rules (e.g., email format, password strength).
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. All interactive elements should be keyboard-navigable. Ensure sufficient color contrast. Utilize Headless UI for accessibility compliance in components like modals and dropdowns.
- **Authentication:** Handle logged-out states, redirecting unauthenticated users to the login page. Securely manage auth tokens (e.g., using HttpOnly cookies or local storage with appropriate security measures, though for this SPA, local state management is simpler for MVP).
SAMPLE DATA:
1. **User State (Initial):** `{"userId": null, "email": "", "isAuthenticated": false, "profile": {"name": "", "privacyScore": 0, "connectedAccounts": []}}`
2. **User State (Logged In):** `{"userId": "user123", "email": "test@example.com", "isAuthenticated": true, "profile": {"name": "Jane Doe", "privacyScore": 65, "connectedAccounts": ["acc1", "acc2"]}}`
3. **AccountData 1:** `{"id": "acc1", "platform": "Google Drive", "type": "Cloud Storage", "privacyLevel": "High", "riskFactors": []}`
4. **AccountData 2:** `{"id": "acc2", "platform": "Twitter", "type": "Social Media", "privacyLevel": "Low", "riskFactors": ["Public Profile", "Location Sharing Enabled", "Follower List Public"]}`
5. **AccountData 3:** `{"id": "acc3", "platform": "Outlook", "type": "Email", "privacyLevel": "Medium", "riskFactors": ["Spam Filters Moderate"]}`
6. **DataBrokerData 1:** `{"id": "broker1", "name": "InfoTracer", "url": "https://infotracer.com", "optOutStatus": "Submitted"}`
7. **DataBrokerData 2:** `{"id": "broker2", "name": "MyPublicInfo", "url": "https://mypublicinfo.net", "optOutStatus": "Pending"}`
8. **DataBrokerData 3:** `{"id": "broker3", "name": "DataMine USA", "url": "https://datamineusa.org", "optOutStatus": "Not Initiated"}`
9. **EducationContent 1:** `{"id": "edu1", "title": "The Implications of H.R. 3773: FISA Amendments Act", "summary": "An analysis of recent legislative changes affecting...', "content": "Detailed text about the act...", "datePublished": "2024-03-15"}`
10. **ToolkitItem 1:** `{"id": "tool1", "name": "Secure Browsing Checklist", "description": "Essential steps to secure your web browser against tracking and malware.", "link": "/toolkit/browsing-checklist"}`
DEPLOYMENT NOTES:
- Ensure the build process outputs static files (HTML, CSS, JS).
- Configure the hosting environment (e.g., Vercel, Netlify) for a SPA. This typically involves setting up URL rewrites to handle client-side routing (e.g., directing all non-file requests to `index.html`).
- Use environment variables for any future API keys or configurations (e.g., `REACT_APP_API_ENDPOINT`). For this MVP, mock data is sufficient, but the structure should allow for future API integration.
- Optimize assets (images, CSS, JS) for production builds using tools like Terser and CSS minifiers. Implement code splitting if the application grows significantly.
- Set up basic analytics (e.g., Google Analytics, Plausible) if desired, ensuring compliance with privacy regulations.