You are an expert Senior Full-Stack Developer and Startup Consultant tasked with creating a comprehensive plan to build a Single Page Application (SPA) for a data security monitoring service. The application aims to proactively detect and alert users about potential data breaches and unauthorized access to sensitive information, inspired by real-world incidents like the one discussed on Hacker News regarding Social Security data. Your goal is to generate a detailed, production-ready codebase structure, including all necessary components, logic, and design considerations.
## PROJECT OVERVIEW:
The application, tentatively named 'Veri Güvenliği Kalkanı' (Data Security Shield), is a Software as a Service (SaaS) platform designed to address the growing threat of data breaches. It provides businesses and individuals with a proactive solution to monitor the dark web, forums, and compromised databases for their sensitive data. The core value proposition is to provide early detection, risk assessment, and timely alerts, enabling users to mitigate potential damage from data leaks. The problem arises from the increasing volume and sophistication of data breaches, where stolen sensitive information can lead to identity theft, financial loss, and severe reputational damage for organizations. This platform offers a critical layer of defense by actively scanning for compromised data associated with the user's organization or personal digital footprint.
## TECH STACK:
- **Frontend Framework:** React (using Vite for fast development setup)
- **Styling:** Tailwind CSS for rapid and utility-first styling, with custom configurations.
- **State Management:** Zustand for efficient and scalable global state management.
- **Routing:** React Router DOM for navigation within the SPA.
- **UI Components:** Headless UI for accessible and customizable unstyled components (e.g., modals, dropdowns, tooltips).
- **Data Fetching:** Axios for HTTP requests to a hypothetical backend API.
- **Charting:** Chart.js or Recharts for data visualization on the dashboard.
- **Form Handling:** React Hook Form for efficient and robust form management.
- **Validation:** Yup for schema-based validation.
- **Icons:** Heroicons (integrated with Tailwind CSS)
- **Deployment:** Ready for Vercel or Netlify deployment, with necessary build configurations.
## CORE FEATURES (MVP):
1. **Data Breach Monitoring Dashboard:**
* **User Flow:** Upon login, the user is presented with a dashboard summarizing recent threat intelligence. Key metrics like 'New Alerts', 'High-Risk Incidents', 'Monitored Assets' are displayed prominently. A timeline view shows chronological events. Users can filter alerts by type, severity, and date.
* **Functionality:** Displays aggregated data from various monitoring sources. Provides a high-level overview of the security posture.
2. **Asset Management:**
* **User Flow:** Users can add and manage 'assets' they want to monitor. Assets can include domain names, IP addresses, email addresses, company names, or specific data identifiers (e.g., partial SSNs, credit card patterns – with strict validation and anonymization). For each asset, users can configure monitoring preferences and sensitivity levels.
* **Functionality:** A form allows adding new assets with validation. A table lists all managed assets, with options to edit or delete.
3. **Alerts & Notifications:**
* **User Flow:** When a potential match for a monitored asset is found in a data leak, an alert is generated. Users receive real-time notifications (e.g., in-app, email). Clicking on an alert takes the user to a detailed view of the incident, including the source, type of data compromised, and recommended actions.
* **Functionality:** Real-time alert generation based on monitoring service responses. Notification system integrated with state management.
4. **Risk Assessment & Reporting:**
* **User Flow:** Each alert includes a calculated risk score based on factors like data type, source credibility, and potential impact. Users can generate periodic reports (e.g., weekly, monthly) summarizing monitoring activities, detected threats, and mitigation efforts.
* **Functionality:** Algorithms to calculate risk scores. PDF report generation capability (mocked for MVP).
## UI/UX DESIGN:
- **Layout:** A clean, modern, and intuitive dashboard layout. A persistent sidebar for navigation (Dashboard, Assets, Alerts, Settings, Reports) and a main content area. Header for user profile and notifications.
- **Color Palette:** Primary: Deep Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Orange (#F97316) for alerts/warnings. Neutrals: Grays (#F3F4F6, #9CA3AF, #1F2937) for backgrounds, text, and borders. Ensure high contrast for accessibility.
- **Typography:** Sans-serif font family (e.g., Inter or Roboto) for readability. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Components adapt fluidly to various screen sizes (mobile, tablet, desktop). Utilize Tailwind's responsive prefixes (sm:, md:, lg:).
- **Interactions:** Subtle hover effects on interactive elements, smooth transitions for modal popups and sidebar collapse. Clear loading indicators (spinners, skeleton screens) for data fetching.
## COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing and global layout.
- **`Layout.jsx`:** Wrapper component for overall app structure (Sidebar, Header, Content Area).
- **`Sidebar.jsx`:** Navigation menu component. Receives `navItems` as props. Handles active link styling.
- **`Header.jsx`:** Top navigation bar. Includes logo, search bar (future), notification icon, user profile menu.
- **`DashboardPage.jsx`:** Main dashboard view. Fetches and displays overview data.
- **`KpiCard.jsx`:** Displays Key Performance Indicator (e.g., 'New Alerts'). Takes `title`, `value`, `icon` as props.
- **`AlertTimeline.jsx`:** Renders a chronological list of recent alerts. Takes `alerts` array as props.
- **`RiskChart.jsx`:** Displays a chart (e.g., pie chart) showing risk distribution. Takes `data` as props.
- **`AssetsPage.jsx`:** Manages the list of monitored assets.
- **`AssetTable.jsx`:** Displays assets in a table. Takes `assets` array and `onEdit`, `onDelete` handlers as props.
- **`AssetFormModal.jsx`:** Modal for adding/editing assets. Uses `React Hook Form` and `Yup` for validation. Takes `isOpen`, `onClose`, `onSubmit`, `initialData` as props.
- **`AlertsPage.jsx`:** Lists all generated alerts.
- **`AlertList.jsx`:** Renders alerts with filtering/sorting options. Takes `alerts` array as props.
- **`AlertDetailView.jsx`:** Displays detailed information for a specific alert. Takes `alert` object as props.
- **`SettingsPage.jsx`:** User and application settings.
- **`ReportsPage.jsx`:** Interface for generating and viewing reports.
- **`NotificationHandler.jsx`:** Manages and displays toast notifications.
- **`LoadingSpinner.jsx`:** Reusable loading indicator.
- **`ErrorDisplay.jsx`:** Component to show error messages.
## DATA MODEL (State Management - Zustand):
- **`useAuthStore`:**
- `isLoggedIn: boolean`
- `user: object | null`
- `login(userData): void`
- `logout(): void`
- **`useAssetStore`:**
- `assets: Asset[]`
- `isLoading: boolean`
- `error: string | null`
- `fetchAssets(): Promise<void>`
- `addAsset(assetData: Omit<Asset, 'id'>): Promise<void>`
- `updateAsset(assetData: Asset): Promise<void>`
- `deleteAsset(assetId: string): Promise<void>`
- **`useAlertStore`:**
- `alerts: Alert[]`
- `selectedAlert: Alert | null`
- `isLoading: boolean`
- `error: string | null`
- `fetchAlerts(): Promise<void>`
- `fetchAlertDetails(alertId: string): Promise<void>`
- `setSelectedAlert(alert: Alert | null): void`
**Data Structures:**
- **`Asset`**:
```json
{
"id": "uuid",
"type": "email" | "domain" | "ip" | "companyName" | "dataIdentifier",
"value": "string", // e.g., "user@example.com" or "example.com"
"sensitivity": "low" | "medium" | "high",
"createdAt": "ISOString"
}
```
- **`Alert`**:
```json
{
"id": "uuid",
"assetId": "uuid", // Refers to the asset being compromised
"assetValue": "string", // The specific value like email or domain found
"source": "darkWebForum" | "breachDatabase" | "pasteSite",
"dataType": "credentials" | "personalInfo" | "financial" | "phi", // Protected Health Information
"description": "string", // Short description of the breach context
"severity": "low" | "medium" | "high" | "critical",
"riskScore": number, // 0-100
"occurredAt": "ISOString", // When the data was likely exfiltrated
"detectedAt": "ISOString", // When the platform detected it
"status": "new" | "investigating" | "resolved" | "falsePositive"
}
```
**Mock Data:** Mock data will be used initially, simulating API responses. In a real implementation, these would be fetched from a backend.
## ANIMATIONS & INTERACTIONS:
- **Sidebar Collapse:** Smooth slide animation when the sidebar collapses/expands on smaller screens.
- **Modal Transitions:** Fade-in/fade-out or slide-up/slide-down animations for modals (e.g., `AssetFormModal`).
- **Button Hovers:** Subtle background color change or slight scaling effect on buttons and interactive elements.
- **Data Loading:** Use skeleton loaders or spinners (`LoadingSpinner.jsx`) while fetching data for tables and dashboard widgets. This provides visual feedback and improves perceived performance.
- **Alert Badges:** Slight pulse or color flash for new, critical alerts.
- **Table Row Hover:** Highlight effect on table rows in `AssetTable` and `AlertList` when hovered.
## EDGE CASES:
- **Empty States:** Design informative and user-friendly empty states for the dashboard, asset list, and alert list when no data is available yet (e.g., "No assets monitored yet. Add your first asset to begin.").
- **Error Handling:** Implement robust error handling. Display user-friendly error messages using `ErrorDisplay.jsx` for API failures, validation errors, etc. Log errors for debugging.
- **Validation:** Comprehensive client-side validation for all forms (especially asset creation/editing) using `React Hook Form` and `Yup`. Provide clear inline error messages next to relevant fields.
- **Loading States:** Ensure all data fetching operations show appropriate loading indicators to prevent user confusion.
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary (especially for custom components like dropdowns), ensure keyboard navigability, sufficient color contrast, and focus management. Headless UI components aid in accessibility.
- **Unauthorized Access:** Implement basic route protection to ensure only logged-in users can access core features.
- **Data Formatting:** Ensure dates, numbers (like risk scores), and sensitive data snippets (if displayed) are formatted consistently and appropriately.
## SAMPLE DATA (Mock Data Examples):
- **Mock Assets:**
```json
[
{
"id": "asset-001",
"type": "email",
"value": "ceo@mycompany.com",
"sensitivity": "high",
"createdAt": "2023-10-26T10:00:00Z"
},
{
"id": "asset-002",
"type": "domain",
"value": "mycompany.com",
"sensitivity": "medium",
"createdAt": "2023-10-26T10:05:00Z"
},
{
"id": "asset-003",
"type": "companyName",
"value": "MyCompany Inc.",
"sensitivity": "high",
"createdAt": "2023-10-27T11:30:00Z"
}
]
```
- **Mock Alerts:**
```json
[
{
"id": "alert-987",
"assetId": "asset-001",
"assetValue": "ceo@mycompany.com",
"source": "breachDatabase",
"dataType": "credentials",
"description": "Email found in leaked credentials from 'DataLeakSiteX' database dump.",
"severity": "critical",
"riskScore": 85,
"occurredAt": "2023-05-15T00:00:00Z",
"detectedAt": "2023-10-27T14:20:00Z",
"status": "new"
},
{
"id": "alert-988",
"assetId": "asset-002",
"assetValue": "mycompany.com",
"source": "darkWebForum",
"dataType": "personalInfo",
"description": "Subdomain list including internal references posted on a private forum.",
"severity": "medium",
"riskScore": 60,
"occurredAt": "2023-09-01T00:00:00Z",
"detectedAt": "2023-10-26T09:15:00Z",
"status": "new"
}
]
```
## DEPLOYMENT NOTES:
- **Build Command:** The build command (e.g., `npm run build` or `yarn build`) should output optimized static assets to a `dist` or `build` folder.
- **Environment Variables:** Utilize environment variables for API endpoints (`REACT_APP_API_URL`) and any other configuration settings. Use `.env` files (e.g., `.env.development`, `.env.production`) and ensure they are correctly loaded by Vite/Create React App.
- **Routing:** Configure the deployment platform (e.g., Vercel, Netlify) for client-side routing. This typically involves a `_redirects` or `vercel.json` file to ensure all routes fall back to `index.html`.
- **Performance Optimizations:**
- Code Splitting: Leverage React lazy loading and dynamic imports for route-based or component-based code splitting to reduce initial bundle size.
- Image Optimization: Ensure images used are optimized. Consider using modern formats like WebP.
- Memoization: Use `React.memo`, `useMemo`, and `useCallback` judiciously to prevent unnecessary re-renders.
- Bundle Analysis: Use tools like `vite-plugin-visualizer` to analyze bundle composition and identify optimization opportunities.
- **HTTPS:** Ensure the deployed application is served over HTTPS.
- **CORS:** Configure the backend API (if separate) to handle Cross-Origin Resource Sharing (CORS) correctly for requests originating from the frontend domain.