You are an AI assistant tasked with generating a single-page Server-Side Rendered (SSR) React application using Next.js and Tailwind CSS, along with necessary state management and utility libraries. The application, named 'Kod Mühendisliği Dedektifi' (Code Engineering Detective), aims to provide developers and researchers with a tool to analyze legacy and complex codebases for undiscovered bugs and vulnerabilities. The core idea is to leverage AI and advanced static analysis techniques to find issues similar to the one discovered in the Apollo 11 guidance computer code.
PROJECT OVERVIEW:
- **Purpose**: To help developers identify subtle, long-standing bugs and potential security vulnerabilities in historical or complex software codebases.
- **Problem Solved**: Many critical systems have codebases that are decades old, poorly documented, or written in archaic languages. Discovering bugs in these systems is time-consuming and requires deep expertise. This tool automates a significant part of that discovery process.
- **Value Proposition**: Offers a powerful, AI-assisted static analysis tool that can process large, complex codebases (like Assembly, COBOL, Fortran, older C versions) and pinpoint obscure errors that have been missed for years, saving significant debugging time and preventing potential system failures or security breaches.
TECH STACK:
- **Framework**: Next.js (for SSR, API routes, and React framework)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **State Management**: Zustand (lightweight and efficient for global state)
- **UI Components**: Headless UI (for accessible and customizable components) and custom components.
- **API Interaction**: `fetch` API or `axios` (if preferred for additional features)
- **Code Parsing/Analysis (Conceptual)**: While a full-fledged LLM code analysis backend is beyond the scope of a frontend-only generation, the UI should simulate the interaction with such a backend. We'll use mock data and placeholder functions to represent analysis results. For actual implementation, one might integrate with tools like Semgrep, custom LLM prompts, or specialized static analyzers.
- **File Handling**: `File` API for client-side file uploads.
CORE FEATURES & USER FLOW:
1. **Project Creation/Selection**:
* **User Flow**: User lands on the dashboard. Clicks 'New Project' or selects an existing one. For a new project, they name it, select the primary programming language (e.g., Assembly, C, COBOL), and optionally add a description.
* **Details**: Dashboard displays a list of existing projects. A modal or separate page allows for new project creation.
2. **Code Upload**:
* **User Flow**: Within a project, the user navigates to the 'Code Upload' section. They can either drag-and-drop files/folders or use a file input button to select code files. For larger projects, a Git repository URL input could be a future enhancement, but for MVP, direct file upload is sufficient.
* **Details**: Handles single files, multiple files, or zipped archives. A progress indicator should be shown during upload.
3. **Code Analysis Trigger**:
* **User Flow**: After uploading code, the user clicks an 'Analyze Code' button. They might select specific analysis types (e.g., 'Bug Detection', 'Security Vulnerability Scan', 'Performance Check') or run a comprehensive scan.
* **Details**: This action conceptually sends the uploaded code (or its reference) to the backend analysis engine. The UI should display a loading state and potentially estimated time.
4. **Analysis Results Display**:
* **User Flow**: Once analysis is complete, the user sees a summary report. This report categorizes findings (e.g., Critical Bugs, Warnings, Potential Vulnerabilities). Clicking on a category or a specific finding reveals details: affected file(s), line number(s), a description of the issue (e.g., 'Potential resource leak in error path'), severity, and a suggested remediation.
* **Details**: Results should be presented in a clear, sortable, and filterable table or list. Each finding should link to the relevant code snippet, potentially highlighted within a code viewer.
UI/UX DESIGN:
- **Layout**: A clean, modern dashboard layout. A sidebar for navigation (Projects, Settings, Account) and a main content area. On smaller screens, the sidebar collapses into a hamburger menu.
- **Color Palette**: A professional and focused palette. Primary: Dark charcoal (#1F2937) for backgrounds. Secondary: A deep, muted blue (#1E3A8A) for primary actions and highlights. Accent: A subtle teal or green (#10B981) for success states and positive indicators. Warning/Error: Muted orange/red (#F59E0B / #EF4444).
- **Typography**: Sans-serif fonts like Inter or Roboto for readability. Clear hierarchy using font weights and sizes.
- **Responsive Design**: Mobile-first approach. All components should adapt gracefully to different screen sizes. Utilize Tailwind's responsive prefixes (sm:, md:, lg:).
- **Interactions**: Subtle hover effects on buttons and interactive elements. Smooth transitions for modal openings/closings and sidebar collapses. Loading spinners/skeletons to indicate background processes.
DATA MODEL (Conceptual State Structure using Zustand):
```typescript
interface Finding {
id: string;
projectId: string;
type: 'BUG' | 'VULNERABILITY' | 'PERFORMANCE' | 'WARNING';
severity: 'CRITICAL' | 'HIGH' | 'MEDIUM' | 'LOW';
title: string;
description: string;
filePath: string;
lineNumber: number;
suggestedFix: string;
codeSnippet: string; // Snippet around the issue
}
interface Project {
id: string;
name: string;
language: string;
description?: string;
createdAt: string;
updatedAt: string;
findings?: Finding[]; // Findings associated with this project
isAnalyzing: boolean;
}
interface AnalysisState {
projects: Project[];
currentProject: Project | null;
isLoading: boolean;
error: string | null;
// Methods for fetching, creating, updating projects and findings
fetchProjects: () => Promise<void>;
createProject: (projectData: Omit<Project, 'id' | 'createdAt' | 'updatedAt' | 'findings' | 'isAnalyzing'>) => Promise<void>;
uploadCode: (projectId: string, files: File[]) => Promise<void>; // Simulates backend processing
analyzeCode: (projectId: string, analysisTypes?: string[]) => Promise<void>; // Simulates backend analysis
setCurrentProject: (projectId: string) => void;
clearError: () => void;
}
```
**Mock Data Format**: Findings will be an array of objects conforming to the `Finding` interface. Projects will be an array of objects conforming to the `Project` interface.
COMPONENT BREAKDOWN:
1. **`Layout.tsx`**: Main application layout component. Includes Header, Sidebar, and main content area. Handles routing.
* **Props**: `children` (ReactNode)
2. **`Header.tsx`**: Top navigation bar. Includes logo, user profile/auth links.
* **Props**: None
3. **`Sidebar.tsx`**: Left-hand navigation menu. Links to dashboard, projects, settings.
* **Props**: `isOpen` (boolean), `onClose` (function)
4. **`Dashboard.tsx`**: Main landing page after login. Shows project overview, recent activity.
* **Props**: None (fetches data via Zustand store)
5. **`ProjectList.tsx`**: Displays a list of user's projects, typically within the Dashboard or a dedicated Projects page.
* **Props**: `projects` (Project[])
6. **`ProjectCard.tsx`**: Individual card for each project in the `ProjectList`.
* **Props**: `project` (Project)
7. **`ProjectDetail.tsx`**: Page showing details of a specific project, including uploaded files, analysis status, and findings.
* **Props**: `projectId` (string)
8. **`CodeUploader.tsx`**: Component for uploading code files (drag-and-drop or browse).
* **Props**: `projectId` (string), `onUploadComplete` (function)
9. **`AnalysisRunner.tsx`**: Button/controls to trigger code analysis.
* **Props**: `projectId` (string), `isLoading` (boolean)
10. **`FindingList.tsx`**: Displays the list of analysis findings for a project.
* **Props**: `findings` (Finding[])
11. **`FindingDetailModal.tsx`**: Modal to show detailed information about a single finding.
* **Props**: `finding` (Finding), `isOpen` (boolean), `onClose` (function)
12. **`CodeViewer.tsx`**: (Optional/Advanced) A component to display code snippets with syntax highlighting.
* **Props**: `code` (string), `language` (string), `highlightLine` (number)
13. **`LoadingSpinner.tsx`**: Reusable spinner component.
* **Props**: None
14. **`ErrorMessage.tsx`**: Component to display errors.
* **Props**: `message` (string)
ANIMATIONS & INTERACTIONS:
- **Sidebar Collapse**: Smooth slide animation using Tailwind CSS transitions.
- **Modal Transitions**: Fade-in/fade-out and slight scale-up/down for modals.
- **Button Hovers**: Subtle background color change or slight scale-up.
- **Loading States**: Use `react-loading-skeleton` or custom CSS spinners/skeletons when data is being fetched or analyzed. Progress bars for file uploads.
- **Hover Effects on Findings**: Slight background highlight or shadow change when hovering over a finding in the list to indicate interactivity.
EDGE CASES:
- **No Projects**: Dashboard should display a clear message and a prominent call-to-action to create the first project.
- **No Files Uploaded**: Code Uploader should provide clear instructions. Analysis button should be disabled or show a warning.
- **Analysis Errors**: If the backend analysis fails, display a user-friendly error message with details (if available) and options to retry or contact support.
- **Empty Findings**: If analysis runs but finds nothing, display a success message like 'No significant issues found'.
- **Large File Uploads**: Implement chunking or use backend processing capabilities. Show clear progress. Handle timeouts.
- **Unsupported Languages**: Gracefully inform the user if the uploaded code's language is not supported by the current analysis engine.
- **Accessibility (a11y)**: Ensure all interactive elements are keyboard-navigable. Use ARIA attributes where necessary. Ensure sufficient color contrast.
SAMPLE DATA:
```json
[
{
"id": "proj_abc123",
"name": "Apollo 11 Guidance Computer",
"language": "Assembly",
"description": "Analysis of the Apollo 11 AGC source code.",
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T11:30:00Z",
"isAnalyzing": false,
"findings": [
{
"id": "finding_xyz789",
"projectId": "proj_abc123",
"type": "BUG",
"severity": "CRITICAL",
"title": "Potential Resource Leak in Gyro Control Error Path",
"description": "A resource lock in the gyro control code leaks when an error occurs during realignment, silently disabling the guidance platform's ability to realign.",
"filePath": "src/gyro_control.asm",
"lineNumber": 1452,
"suggestedFix": "Ensure the resource lock is explicitly released in all error handling paths within the gyro control module. Consider using a RAII pattern if applicable or add explicit unlock calls.",
"codeSnippet": "\t[...]\nL1450: LOAD R1, LOCK_FLAG\n TEST R1\n JNZ L1455 ; Already locked, skip\n SET LOCK_FLAG, 1 ; Acquire lock\n CALL REALIGN_GYRO\n JUMP L1460\nL1455: ; Error path - lock not released!\n ; ... error handling code ...\n ; Lock remains acquired\nL1460: [...]"
},
{
"id": "finding_pqr456",
"projectId": "proj_abc123",
"type": "PERFORMANCE",
"severity": "MEDIUM",
"title": "Inefficient Loop in Data Processing",
"description": "The data processing loop at line 3010 performs redundant calculations. Optimization could reduce execution time.",
"filePath": "src/data_proc.asm",
"lineNumber": 3010,
"suggestedFix": "Refactor the loop to pre-calculate common values outside the loop body or use optimized assembly instructions for the specific operation.",
"codeSnippet": "\t[...]\nLOOP_START: ; Line 3010\n LOAD R2, DATA_PTR\n LOAD R3, CONST_VAL\n MUL R4, R2, R3 ; Redundant multiplication\n STORE RESULT, R4\n INC DATA_PTR\n CMP DATA_PTR, END_PTR\n JNE LOOP_START\n [...]"
}
]
},
{
"id": "proj_def456",
"name": "Legacy CRM Backend",
"language": "COBOL",
"description": "Analysis of the main business logic.",
"createdAt": "2023-10-26T14:00:00Z",
"updatedAt": "2023-10-26T14:00:00Z",
"isAnalyzing": true,
"findings": []
},
{
"id": "proj_ghi789",
"name": "Early Web Server",
"language": "C",
"description": "Core request handling module.",
"createdAt": "2023-10-25T09:00:00Z",
"updatedAt": "2023-10-25T09:00:00Z",
"isAnalyzing": false,
"findings": [
{
"id": "finding_abc111",
"projectId": "proj_ghi789",
"type": "VULNERABILITY",
"severity": "HIGH",
"title": "Buffer Overflow Vulnerability",
"description": "Input validation is insufficient, allowing a buffer overflow when handling excessively long request paths.",
"filePath": "src/server.c",
"lineNumber": 215,
"suggestedFix": "Implement strict bounds checking on input strings before copying them into fixed-size buffers. Use safer string handling functions like `strncpy` with proper null-termination checks.",
"codeSnippet": "\t[...]\nchar buffer[256];\nrecv(client_socket, buffer, sizeof(buffer) - 1); // Vulnerable to overflow if received data > 255 bytes\n[...]"
}
]
}
]
```
DEPLOYMENT NOTES:
- **Build**: Use `next build` command. This will create an optimized production build.
- **Environment Variables**: Utilize `.env.local` for local development and environment variables provided by the deployment platform (e.g., Vercel, Netlify) for production. Key variables might include API endpoints for the (hypothetical) backend analysis service.
- **Performance Optimizations**: Next.js's SSR and automatic code splitting will handle much of this. Optimize image loading if any are used. Ensure efficient data fetching and state management. Minimize re-renders in React components.
- **Static Assets**: Place static assets (images, fonts) in the `public` directory.
- **API Routes**: Leverage Next.js API routes (`pages/api/`) for any server-side logic if not relying entirely on an external backend service. For this MVP prompt, API routes can act as mock endpoints.
- **Deployment Platform**: Recommend Vercel or Netlify for seamless Next.js deployments.