You are an expert AI assistant tasked with building a single-page Server-Side Rendered (SSR) React application using Next.js and Tailwind CSS. The application, named 'Sızma Kalkanı' (Penetration Shield), is a SaaS platform designed to proactively identify security vulnerabilities in enterprise AI platforms, inspired by the recent McKinsey Lilli platform hack. It uses autonomous agents to scan and report potential weaknesses.
**1. PROJECT OVERVIEW:**
'Sızma Kalkanı' aims to provide enterprises with a robust solution to detect and mitigate security risks within their internal or external AI platforms. In an era where AI agents can autonomously identify and exploit vulnerabilities, this tool acts as a proactive defense mechanism. It scans target AI platforms, maps their attack surface, identifies exposed API endpoints (especially those lacking authentication), and assesses the risk of potential data breaches or unauthorized access. The core value proposition is to provide early warnings and actionable insights, preventing costly security incidents before they occur. The application addresses the growing threat of autonomous AI-driven attacks on corporate systems, offering a crucial layer of security for valuable data and intellectual property.
**2. TECH STACK:**
- **Framework:** Next.js (for SSR capabilities, routing, and API routes)
- **Styling:** Tailwind CSS (for rapid UI development and consistent styling)
- **State Management:** React Context API (for managing global state like authentication and user settings) and `useState`/`useReducer` for local component state.
- **Data Fetching:** `fetch` API or libraries like `axios` for making requests to potential backend services or mock APIs.
- **UI Components:** Potentially use a headless UI library like Headless UI or Radix UI for accessible and customizable components, or build from scratch with Tailwind.
- **Form Handling:** React Hook Form for efficient and performant form management.
- **Icons:** Heroicons or Lucide Icons.
- **Deployment:** Vercel (recommended for Next.js applications).
**3. CORE FEATURES:**
- **Target Platform Input:**
- **User Flow:** The user lands on the dashboard. They see a prominent form or button to 'Add New Target'. Clicking this opens a modal or navigates to a form page. The form requires fields like 'Platform Name', 'Platform URL (e.g., internal dashboard URL)', and 'API Documentation URL (optional but recommended)'. Upon submission, the platform is added to the user's list of targets.
- **Details:** This is the initial step where users define what needs to be secured.
- **Autonomous Vulnerability Scanning:**
- **User Flow:** Once a target is added, the user can initiate a scan by clicking a 'Scan' button next to the target in the dashboard list. This action triggers a background process (simulated in the frontend for MVP). The UI should provide visual feedback, like a 'Scanning...' status with a progress indicator or spinner. The scanning process involves:
- Mapping the attack surface (simulated).
- Identifying publicly exposed API endpoints (especially those without authentication).
- Simulating detection of vulnerabilities like insecure data writing (e.g., JSON key concatenation issues like in the McKinsey example).
- Checking for potential data leakage vectors.
- **Details:** This is the core AI-driven engine of the application. The MVP will simulate this process. A real implementation would involve complex backend logic and potentially external security tools or custom-built agents.
- **Detailed Security Report Generation:**
- **User Flow:** After a scan is completed, the status changes to 'Completed' or 'Report Ready'. Clicking a 'View Report' button navigates the user to a dedicated report page for that target. The report page displays:
- A summary of the findings.
- A list of identified vulnerabilities, categorized by severity (e.g., Critical, High, Medium, Low).
- For each vulnerability: description, affected endpoint/area, potential impact, and suggested remediation steps.
- Visualizations like charts showing the distribution of vulnerabilities by severity.
- **Details:** Reports must be clear, concise, and actionable, enabling security teams to prioritize and address issues effectively.
- **Risk Assessment Module:**
- **User Flow:** Integrated within the report view, this module assigns a risk score (e.g., 1-100) to the overall platform security posture based on the detected vulnerabilities. It might also highlight the highest-risk vulnerabilities that require immediate attention.
- **Details:** Provides a quick, high-level understanding of the security status and helps in prioritizing remediation efforts.
**4. UI/UX DESIGN:**
- **Layout:** Single-page application (SPA) structure using Next.js's file-based routing for different sections (Dashboard, Add Target, Report View). A clean, modern dashboard layout is essential. A persistent sidebar or top navigation bar for main sections. Content area displays the relevant information for the selected section.
- **Color Palette:** Professional and trustworthy. Primary: Deep Blue (`#0B3D91`), Secondary: Teal (`#008080` or similar), Accent: Orange (`#FFA500`) for calls to action and warnings, Neutrals: Shades of Gray (`#F8F9FA` for background, `#6c757d` for secondary text, `#212529` for primary text).
- **Typography:** Clean, readable sans-serif fonts. Headings: Poppins or Montserrat. Body Text: Open Sans or Lato. Ensure good contrast and hierarchy.
- **Responsive Design:** Mobile-first approach. Tailwind CSS's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`) will be used extensively. Ensure usability across all devices (desktops, tablets, mobiles).
- **Interactivity:** Smooth transitions, clear hover states for buttons and links, intuitive form validation feedback, loading indicators.
**5. COMPONENT BREAKDOWN:**
- **`Layout.js`:** Main application layout component. Includes Header, Sidebar/Navbar, and Footer (if necessary). Manages global UI structure.
- Props: `children` (the main content of the page).
- **`Header.js`:** Top navigation bar, logo, user profile/settings access.
- Props: `user` (optional user object).
- **`Sidebar.js`:** Navigation menu for different app sections (Dashboard, Targets, Settings).
- Props: `isOpen` (boolean to control mobile visibility).
- **`Dashboard.js`:** Main landing page after login. Displays a list of added target platforms.
- Props: `targets` (array of target objects).
- State: `isLoading`, `error`.
- **`TargetList.js`:** Renders the list of target platforms.
- Props: `targets` (array), `onScanClick` (function), `onViewReportClick` (function).
- **`TargetListItem.js`:** Renders a single row/card for a target platform in the list.
- Props: `target` (object), `status` (string: 'idle', 'scanning', 'completed', 'error'), `onScanClick`, `onViewReportClick`.
- **`AddTargetForm.js`:** Form for adding a new target platform.
- Props: `onSubmit` (function).
- State: Form input values, validation errors.
- **`ReportView.js`:** Displays the detailed security report for a specific target.
- Props: `reportData` (object).
- **`VulnerabilityCard.js`:** Renders a single vulnerability item within the report.
- Props: `vulnerability` (object: { title, description, severity, impact, remediation }).
- **`ProgressBar.js`:** Visual feedback component for scanning progress.
- Props: `progress` (number: 0-100).
- **`Button.js`:** Reusable button component with different states (primary, secondary, disabled).
- Props: `children`, `onClick`, `variant`, `disabled`.
- **`Input.js`:** Reusable input field component.
- Props: `label`, `value`, `onChange`, `error`, `type`.
**6. DATA MODEL:**
- **`Target` Object:**
```json
{
"id": "uuid-string",
"name": "McKinsey AI Platform",
"url": "https://ai.mckinsey.com",
"apiDocsUrl": "https://ai.mckinsey.com/api/docs",
"status": "completed", // 'idle', 'scanning', 'completed', 'error'
"lastScanDate": "2023-10-27T10:00:00Z",
"report": { ... } // Reference to the report object or embedded report
}
```
- **`Report` Object:**
```json
{
"platformId": "uuid-string",
"scanDate": "2023-10-27T10:05:00Z",
"overallScore": 85, // e.g., 0-100
"vulnerabilities": [
{
"id": "vuln-uuid-1",
"title": "Unprotected Write Endpoint",
"description": "An API endpoint allows writing to the production database without proper authentication. JSON keys are concatenated, posing a risk.",
"severity": "Critical", // 'Critical', 'High', 'Medium', 'Low'
"impact": "Potential data corruption, unauthorized data insertion, or system compromise.",
"remediation": "Implement robust authentication (e.g., OAuth2, API Keys) for all endpoints. Sanitize and validate all input data, including JSON keys.",
"affectedEndpoint": "POST /api/v1/search/log"
},
{
"id": "vuln-uuid-2",
"title": "Exposed API Documentation",
"description": "The API documentation is publicly accessible, which could aid attackers in discovering vulnerabilities.",
"severity": "Medium",
"impact": "Facilitates reconnaissance for attackers.",
"remediation": "Restrict access to API documentation to authorized personnel or implement an authentication layer.",
"affectedEndpoint": "/api/docs"
}
// ... more vulnerabilities
]
}
```
- **State Management:** Global state for user authentication and target list will be managed using React Context. Local component state for form inputs, loading spinners, and UI toggles.
**7. ANIMATIONS & INTERACTIONS:**
- **Loading States:** Use spinners (`@keyframes spin`) or skeleton loaders for data fetching and scanning processes. `ProgressBar` component for scan progress.
- **Transitions:** Smooth fade-in/fade-out transitions for modals, menus, and content changes using Tailwind CSS transitions (`transition duration-300 ease-in-out`).
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons and list items.
- **Micro-interactions:** Form validation feedback (e.g., error messages appearing smoothly), button click feedback (slight press effect).
- **Status Indicators:** Visual cues for target scanning status (e.g., pulsing animation for 'scanning', checkmark for 'completed', cross for 'error').
**8. EDGE CASES:**
- **Empty States:** Dashboard should display a helpful message and a clear call to action (e.g., 'Add your first target platform') when no targets are added.
- **Error Handling:** Network errors during API calls, invalid user input, backend service failures. Display user-friendly error messages. For scanning errors, provide details or suggest retrying.
- **Validation:** Client-side validation for all form inputs (URL format, required fields). Server-side validation (simulated in MVP) for critical data.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive components, keyboard navigation support, sufficient color contrast.
- **No API Docs:** Handle cases where the user provides a platform URL but no API documentation URL gracefully.
- **Scanning Failures:** Implement retry mechanisms or clearly indicate persistent scan failures.
**9. SAMPLE DATA:**
- **`targets` Array (for Dashboard):**
```json
[
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "McKinsey Lilli Platform",
"url": "https://lilli.mckinsey.com",
"apiDocsUrl": "https://lilli.mckinsey.com/api/v2/docs",
"status": "completed",
"lastScanDate": "2024-03-15T09:30:00Z",
"report": null // Report might be fetched on demand
},
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"name": "Internal Data Analysis Tool",
"url": "https://data.internal.corp",
"apiDocsUrl": null,
"status": "scanning",
"lastScanDate": "2024-03-16T11:00:00Z",
"report": null
},
{
"id": "1a2b3c4d-5e6f-7890-abcd-ef1234567890",
"name": "Customer CRM AI",
"url": "https://crm.ai.example.com",
"apiDocsUrl": "https://crm.ai.example.com/swagger",
"status": "error",
"lastScanDate": "2024-03-14T14:00:00Z",
"report": null
}
]
```
- **`vulnerability` Object (example for ReportView):**
```json
{
"id": "vuln-001",
"title": "Insecure Direct Object Reference (IDOR)",
"description": "User can access other users' data by manipulating object IDs in API requests.",
"severity": "High",
"impact": "Unauthorized access to sensitive customer information.",
"remediation": "Implement proper authorization checks on every request. Use opaque identifiers instead of sequential IDs.",
"affectedEndpoint": "GET /api/v3/users/{userId}/profile"
}
```
- **`mockScanProgress` (example for ProgressBar):**
```json
{
"targetId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"progress": 75 // Percentage
}
```
**10. DEPLOYMENT NOTES:**
- **Environment Variables:** Use `.env.local` for local development and Vercel's environment variable settings for production. Key variables might include API keys for potential external services (if used in future iterations), JWT secrets, etc.
- **Build Process:** Standard Next.js build command: `npm run build`. Ensure the build output is optimized for performance.
- **SSR Configuration:** Leverage Next.js's SSR or Static Site Generation (SSG) where appropriate. For dynamic data like scan reports, SSR or client-side fetching after initial load is suitable.
- **Image Optimization:** Use Next.js's `next/image` component for optimized image loading.
- **Performance:** Code splitting via Next.js dynamic imports (`next/dynamic`), memoization (`React.memo`), and efficient state management to ensure a fast and responsive user experience.
- **Security Headers:** Configure security headers (e.g., CSP, HSTS) in `next.config.js` or via Vercel settings.
- **Monitoring:** Integrate basic logging and error tracking (e.g., Sentry, Vercel Analytics) for production monitoring.