You are an expert AI developer tasked with creating a single-page React application (SPA) that serves as a Cloud VM Performance Analysis Tool. The application should allow users to compare virtual machine (VM) performance and pricing across major cloud providers like AWS, Google Cloud, and Azure. The goal is to help users identify the most cost-effective VMs for their specific needs.
**1. PROJECT OVERVIEW:**
The primary goal of this application is to empower users, particularly developers and DevOps engineers, to make informed decisions about cloud VM procurement. It addresses the complexity and opacity of comparing VM performance (CPU benchmarks) against their cost across different providers and regions. The core value proposition is to provide a clear, data-driven comparison, highlighting the best price-to-performance ratios, thereby saving users time and money.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **State Management:** Zustand (lightweight and efficient for global state)
- **Styling:** Tailwind CSS (for rapid UI development and responsive design)
- **Charting Library:** Chart.js or Recharts (for visualizing performance data and price comparisons)
- **Data Fetching:** Axios or Fetch API
- **Routing (if needed for potential future expansion, though aiming for SPA):** React Router (kept minimal for SPA)
- **Utility Libraries:** Lodash (for data manipulation), Moment.js/date-fns (for date handling if necessary)
**3. CORE FEATURES:**
* **Provider Selection:**
* **User Flow:** Upon loading the app, the user is presented with options to select one or more cloud providers (AWS, Google Cloud, Azure). Checkboxes or clickable cards can be used.
* **Details:** This allows users to narrow down their comparison to specific providers they are interested in.
* **VM Configuration & Filtering:**
* **User Flow:** After selecting providers, users can filter VMs based on criteria such as vCPUs, RAM, region, and potentially specific instance families (e.g., general purpose, compute optimized). Input fields, sliders, and dropdowns will be used.
* **Details:** This enables users to define the scope of VMs to be compared, focusing on relevant configurations. For MVP, we'll focus on vCPU count and Region.
* **Performance & Price Comparison Engine:**
* **User Flow:** Once filters are applied, the application fetches (or uses mock) data for the selected VMs and displays a comparative table or chart.
* **Details:** This is the core of the application. It will display key metrics: VM Name, Provider, vCPUs, RAM, Benchmark Score (e.g., CPU Mark equivalent or a simplified internal score), Price per Hour/Month, and Price/Performance Ratio (calculated as Benchmark Score / Price).
* **Calculation:** Price/Performance Ratio = (Normalized Benchmark Score) / (Price per Hour). We'll need a way to normalize benchmark scores if they come from different sources or have different scales.
* **Data Visualization:**
* **User Flow:** The comparison data will be presented visually using charts (e.g., bar charts for performance vs. price, scatter plots for price/performance ratio).
* **Details:** Charts will help users quickly grasp the trade-offs. Tooltips on charts will show detailed VM information.
* **Optimization Recommendations:**
* **User Flow:** Based on the comparison, the application will highlight the top 3-5 VMs offering the best price/performance ratio for the selected criteria.
* **Details:** A dedicated section or clear visual indicators (e.g., badges) will point out these optimized choices.
**4. UI/UX DESIGN:**
* **Layout:** Single-page application layout. A clean, modern interface. A header for the app title and main navigation/controls. A main content area displaying the selection filters, comparison table, and charts. A footer for additional information.
* **Color Palette:** Primarily use a professional, tech-oriented palette. Example: Dark background (e.g., `#1a202c`), primary accent color (e.g., a vibrant blue `#3b82f6` or green `#10b981`), secondary accent (e.g., a lighter shade or a contrasting color for alerts/recommendations like yellow `#facc15`), and neutral grays for text and borders (e.g., `#e2e8f0`, `#94a3b8`).
* **Typography:** Use a clean, readable sans-serif font like Inter or Roboto. Ensure good hierarchy with clear headings, subheadings, and body text.
* **Responsive Design:** Mobile-first approach. Use Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:) to ensure the layout adapts seamlessly to various screen sizes. Tables should be horizontally scrollable on small screens, or cards should be used.
* **Key Components:** Provider Selector, Filter Controls (dropdowns, sliders), Comparison Table, Chart Component, Recommendation Section.
**5. DATA MODEL (using Zustand for state management):**
* **`cloudStore.js` (Zustand Store):**
* `selectedProviders`: Array of strings (e.g., `['aws', 'gcp']`)
* `filters`: Object { vcpuMin: number, vcpuMax: number, ramMin: number, ramMax: number, region: string | null }
* `vmData`: Array of VM objects. Each VM object:
```json
{
"id": "string", // Unique ID for the VM instance
"provider": "string", // e.g., 'aws', 'gcp', 'azure'
"name": "string", // e.g., 't3.medium', 'e2-medium', 'Standard_B2s'
"region": "string", // e.g., 'us-east-1', 'europe-west1', 'eastus'
"cpuCores": number, // vCPUs
"ramGb": number, // RAM in GB
"benchmarkScore": number, // Normalized or raw benchmark score
"pricePerHour": number, // Price in USD per hour
"pricePerMonth": number, // Calculated price per month (e.g., pricePerHour * 730)
"pricePerformanceRatio": number // Calculated (benchmarkScore / pricePerHour)
}
```
* `isLoading`: boolean
* `error`: string | null
* `actions`: { `setSelectedProviders`, `setFilters`, `fetchVMData`, `setError`, `setLoading` }
* **Mock Data:** Generate mock data that reflects realistic (though simplified) values for different providers, regions, and instance types. Ensure variety in performance and pricing.
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main component, sets up layout, manages overall state flow, fetches initial data.
* Props: None
* Responsibilities: Root component, renders Header, MainContent, Footer. Manages global loading/error states.
* **`Header.jsx`:** Displays the application title and potentially global controls.
* Props: `title` (string)
* Responsibilities: Branding and top navigation.
* **`ProviderSelector.jsx`:** Component for selecting cloud providers.
* Props: `providers` (Array<string>), `selectedProviders` (Array<string>), `onSelect` (function)
* Responsibilities: Renders checkboxes/buttons for provider selection, calls `onSelect` callback.
* **`FilterControls.jsx`:** Contains UI elements for filtering VMs (vCPU, RAM, Region).
* Props: `filters` (object), `onFilterChange` (function)
* Responsibilities: Renders sliders, dropdowns, input fields for filters. Calls `onFilterChange` upon modification.
* **`ComparisonTable.jsx`:** Displays the filtered VM data in a tabular format.
* Props: `vms` (Array<VMObject>), `sortConfig` (object), `onSort` (function)
* Responsibilities: Renders table headers (with sorting) and rows, displaying VM details. Handles column sorting logic.
* **`ChartComponent.jsx`:** Renders charts based on VM data.
* Props: `vms` (Array<VMObject>), `chartType` (string, e.g., 'bar', 'scatter')
* Responsibilities: Integrates with Chart.js/Recharts to visualize performance vs. price, price/performance ratio etc.
* **`RecommendationSection.jsx`:** Highlights the best price/performance VMs.
* Props: `recommendations` (Array<VMObject>)
* Responsibilities: Displays a summarized list of top recommended VMs.
* **`Footer.jsx`:** Displays copyright or other footer information.
* Props: None
* Responsibilities: Static footer content.
**7. ANIMATIONS & INTERACTIONS:**
* **Loading States:** Use subtle spinners or skeleton loaders when fetching data or processing comparisons. Tailwind CSS animations can be used.
* **Hover Effects:** Add subtle hover effects to selectable items (providers, table rows) to indicate interactivity.
* **Transitions:** Smooth transitions for filter changes and data updates. For example, animating chart updates or table row appearances/disappearances.
* **Micro-interactions:** Visual feedback on button clicks, filter application confirmation.
**8. EDGE CASES:**
* **No Data:** Display a clear message when no VMs match the selected filters.
* **API Errors:** Gracefully handle and display errors if data fetching fails (e.g., "Could not load data from AWS. Please try again later.").
* **Invalid Filters:** Implement basic validation for filter inputs (e.g., ensuring min is less than max).
* **Empty State:** Initial state of the app before any selections are made should be user-friendly, guiding the user on how to start.
* **Accessibility (a11y):** Use semantic HTML, ensure proper ARIA attributes where needed, sufficient color contrast, and keyboard navigability.
**9. SAMPLE DATA:**
Assume a mock `vmData` array structure:
```json
[
{
"id": "aws-t3-medium",
"provider": "aws",
"name": "t3.medium",
"region": "us-east-1",
"cpuCores": 2,
"ramGb": 4,
"benchmarkScore": 1500,
"pricePerHour": 0.04,
"pricePerMonth": 29.2,
"pricePerformanceRatio": 37500
},
{
"id": "aws-m5-large",
"provider": "aws",
"name": "m5.large",
"region": "us-east-1",
"cpuCores": 2,
"ramGb": 8,
"benchmarkScore": 2200,
"pricePerHour": 0.096,
"pricePerMonth": 70.08,
"pricePerformanceRatio": 22916
},
{
"id": "gcp-e2-medium",
"provider": "gcp",
"name": "e2-medium",
"region": "us-central1",
"cpuCores": 2,
"ramGb": 4,
"benchmarkScore": 1600,
"pricePerHour": 0.045,
"pricePerMonth": 32.85,
"pricePerformanceRatio": 35555
},
{
"id": "gcp-n2-standard-2",
"provider": "gcp",
"name": "n2-standard-2",
"region": "us-central1",
"cpuCores": 2,
"ramGb": 8,
"benchmarkScore": 2500,
"pricePerHour": 0.11,
"pricePerMonth": 80.3,
"pricePerformanceRatio": 22727
},
{
"id": "azure-b2s",
"provider": "azure",
"name": "Standard_B2s",
"region": "eastus",
"cpuCores": 2,
"ramGb": 4,
"benchmarkScore": 1400,
"pricePerHour": 0.035,
"pricePerMonth": 25.55,
"pricePerformanceRatio": 40000
},
{
"id": "azure-d2s_v3",
"provider": "azure",
"name": "Standard_D2s_v3",
"region": "eastus",
"cpuCores": 2,
"ramGb": 8,
"benchmarkScore": 2100,
"pricePerHour": 0.10,
"pricePerMonth": 73.0,
"pricePerformanceRatio": 21000
}
]
```
Ensure the `benchmarkScore` and `pricePerHour` create realistic `pricePerformanceRatio` variations. The `pricePerMonth` should be calculated as `pricePerHour * 730` (approximate hours in a month).
**10. DEPLOYMENT NOTES:**
* **Build:** Use `npm run build` or `yarn build` for production build.
* **Environment Variables:** Configure environment variables (e.g., for API keys if external services are used later) via `.env` files. `REACT_APP_` prefix for Create React App or relevant prefix for other setups.
* **Performance Optimizations:** Code splitting with React.lazy and Suspense. Optimize image loading if any are used. Memoization with `useMemo` and `useCallback` where appropriate. Ensure efficient state updates.
* **Hosting:** Suitable for static hosting platforms like Vercel, Netlify, or AWS S3/CloudFront.