PROJECT OVERVIEW:
The application, named 'AI Güvenlik Kalkanı' (AI Security Shield), is a cutting-edge SaaS platform designed to address the escalating cybersecurity challenges posed by the proliferation of AI technologies. Its primary goal is to secure critical software and infrastructure by proactively detecting and mitigating AI-driven and traditional cyber threats. The core value proposition lies in providing an intelligent, adaptive, and real-time security solution that can anticipate and neutralize threats before they cause significant damage, thereby safeguarding sensitive data, intellectual property, and operational continuity for organizations operating in the AI era.
TECH STACK:
- Frontend: React.js (with Vite for fast development)
- Styling: Tailwind CSS for rapid and utility-first styling
- State Management: Zustand for efficient global state management
- Routing: React Router DOM
- UI Components: Custom components built with Tailwind CSS, potentially using a library like Headless UI for accessibility and headless logic.
- Data Fetching: Axios for HTTP requests to a potential backend API.
- Animation Library: Framer Motion for smooth and engaging UI animations.
- Form Handling: React Hook Form with Zod for validation.
- Icons: Heroicons or Lucide React.
- Potential Backend (for future scaling, not MVP focus): Node.js/Express or Python/FastAPI with a PostgreSQL or MongoDB database.
CORE FEATURES (MVP):
1. **Real-time AI-based Anomaly Detection**:
* **User Flow**: The system continuously ingests data streams (logs, network traffic metadata, API call patterns) from the client's infrastructure. The AI engine analyzes these streams in real-time to identify deviations from normal behavior (anomalies). These anomalies are flagged and sent to the alert system.
* **Details**: This involves pre-trained ML models capable of detecting unusual patterns. For the MVP, focus will be on log pattern anomalies and API request rate/pattern anomalies.
2. **Automated Alerting and Prioritization**:
* **User Flow**: When an anomaly is detected, the system generates an alert. Alerts are automatically assigned a severity score based on factors like the type of anomaly, the affected asset's criticality (if known), and historical threat data. High-priority alerts are immediately surfaced to the user.
* **Details**: Alerts should include a summary of the anomaly, detected time, affected service/component (if identifiable), and the assigned severity level (e.g., Low, Medium, High, Critical).
3. **Integration API Access**:
* **User Flow**: Users can obtain API keys to integrate 'AI Güvenlik Kalkanı' with their existing security tools (e.g., SIEM, SOAR, custom dashboards). This allows for centralized monitoring and automated response workflows.
* **Details**: The MVP will expose a simple RESTful API endpoint to fetch recent high-priority alerts and system status.
4. **Simplified Dashboard**:
* **User Flow**: Upon login, users are presented with a clean, intuitive dashboard. The dashboard provides a high-level overview of the system's security status, including the number of active threats, recent critical alerts, and overall system health. It serves as the central control panel for monitoring.
* **Details**: Key dashboard elements include: Threat count summary (segmented by severity), list of recent critical alerts with links to details, system status indicator, and quick access to settings/API key management.
UI/UX DESIGN:
- **Layout**: Single Page Application (SPA) layout. A persistent sidebar navigation for main sections (Dashboard, Alerts, Settings, API Keys). The main content area dynamically updates based on the selected navigation item. Responsive design is crucial, adapting seamlessly to desktop, tablet, and mobile viewports.
- **Color Palette**: Primary: Deep Navy Blue (#0A192F) - conveys security and trust. Secondary: Teal (#64FFDA) - for accents, CTAs, and active states, signifying innovation and vigilance. Grays (#8892B0, #CCD6F6, #233554) for text, backgrounds, and borders. Red (#FF6B6B) for critical alerts and error states. Yellow (#FFD166) for warning states.
- **Typography**: Use a modern, clean sans-serif font like 'Inter' or 'Manrope'. Headings should be bold and distinct, body text readable at various sizes. Maintain consistent font hierarchy.
- **Responsive Rules**: Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content blocks stack vertically. Ensure touch targets are adequately sized. Use CSS Grid and Flexbox for layout.
COMPONENT BREAKDOWN:
- `App.js` / `main.jsx`: Root component, sets up routing and global layout.
- `Layout.jsx`: Main application layout, includes `Sidebar` and `MainContent`. Handles responsiveness.
- `Sidebar.jsx`: Navigation menu component. Props: `routes` (array of navigation items). Handles active link styling.
- `MainContent.jsx`: Wrapper for the content area of each page. Props: `children`.
- `DashboardPage.jsx`: Main dashboard view. Fetches and displays summary data. Contains `ThreatSummaryCard`, `RecentAlertsList`, `SystemStatusIndicator`.
- `ThreatSummaryCard.jsx`: Displays counts of threats by severity. Props: `threatCounts` (object like `{ critical: 2, high: 5, medium: 10, low: 20 }`).
- `RecentAlertsList.jsx`: Displays a list of the latest critical alerts. Props: `alerts` (array of alert objects). Each item links to `AlertDetailPage`.
- `AlertDetailPage.jsx`: Shows detailed information about a specific alert. Props: `alertId` (from URL params).
- `AlertsPage.jsx`: Displays a paginated list of all alerts with filtering/sorting options. Props: `fetchAlerts` (function).
- `AlertListItem.jsx`: Renders a single alert in a list. Props: `alert` (object).
- `SettingsPage.jsx`: User settings configuration. (MVP might have minimal settings).
- `APIKeysPage.jsx`: Manages API keys. Includes `APIKeyGenerator`, `APIKeyList`.
- `APIKeyGenerator.jsx`: Button/form to generate new API keys.
- `APIKeyList.jsx`: Lists existing API keys with copy/revoke options. Props: `keys` (array).
- `LoginForm.jsx` / `AuthWrapper.jsx`: Handles user authentication.
- `LoadingSpinner.jsx`: Reusable loading indicator component. Props: `size`, `color`.
- `AlertSeverityBadge.jsx`: Displays a colored badge for alert severity. Props: `severity` (string).
DATA MODEL:
- **Alert Object**: `{ id: string, timestamp: string, severity: 'Low' | 'Medium' | 'High' | 'Critical', type: string, description: string, affectedComponent: string | null, status: 'Open' | 'Investigating' | 'Closed', createdAt: string, updatedAt: string }`
- **Threat Count Object**: `{ critical: number, high: number, medium: number, low: number }`
- **API Key Object**: `{ id: string, key: string, description: string, createdAt: string, revoked: boolean }`
- **State Structure (Zustand)**:
* `authStore`: `{ user: User | null, isLoggedIn: boolean, login: (userData) => void, logout: () => void }`
* `alertStore`: `{ alerts: Alert[], threatCounts: ThreatCount, isLoading: boolean, error: string | null, fetchAlerts: () => Promise<void>, fetchAlertCounts: () => Promise<void>, getAlertById: (id) => Alert | undefined }`
* `apiKeyStore`: `{ keys: ApiKey[], isLoading: boolean, error: string | null, fetchKeys: () => Promise<void>, generateKey: (description) => Promise<void>, revokeKey: (id) => Promise<void> }`
- **Local Storage**: Store JWT tokens, user preferences (e.g., theme settings).
ANIMATIONS & INTERACTIONS:
- **Page Transitions**: Subtle fade-in/fade-out transitions between pages using Framer Motion (`AnimatePresence`).
- **Hover Effects**: Buttons and interactive elements have slight scale-up or background-color changes on hover.
- **Loading States**: `LoadingSpinner` component displayed prominently when data is being fetched. Skeleton loaders for list items could be used for a smoother perceived performance.
- **Micro-interactions**: Smooth expansion/collapse of alert details, subtle animations on threat count updates, feedback on button clicks (e.g., copy API key success message).
- **Data Updates**: Alerts list can have a subtle pulse animation for newly added high-priority alerts.
EDGE CASES:
- **Empty States**: Dashboard shows informative messages and potential quick actions when there are no alerts or no data (`No critical threats detected.`, `Generate your first API key.`). Alerts page shows `No alerts found.`.
- **Error Handling**: Graceful error handling for API calls. Display user-friendly error messages (e.g., `Failed to load alerts. Please try again later.`). Implement retry mechanisms for transient network issues.
- **Validation**: Client-side validation for forms (e.g., API key description) using React Hook Form and Zod. Server-side validation will be crucial for API key generation and user input.
- **Authentication**: Secure handling of login sessions, token refresh mechanisms, and protection against unauthorized access. Implement logout functionality that properly invalidates tokens.
- **Accessibility (a11y)**: Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigation support for all interactive elements. Sufficient color contrast ratios.
SAMPLE DATA:
```json
// Mock Alert Object
{
"id": "alert-123e4567-e89b-12d3-a456-426614174000",
"timestamp": "2024-08-15T14:30:00Z",
"severity": "Critical",
"type": "Unusual API Traffic Volume",
"description": "API endpoint /api/v1/users received 5000 requests in 1 minute, exceeding the normal threshold of 500 requests/min.",
"affectedComponent": "User Authentication Service",
"status": "Open",
"createdAt": "2024-08-15T14:31:15Z",
"updatedAt": "2024-08-15T14:31:15Z"
}
// Mock Alert Object
{
"id": "alert-87654321-e89b-12d3-a456-426614174001",
"timestamp": "2024-08-15T11:05:10Z",
"severity": "High",
"type": "Suspicious Login Attempt",
"description": "Multiple failed login attempts detected from an unrecognized IP address (198.51.100.10).",
"affectedComponent": "Login Service",
"status": "Investigating",
"createdAt": "2024-08-15T11:06:00Z",
"updatedAt": "2024-08-15T11:07:30Z"
}
// Mock Alert Object
{
"id": "alert-abcdef01-e89b-12d3-a456-426614174002",
"timestamp": "2024-08-14T09:15:00Z",
"severity": "Medium",
"type": "Log Anomaly: Unexpected Error Rate",
"description": "Error rate for service 'payment-processor' increased by 300% in the last hour.",
"affectedComponent": "Payment Processor Service",
"status": "Closed",
"createdAt": "2024-08-14T09:16:00Z",
"updatedAt": "2024-08-14T09:30:00Z"
}
// Mock Threat Counts Object
{
"critical": 1,
"high": 3,
"medium": 15,
"low": 45
}
// Mock API Key List
[
{
"id": "key-a1b2c3d4",
"key": "sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"description": "SIEM Integration Key",
"createdAt": "2024-07-01T10:00:00Z",
"revoked": false
},
{
"id": "key-e5f6g7h8",
"key": "sk_live_YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY",
"description": "Custom Dashboard Feed",
"createdAt": "2024-07-10T15:30:00Z",
"revoked": false
}
]
```
DEPLOYMENT NOTES:
- **Build Tool**: Vite is recommended for fast development builds and optimized production builds.
- **Environment Variables**: Use `.env` files for managing environment variables (e.g., `VITE_API_BASE_URL`). Ensure sensitive variables are not committed to version control.
- **Performance Optimizations**: Code splitting using React.lazy and Suspense. Image optimization if any are used. Minimize bundle size. Tree shaking with Vite. Consider using `React.memo` and `useCallback` for performance-critical components.
- **HTTPS**: Ensure the application is served over HTTPS in production.
- **CORS**: Configure appropriate CORS policies on the backend (if applicable) to allow requests from the frontend domain.
- **Scalability**: While MVP is frontend-focused, design the state management and component structure with future backend integration in mind. Use clear API contracts.
- **Monitoring**: Integrate basic frontend error tracking (e.g., Sentry, LogRocket) for production monitoring.