You are an expert AI software architect and full-stack developer tasked with creating a single-page application (SPA) for 'Malus: Güvenli Kod İzolasyon Hizmeti'. This application will serve as a secure 'clean room' environment for isolating and analyzing open-source code dependencies to enhance software supply chain security. The application should be built using React, Tailwind CSS, and leverage local storage for state management and mock data, simulating a backend service.
**1. PROJECT OVERVIEW**
Malus provides a secure, isolated environment ('clean room') for developers and organizations to upload, analyze, and vet open-source code dependencies. The primary problem addressed is the increasing risk of compromised open-source software (OSS) being introduced into development pipelines, leading to potential security vulnerabilities, data breaches, and intellectual property theft. Malus's value proposition is to offer a transparent, auditable, and secure way to mitigate these risks by allowing code to be inspected in an isolated, sandboxed environment without exposing the user's own systems or allowing the analyzed code to interact with external networks.
**2. TECH STACK**
- **Frontend Framework:** React (using functional components and Hooks)
- **Styling:** Tailwind CSS for utility-first CSS styling
- **State Management:** React Context API and `useState`/`useReducer` hooks. Local Storage will be used to persist state for demonstration purposes, simulating a backend.
- **Routing:** React Router DOM for client-side navigation between views.
- **Build Tool:** Vite (or Create React App as a fallback)
- **Form Handling:** React Hook Form (optional, can use basic forms for MVP)
- **Icons:** React Icons library
**3. CORE FEATURES**
* **Project Dashboard:**
* **User Flow:** Upon login/access, the user sees a dashboard listing all their created projects. Each project card displays its name, status (e.g., 'Analyzing', 'Clean', 'Quarantined', 'Error'), last analysis date, and quick action buttons (e.g., 'View Details', 'Re-analyze'). A prominent button allows creating a new project.
* **Details:** Displays a summary of projects, enabling navigation to individual project detail views.
* **New Project Creation:**
* **User Flow:** Clicking 'Create New Project' opens a modal or form. The user inputs a project name, optionally a description, and provides a source URL (e.g., GitHub repository link). The system validates the URL format. Upon submission, a new project entry is created with an 'Initializing' status.
* **Details:** Form fields for project name, description, and source URL. Basic validation on input fields.
* **Code Upload & Analysis:**
* **User Flow:** Within a project's detail view, the user can initiate a code upload (simulated via file input or direct URL parsing for MVP). Once uploaded, the status changes to 'Analyzing'. The application simulates a code analysis process, scanning for vulnerabilities, malicious patterns, and suspicious code structures. This is represented by a progress indicator or status updates.
* **Details:** A mechanism to simulate file upload or URL input. A progress bar or status text indicating the analysis phase. The analysis itself will be simulated in the frontend logic.
* **Analysis Results & Quarantine:**
* **User Flow:** After analysis, the project status updates (e.g., 'Clean', 'Quarantined'). The results view displays a summary of findings. If critical issues are detected, specific code sections are highlighted, and the user is prompted to quarantine them. Quarantined code is visually flagged and marked as unusable.
* **Details:** A detailed view showing identified vulnerabilities, potential risks, and highlighted suspicious code snippets. A button to trigger the 'Quarantine' action for flagged items. Visual distinction for quarantined code.
* **Security Reporting:**
* **User Flow:** A dedicated 'Reports' section or a detailed report view within each project. Users can view a summary report of the last analysis, including metrics like 'Vulnerable Components Found', 'Suspicious Code Detected', 'Overall Risk Score', and 'Clean Code Percentage'. An option to download the report (e.g., as JSON or TXT) is provided.
* **Details:** Display of key security metrics and findings. Download functionality for the report.
**4. UI/UX DESIGN**
- **Layout:** A clean, modern, and intuitive single-page layout. A persistent sidebar navigation (collapsible) for Dashboard, Projects, Settings (optional). The main content area displays the selected view.
- **Color Palette:** Primary: Dark grey/black (#1a1a1a) for background, White/light grey (#f0f0f0) for text. Accent colors: A vibrant blue (#007bff) for primary actions and active states, Orange (#ffc107) for warnings/analysis, Red (#dc3545) for errors/quarantine. Green (#28a745) for 'Clean' status.
- **Typography:** Use a clean, readable sans-serif font like Inter or Roboto. Clear hierarchy using font weights and sizes.
- **Component Styling:** Consistent padding, margins, and border-radius. Use subtle shadows for depth on cards and modals.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Ensure readability and usability across devices (desktop, tablet, mobile).
- **Interactions:** Smooth transitions for modals, collapses, and route changes. Clear hover states for interactive elements.
**5. DATA MODEL (Simulated using Local Storage & Mock Data)**
- **Project Object:**
```json
{
"id": "uuid-string",
"name": "string",
"sourceUrl": "string",
"status": "Initializing" | "Analyzing" | "Clean" | "Quarantined" | "Error",
"lastAnalyzed": "timestamp | null",
"findings": [
{
"type": "Vulnerability" | "Malicious Pattern" | "Suspicious Code",
"description": "string",
"filePath": "string",
"lineNumber": "number",
"severity": "High" | "Medium" | "Low",
"isQuarantined": "boolean"
}
],
"createdAt": "timestamp"
}
```
- **State Structure:** The primary state will be an array of `Project` objects. This array will be stored and retrieved from Local Storage.
```javascript
// Example in App.js or a dedicated context
const [projects, setProjects] = useState(() => {
const savedProjects = localStorage.getItem('malusProjects');
return savedProjects ? JSON.parse(savedProjects) : [];
});
// Effect to save projects to Local Storage whenever they change
useEffect(() => {
localStorage.setItem('malusProjects', JSON.stringify(projects));
}, [projects]);
```
**6. COMPONENT BREAKDOWN**
* **`App.js`:** Main application component, sets up routing and global layout.
* Props: None
* Responsibilities: Routing setup, rendering main layout, managing global state via Context if needed.
* **`Layout.js`:** Contains the main structure (sidebar, header, content area).
* Props: `children` (content to render)
* Responsibilities: Overall page structure, sidebar, header.
* **`Sidebar.js`:** Navigation menu.
* Props: `isOpen` (boolean), `onClose` (function)
* Responsibilities: Display navigation links, handle sidebar toggle.
* **`DashboardPage.js`:** Displays the project overview.
* Props: `projects` (array)
* Responsibilities: Renders list of ProjectCards, 'Create New Project' button.
* **`ProjectCard.js`:** Displays summary of a single project.
* Props: `project` (object)
* Responsibilities: Shows project name, status, date; links to ProjectDetailPage.
* **`NewProjectModal.js`:** Form for creating a new project.
* Props: `isOpen` (boolean), `onClose` (function), `onCreateProject` (function)
* Responsibilities: Collects project details, handles form submission.
* **`ProjectDetailPage.js`:** Shows details and analysis results for a specific project.
* Props: `projectId` (string - from route params)
* Responsibilities: Fetches project data (simulated), displays analysis results, actions like 'Re-analyze'.
* **`AnalysisResults.js`:** Component to display findings.
* Props: `findings` (array), `projectId` (string)
* Responsibilities: Renders list of findings, highlights suspicious code, provides 'Quarantine' buttons.
* **`FindingItem.js`:** Renders a single finding.
* Props: `finding` (object), `onQuarantine` (function)
* Responsibilities: Displays finding details, quarantine action.
* **`ReportView.js`:** Displays the security report summary.
* Props: `project` (object)
* Responsibilities: Shows key metrics, download button.
* **`LoadingSpinner.js`:** Generic loading indicator.
* Props: None
* Responsibilities: Visual feedback during loading states.
* **`StatusBadge.js`:** Displays status with appropriate color.
* Props: `status` (string)
* Responsibilities: Visual representation of project status.
**7. ANIMATIONS & INTERACTIONS**
- **Page Transitions:** Use `CSSTransition` or `Framer Motion` for subtle fade/slide transitions between pages.
- **Modal Animations:** Modals should fade in/out with a slight scale effect.
- **Hover Effects:** Buttons and interactive elements should have clear hover states (slight color change, subtle shadow increase).
- **Loading States:** Use `LoadingSpinner.js` component with skeleton loaders for content areas that are being 'fetched' (simulated).
- **Micro-interactions:** Subtle animations on status changes, quarantine actions (e.g., a quick shake or color flash).
- **Sidebar Collapse:** Smooth sliding animation for the sidebar.
**8. EDGE CASES**
- **No Projects:** The Dashboard should display a friendly message and a clear call-to-action when no projects exist.
- **Error Handling:** Implement error states for "Analyze" failures (simulated). Display user-friendly error messages. For forms, show validation errors next to fields.
- **Empty Findings:** If an analysis yields no findings, display a clear "No issues found" message.
- **Quarantine Logic:** Ensure quarantined items are clearly marked and cannot be easily reverted without a deliberate action (or require re-analysis).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Add ARIA attributes where necessary (e.g., for modals, custom controls). Ensure keyboard navigability for all interactive elements.
- **Input Validation:** Basic client-side validation for project name (required, min length) and URL format.
**9. SAMPLE DATA**
```json
[
{
"id": "f47ac10b-58cc-4372-a567-0e02b2c3d479",
"name": "SecureAuth Library",
"sourceUrl": "https://github.com/example/secureauth",
"status": "Clean",
"lastAnalyzed": "2023-10-26T10:00:00Z",
"findings": [],
"createdAt": "2023-10-25T09:00:00Z"
},
{
"id": "b8a3b1e0-9b9b-4b0b-8b0b-0b0b0b0b0b0b",
"name": "DataEncryption Module",
"sourceUrl": "https://github.com/example/dataencrypt",
"status": "Quarantined",
"lastAnalyzed": "2023-10-26T11:30:00Z",
"findings": [
{
"type": "Vulnerability",
"description": "Potential buffer overflow vulnerability in encryption routine.",
"filePath": "src/crypto.js",
"lineNumber": 152,
"severity": "High",
"isQuarantined": true
}
],
"createdAt": "2023-10-25T14:00:00Z"
},
{
"id": "c1d2e3f4-a5b6-c7d8-e9f0-a1b2c3d4e5f6",
"name": "Utility Toolkit",
"sourceUrl": "https://github.com/example/utilkit",
"status": "Analyzing",
"lastAnalyzed": null,
"findings": [],
"createdAt": "2023-10-26T15:00:00Z"
},
{
"id": "d2e3f4a5-b6c7-d8e9-f0a1-b2c3d4e5f6a7",
"name": "Network Listener",
"sourceUrl": "https://github.com/example/netlistener",
"status": "Error",
"lastAnalyzed": "2023-10-26T08:15:00Z",
"findings": [], // Error state might have specific error details instead of findings
"createdAt": "2023-10-25T10:30:00Z"
},
{
"id": "e3f4a5b6-c7d8-e9f0-a1b2-c3d4e5f6a7b8",
"name": "Logging Service",
"sourceUrl": "https://github.com/example/logservice",
"status": "Analyzing",
"lastAnalyzed": null,
"findings": [],
"createdAt": "2023-10-26T16:00:00Z"
}
]
```
**10. DEPLOYMENT NOTES**
- **Build Command:** Use the standard build command for your chosen tool (e.g., `npm run build` or `yarn build` for Vite/CRA).
- **Environment Variables:** For this simulation, no specific environment variables are strictly necessary beyond basic configuration if Vite/CRA is used. In a real-world scenario, API endpoints or authentication keys would be managed here.
- **Performance Optimizations:**
- Code Splitting: Vite/CRA handle this by default to some extent. Ensure routes are code-split.
- Memoization: Use `React.memo` for components that re-render unnecessarily.
- Lazy Loading: Implement lazy loading for components, especially modals and less frequently used sections, using `React.lazy` and `Suspense`.
- Image Optimization: If images were used, optimize them for web use.
- **Local Storage Persistence:** The app relies on Local Storage. Inform the user that data might be lost if they clear their browser data. For a production build, this would be replaced with API calls to a persistent backend database.
- **Static Hosting:** The resulting build can be deployed to any static hosting provider (Netlify, Vercel, GitHub Pages, AWS S3).
- **Simulated Backend:** Remind the user that all data is stored locally and persists only in their browser. API calls and complex logic are simulated.