As an expert full-stack developer and AI assistant, your task is to generate the complete frontend code for a Single Page Application (SPA) named 'Kod Güvenliği Kalkanı' (Code Security Shield). This application is designed to automatically scan GitHub repositories for command injection vulnerabilities and other potential security flaws, providing developers with alerts and remediation suggestions. It will integrate with CI/CD pipelines. The goal is to create a robust, user-friendly, and secure tool that enhances the development workflow.
1. PROJECT OVERVIEW:
- **Application Name:** Kod Güvenliği Kalkanı (Code Security Shield)
- **Problem Solved:** Addresses the critical vulnerability of command injection in codebases, which can lead to compromised developer machines and systems, as highlighted by recent security incidents like the one reported on Hacker News ('A GitHub Issue Title Compromised 4k Developer Machines').
- **Value Proposition:** Provides automated, real-time security scanning directly integrated into the development workflow, offering clear insights into vulnerabilities and actionable steps for remediation, thereby reducing security risks and improving code quality.
- **Target Users:** Software development teams, individual developers, DevOps engineers, and corporate security departments.
2. TECH STACK:
- **Frontend Framework:** React (using Vite for optimal build performance).
- **Styling:** Tailwind CSS for rapid and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for navigation within the SPA.
- **API Interaction:** Axios for making HTTP requests to a (hypothetical) backend API.
- **UI Components:** Potentially use a lightweight component library like Headless UI for accessible and unstyled components, or build custom ones using Tailwind.
- **Icons:** React Icons for a variety of SVG icons.
- **Form Handling:** React Hook Form for efficient form management and validation.
3. CORE FEATURES:
- **Repository Integration:** Users can connect their GitHub account and select repositories to monitor.
- **Automated Scanning:** Upon repository selection, the application initiates a scan for command injection vulnerabilities using static analysis techniques. This will be simulated in the frontend with mock data and a delay.
- **Vulnerability Dashboard:** A central dashboard displaying an overview of scanned repositories, their security scores, and the number of critical, high, medium, and low severity issues.
- **Detailed Issue View:** Clicking on a repository or issue should lead to a detailed view showing the specific file, line number, vulnerability type, a description of the vulnerability, its potential impact, and suggested code fixes.
- **User Settings:** Allow users to configure basic scanning preferences (e.g., scan frequency simulation, notification preferences - simulated).
- **User Flow (Repository Scan):**
1. User logs in/connects GitHub.
2. User views a list of their GitHub repositories.
3. User selects a repository to monitor.
4. Application simulates initiating a scan (shows loading state).
5. Scan completes (simulated), and results are displayed on the dashboard.
6. User clicks on a repository in the dashboard.
7. User sees a list of vulnerabilities found in that repository.
8. User clicks on a specific vulnerability.
9. User sees detailed information: file path, line number, vulnerability description, impact, and recommended fix.
4. UI/UX DESIGN:
- **Layout:** A clean, modern, and responsive two-column layout. Left sidebar for navigation (Dashboard, Repositories, Settings) and the main content area on the right. Header for application title and user info.
- **Color Palette:** Primary: Dark blue (#1e3a8a), Secondary: Teal (#14b8a6), Accent: Orange (#f97316), Background: Dark Gray (#1f2937), Text: Light Gray (#d1d5db).
- **Typography:** Use a clean sans-serif font like Inter or Roboto for readability. Headings should be clear and distinct from body text.
- **Responsiveness:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Ensure all components adapt gracefully to different screen sizes (e.g., 320px to 1920px).
- **Interactions:** Subtle hover effects on buttons and list items. Smooth transitions for loading states and route changes. Clear visual feedback for user actions.
5. DATA MODEL (Frontend State Management with Zustand):
- **`authStore`:**
- `isAuthenticated`: boolean
- `user`: object | null { githubUsername: string, accessToken: string }
- `login()`: function
- `logout()`: function
- **`repoStore`:**
- `repositories`: array | null [{ id: string, name: string, owner: string, url: string, securityScore: number, issues: number, lastScanned: string }]
- `selectedRepo`: object | null
- `vulnerabilities`: array | null [{ id: string, repoId: string, file: string, line: number, type: string, severity: 'Critical' | 'High' | 'Medium' | 'Low', description: string, impact: string, fix: string }]
- `isLoadingRepos`: boolean
- `isLoadingVulnerabilities`: boolean
- `fetchRepositories()`: function
- `selectRepository(repoId)`: function
- `fetchVulnerabilities(repoId)`: function
- **`scanStore`:**
- `isScanning`: boolean
- `startScan(repoId)`: function
- `simulateScanProgress(repoId)`: function (simulates delay and updates `isScanning`)
- **Mock Data Format (`vulnerabilities`):**
```json
{
"id": "vuln_123",
"repoId": "repo_abc",
"file": "src/utils/helpers.js",
"line": 42,
"type": "Command Injection",
"severity": "High",
"description": "The function 'executeCommand' directly uses user-provided input in a system command without proper sanitization, potentially allowing arbitrary command execution.",
"impact": "An attacker could execute arbitrary commands on the server, leading to data breaches, system compromise, or denial of service.",
"fix": "Sanitize all user inputs before passing them to system commands. Use libraries designed for safe command execution or avoid executing dynamic commands based on user input whenever possible. Whitelist allowed commands and arguments."
}
```
6. COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing.
- Props: None.
- Responsibility: Route configuration, global layout.
- **`Layout.jsx`:** Main layout component with sidebar and header.
- Props: `children`.
- Responsibility: Overall page structure, navigation.
- **`Sidebar.jsx`:** Navigation sidebar component.
- Props: `isOpen` (for mobile), `onClose`.
- Responsibility: Navigation links.
- **`Header.jsx`:** Top header component.
- Props: None.
- Responsibility: App title, user status/login button.
- **`DashboardPage.jsx`:** Main dashboard view.
- Props: None.
- Responsibility: Displays overview of repositories and their security status.
- **`RepositoryList.jsx`:** Displays a list of repositories.
- Props: `repositories` (array), `onRepoClick` (function).
- Responsibility: Renders repository cards/rows.
- **`RepoCard.jsx`:** Individual repository display component.
- Props: `repo` (object).
- Responsibility: Shows repo name, score, issue count.
- **`VulnerabilityListPage.jsx`:** Displays vulnerabilities for a selected repository.
- Props: `vulnerabilities` (array), `repoName` (string).
- Responsibility: Lists vulnerabilities.
- **`VulnerabilityItem.jsx`:** Displays a single vulnerability in a list.
- Props: `vuln` (object), `onClick` (function).
- Responsibility: Shows vulnerability type, severity, file, line.
- **`VulnerabilityDetailPage.jsx`:** Displays full details of a vulnerability.
- Props: `vulnerability` (object).
- Responsibility: Shows description, impact, fix.
- **`AuthButton.jsx`:** Login/Logout button.
- Props: None.
- Responsibility: Handles authentication actions.
- **`LoadingSpinner.jsx`:** Reusable loading spinner component.
- Props: `size` (string).
- Responsibility: Visual indicator for loading states.
- **`SettingsPage.jsx`:** User settings configuration.
- Props: None.
- Responsibility: Display and update user settings (simulated).
7. ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Use `Framer Motion` or similar for smooth fade-in/fade-out transitions between pages.
- **Button Hovers:** Subtle background color change or slight scale-up on button hover using Tailwind CSS.
- **List Item Hovers:** Slight background highlight or shadow on repository/vulnerability list item hover.
- **Loading States:** Display `LoadingSpinner` components with appropriate sizing and placement when data is being fetched (e.g., for repositories, vulnerabilities). Use skeleton loaders for list items before data arrives.
- **Scan Progress:** Animate a progress bar or a subtle pulsing effect on the 'Scanning...' indicator.
- **Micro-interactions:** Slight bounce effect when adding/removing items (if applicable in future), subtle visual feedback on form input focus.
8. EDGE CASES:
- **No Repositories:** Display a clear message and a call to action (e.g., 'Connect your GitHub account and select repositories to scan') when no repositories are connected or found.
- **No Vulnerabilities:** Display a friendly message like 'No vulnerabilities found in this repository. Keep up the good work!' when a scan returns no issues.
- **API Errors:** Implement robust error handling. Display user-friendly error messages (e.g., 'Failed to fetch repositories. Please check your connection or try again later.') using toast notifications or inline messages. Provide retry mechanisms.
- **Authentication Errors:** Handle token expiration or invalid tokens gracefully, prompting the user to re-authenticate.
- **Form Validation:** Use `React Hook Form` for client-side validation on any input fields (e.g., in settings), providing clear error messages next to the relevant fields.
- **Accessibility (a11y):** Ensure proper ARIA attributes, semantic HTML, keyboard navigation support, and sufficient color contrast. Use focus management for modals and interactive elements.
- **Empty States:** Design clear and informative empty states for all lists and dashboards.
9. SAMPLE DATA:
- **`repositories` Array:**
```json
[
{
"id": "repo_abc",
"name": "my-secure-app",
"owner": "dev_user",
"url": "https://github.com/dev_user/my-secure-app",
"securityScore": 85,
"issues": 3,
"lastScanned": "2023-10-27T10:00:00Z"
},
{
"id": "repo_def",
"name": "legacy-project",
"owner": "dev_user",
"url": "https://github.com/dev_user/legacy-project",
"securityScore": 45,
"issues": 12,
"lastScanned": "2023-10-26T15:30:00Z"
}
]
```
- **`vulnerabilities` Array (Example for `repo_def`):
```json
[
{
"id": "vuln_456",
"repoId": "repo_def",
"file": "scripts/deploy.sh",
"line": 15,
"type": "Command Injection",
"severity": "Critical",
"description": "The deployment script executes a command with user-controlled input via variable expansion without proper escaping.",
"impact": "Allows an attacker to inject arbitrary shell commands during deployment, potentially compromising the entire production environment.",
"fix": "Implement strict input validation and escaping for all variables used in shell commands. Consider using a safer scripting language or specific libraries for handling external input."
},
{
"id": "vuln_789",
"repoId": "repo_def",
"file": "config/database.yml",
"line": 22,
"type": "Insecure Configuration",
"severity": "High",
"description": "Database connection string includes sensitive credentials directly in plain text.",
"impact": "Exposure of database credentials could lead to unauthorized access and data theft.",
"fix": "Store sensitive information like passwords in environment variables or a dedicated secrets management system. Avoid hardcoding credentials in configuration files."
}
]
```
- **User Settings Object:**
```json
{
"scanNotifications": true,
"scanFrequency": "daily"
}
```
10. DEPLOYMENT NOTES:
- **Build Tool:** Vite is configured for fast development server and optimized production builds (`npm run build`).
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., `VITE_API_BASE_URL`). Ensure sensitive keys are not committed to version control.
- **Performance:** Code splitting using React.lazy and Suspense for route-based splitting. Optimize images and assets. Memoize expensive calculations and components where necessary (`React.memo`, `useMemo`, `useCallback`).
- **Static Hosting:** The built SPA can be hosted on static hosting platforms like Netlify, Vercel, AWS S3/CloudFront.
- **CORS:** Ensure the (hypothetical) backend API is configured to handle Cross-Origin Resource Sharing (CORS) requests from the frontend domain.
- **HTTPS:** Always serve the application over HTTPS in production.
- **Error Monitoring:** Integrate a service like Sentry for error tracking and reporting in production.
This prompt provides a comprehensive blueprint for building the 'Kod Güvenliği Kalkanı' frontend application. Ensure all generated code adheres strictly to these specifications, focusing on functionality, security best practices, and a polished user experience.