You are an expert AI developer tasked with building a single-page application (SPA) called 'Gizlilik Kalkanı' (Privacy Shield). This application aims to bypass age verification barriers on the internet and provide users with a layer of anonymity and control over their digital identity, inspired by the 'Ageless Linux' concept. The application should allow users to create and manage virtual identities and use a secure proxy network to access age-restricted content or services without revealing their true age or identity.
PROJECT OVERVIEW:
The core problem this application solves is the increasing imposition of age verification requirements that limit access to digital content and services for various user groups, including minors, privacy-conscious individuals, and those who object to such verification. 'Gizlilik Kalkanı' provides a technical solution by offering a platform to generate plausible virtual identities and route user traffic through a secure proxy network. This enables users to interact with the internet in a more liberated and private manner, effectively sidestepping unnecessary age gates. The value proposition lies in restoring digital freedom, enhancing privacy, and ensuring equitable access to online information and services.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for utility-first styling and rapid UI development.
- State Management: Zustand for efficient and simple global state management.
- Routing: React Router DOM for handling navigation within the SPA.
- API Calls: Axios for making HTTP requests to a hypothetical backend service (for identity generation, proxy status, etc. - though MVP will mock this).
- Local Storage: For persisting user data like generated identities and settings.
- UI Components: Headless UI for accessible and customizable components.
- Icons: React Icons library.
CORE FEATURES:
1. **Virtual Identity Generation & Management**:
* **User Flow**: User navigates to the 'Identities' section. Clicks 'Create New Identity'. The application generates a plausible virtual identity including a username, a display name, a simulated age (within a specified range, e.g., 18-65, adjustable by the user), and potentially a profile picture placeholder. The user can save, edit (name/display name only), or delete identities. Each identity should be stored locally.
* **Details**: The generation process should create realistic-sounding usernames and display names. The simulated age should be presented clearly but noted as virtual. Options to specify age range preferences could be added in the future.
2. **Secure Proxy Network Access**:
* **User Flow**: User selects an active virtual identity. Navigates to the 'Proxy Settings' section. Chooses a proxy server location from a list (e.g., 'US - New York', 'EU - Frankfurt'). Clicks 'Connect'. The application visually indicates the active proxy connection and the selected identity. A button to 'Disconnect' should be present.
* **Details**: The MVP will simulate proxy connectivity. In a real implementation, this would involve integrating with a proxy service API or using browser extension capabilities. The UI should clearly show connection status (Connected/Disconnected) and the active identity linked to the session.
3. **Age-Gate Bypass Layer (Simulated)**:
* **User Flow**: After connecting to a proxy with a selected identity, the user can input a URL into a dedicated input field or click a predefined link. The application simulates attempting to access the URL. If successful (simulated), it shows a success message; if a (simulated) age gate is encountered and bypassed, it confirms this.
* **Details**: This feature primarily demonstrates the *intent* of the application. The actual bypass logic would be complex and context-dependent. For the MVP, it's a UI element that confirms the virtual identity and proxy are *intended* to bypass such gates.
4. **Privacy Dashboard & Settings**:
* **User Flow**: User accesses the 'Dashboard' for an overview of their current virtual identity, proxy status, and basic privacy metrics (e.g., trackers blocked - simulated). The 'Settings' section allows users to manage their local data (e.g., clear all identities), adjust UI themes (light/dark mode), and view application information.
* **Details**: This section consolidates key information and provides basic customization and data management options.
UI/UX DESIGN:
- **Layout**: A clean, single-page application layout. A persistent sidebar (collapsible on smaller screens) for navigation (Dashboard, Identities, Proxy Settings, Bypass, Settings). The main content area displays the relevant section's information and controls.
- **Color Palette**: Primarily dark-themed for a modern, privacy-focused aesthetic. Use a primary accent color (e.g., a vibrant blue or purple) for interactive elements and highlights. Secondary colors should be subtle grays and off-whites.
- Primary Background: `#1a1a2e` (Deep Navy)
- Secondary Background/Cards: `#16213e` (Darker Blue)
- Accent Color: `#e94560` (Vibrant Red/Pink) or `#00f9ff` (Cyan)
- Text Primary: `#ffffff` (White)
- Text Secondary: `#a0a0a0` (Light Gray)
- **Typography**: Use a modern, sans-serif font family like 'Inter' or 'Poppins'. Ensure good readability with appropriate font weights and sizes.
- Headings: Poppins Bold (e.g., 32px for H1, 24px for H2)
- Body Text: Inter Regular (e.g., 16px)
- **Responsive Design**: Mobile-first approach. Sidebar collapses into a hamburger menu on mobile. Ensure all components adapt gracefully to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`).
- **Interactions**: Subtle hover effects on buttons and links. Smooth transitions for panel reveals and page changes. Clear loading indicators for asynchronous operations (simulated).
DATA MODEL (Client-Side / Local Storage):
- `userData` state (using Zustand):
- `identities`: Array of identity objects. Each object: `{ id: string, username: string, displayName: string, simulatedAge: number, createdAt: Date }`
- `activeIdentityId`: string | null (ID of the currently selected identity)
- `proxySettings`: { serverLocation: string | null, isConnected: boolean }
- `appSettings`: { theme: 'light' | 'dark', ... }
- **Mock Data Format Examples**:
```json
{
"identities": [
{
"id": "uuid-1",
"username": "anon_user_7x3",
"displayName": "Shadow Walker",
"simulatedAge": 28,
"createdAt": "2023-10-27T10:00:00Z"
},
{
"id": "uuid-2",
"username": "digital_nomad_z9k",
"displayName": "Voyager",
"simulatedAge": 35,
"createdAt": "2023-10-27T10:05:00Z"
}
],
"activeIdentityId": "uuid-1",
"proxySettings": {
"serverLocation": "US - New York",
"isConnected": true
},
"appSettings": {
"theme": "dark"
}
}
```
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Layout.jsx`: Main layout component including the sidebar and header.
- `Sidebar.jsx`: Navigation menu component.
- Props: `navItems` (array of navigation objects), `activeItem` (string).
- `DashboardPage.jsx`: Displays overview, active identity, proxy status.
- Components: `UserInfoCard.jsx`, `ProxyStatusWidget.jsx`.
- `IdentitiesPage.jsx`: Manages virtual identities.
- Components: `IdentityList.jsx`, `IdentityListItem.jsx`, `CreateIdentityForm.jsx`.
- `IdentityList` props: `identities` (array), `activeId` (string), `onSelect` (function), `onDelete` (function).
- `IdentityListItem` props: `identity` (object), `isActive` (boolean), `onSelect` (function), `onDelete` (function).
- `CreateIdentityForm` props: `onCreate` (function).
- `ProxySettingsPage.jsx`: Configures and connects to the proxy.
- Components: `ProxyServerSelector.jsx`, `ConnectionControl.jsx`.
- `ProxyServerSelector` props: `availableServers` (array), `selectedServer` (string), `onSelect` (function).
- `ConnectionControl` props: `isConnected` (boolean), `onConnect` (function), `onDisconnect` (function).
- `BypassPage.jsx`: Interface for attempting to bypass age gates.
- Components: `UrlInputForm.jsx`, `AccessResultDisplay.jsx`.
- `UrlInputForm` props: `onSubmit` (function), `isLoading` (boolean).
- `SettingsPage.jsx`: Application settings.
- Components: `ThemeSwitcher.jsx`, `DataManager.jsx`.
- `Modal.jsx`: Reusable modal component for confirmations or info.
- `Button.jsx`: Customisable button component.
- `Input.jsx`: Customisable input field component.
ANIMATIONS & INTERACTIONS:
- **Sidebar Collapse/Expand**: Smooth slide animation.
- **Page Transitions**: Fade-in/out effect for content area changes.
- **Button Hover**: Slight scale-up or background color change.
- **Connection Status**: A subtle pulsating animation for 'Connected' status.
- **Loading States**: Use spinners or skeleton loaders within components when fetching or processing data (simulated).
- **Identity Creation**: A brief confirmation animation or toast message upon successful creation.
EDGE CASES:
- **No Identities**: The 'Identities' page should display a message prompting the user to create their first identity, with a clear call-to-action button. The 'Proxy Settings' and 'Bypass' pages should indicate that an identity must be selected and active.
- **Proxy Connection Failure**: If a proxy connection fails (simulated), display a clear error message and reset the connection status.
- **Invalid URL Input**: Basic validation on the URL input field in the 'Bypass' section.
- **Data Persistence Errors**: Implement basic error handling for `localStorage` operations (e.g., if storage is full or disabled), providing user feedback.
- **Accessibility (a11y)**: Use semantic HTML elements. Ensure keyboard navigability for all interactive elements. Use ARIA attributes where necessary. Ensure sufficient color contrast.
- **No Proxy Servers Available**: Display a message indicating no servers are currently available.
SAMPLE DATA (for initial state and examples):
- **Proxy Server List**: `['US - New York', 'EU - Frankfurt', 'Asia - Tokyo', 'CA - Toronto', 'AU - Sydney']`
- **Initial `userData` State**: Load from `localStorage`, or use default values if `localStorage` is empty:
```javascript
const defaultState = {
identities: [],
activeIdentityId: null,
proxySettings: { serverLocation: null, isConnected: false },
appSettings: { theme: 'dark' }
};
```
- **Generated Identity Examples (as shown in Data Model)**
- **Access Result Messages**: "Access granted. You are browsing as [Username] ([Simulated Age]).", "Access denied. Age verification required.", "Invalid URL format."
DEPLOYMENT NOTES:
- **Build Tool**: Vite is recommended for its speed. `npm run build` command.
- **Environment Variables**: Use `.env` files for configuration (e.g., API endpoints if a backend were implemented). `VITE_API_URL` could be an example.
- **Performance Optimizations**: Code splitting (handled well by Vite/React Router), image optimization (if applicable), lazy loading components. Minify JS/CSS during build.
- **Hosting**: Static hosting platforms like Netlify, Vercel, or GitHub Pages are suitable for this SPA.
- **Local Storage Security**: Be aware that `localStorage` is not secure for sensitive data. This MVP uses it for convenience; a production version might require a more robust, potentially encrypted, client-side storage or a backend solution.