You are an expert AI assistant specialized in full-stack development, with a deep understanding of modern web technologies and application architecture. Your task is to generate a complete, single-page application (SPA) for a web service that simplifies the integration of Nvidia external GPUs (eGPUs) with Apple's ARM-based Macs (M1, M2, M3 series).
**PROJECT OVERVIEW:**
The application aims to solve the problem faced by Apple Mac users who want to leverage the power of Nvidia eGPUs for demanding tasks like AI/ML model training (especially LLMs), video editing, 3D rendering, and gaming. Historically, integrating third-party hardware like Nvidia eGPUs with macOS, especially on ARM architecture, has been challenging due to driver compatibility issues, Apple's System Integrity Protection (SIP), and the lack of direct support. This project provides a user-friendly SaaS platform that streamlines the installation and management of necessary drivers, ensuring compatibility and optimizing performance. The core value proposition is to unlock the potential of Nvidia eGPUs for Mac users, making powerful external graphics accessible and manageable without deep technical expertise.
**TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development)
- **Styling:** Tailwind CSS for rapid UI development and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for client-side navigation.
- **UI Components:** Radix UI for accessible and unstyled UI primitives (Buttons, Dialogs, Tooltips, etc.).
- **Icons:** Lucide React for a complete set of beautiful, open-source icons.
- **HTTP Client:** Axios for making API requests (if a backend were to be added later, though for MVP focus is on frontend logic).
- **Utility Libraries:** Lodash for general utility functions.
**CORE FEATURES:**
1. **Mac Compatibility Checker:**
* **User Flow:** Upon visiting the site, the user is prompted to enter their Mac model (e.g., MacBook Pro M2, Mac Studio M1 Max) or it can be detected via browser APIs (if feasible and ethical, though manual input is safer for MVP). The system then checks against a predefined database of known compatible/incompatible Mac models and chipsets for Nvidia eGPU support.
* **Functionality:** Displays a clear "Compatible", "Potentially Compatible (with caveats)", or "Incompatible" status with explanations.
2. **eGPU Setup Wizard:**
* **User Flow:** If compatible, the user proceeds to the setup wizard. This wizard guides them through the necessary steps, which might involve:
* Checking for necessary hardware connections (e.g., Thunderbolt 3/4 enclosure).
* Downloading a pre-compiled driver package or instructions on using Docker to build/install a "signed" driver (as per the Hacker News article context).
* Step-by-step instructions on disabling/managing SIP safely (if absolutely required, with strong warnings).
* Verifying the eGPU connection and driver installation.
* **Functionality:** A multi-step form or a guided tour interface that breaks down a complex process into simple, actionable steps. Each step includes clear instructions, relevant links, and visual aids (placeholders for images/videos).
3. **Performance Monitoring Dashboard (Basic):**
* **User Flow:** After setup, users can access a dashboard to see basic information about their eGPU.
* **Functionality:** Displays GPU utilization (%), VRAM usage (%), temperature (placeholder values for MVP, as real-time access is complex without native integration), and potentially the application using the eGPU (if detectable via hypothetical future backend integration or browser APIs).
4. **Resource Hub & Troubleshooting:**
* **User Flow:** A dedicated section with FAQs, common issues, links to relevant articles (like the source Hacker News post), and community forums (placeholder).
* **Functionality:** Provides self-service support and information to users facing problems.
**UI/UX DESIGN:**
- **Layout:** Single-page application structure. A clean, modern, and intuitive interface. A main content area with a persistent sidebar or top navigation for accessing different features (Checker, Wizard, Dashboard, Resources).
- **Color Palette:** Primarily dark theme (e.g., deep blues, grays, blacks) to appeal to a developer audience and evoke a sense of power and sophistication. Accent colors (e.g., electric blue, vibrant green) for calls to action, status indicators, and highlights. Use Tailwind's JIT mode for efficient styling.
- **Typography:** Modern, readable sans-serif fonts like Inter or Poppins for headings and body text. Ensure good hierarchy and readability.
- **Responsive Design:** Mobile-first approach. The layout should adapt seamlessly to various screen sizes (desktops, tablets, mobiles). Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) extensively. Ensure interactive elements are large enough for touch targets on mobile.
- **Visuals:** Minimalist icons, clean card-based layouts for information display. Use placeholders for diagrams or screenshots within the wizard.
**COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing using `React Router DOM`.
- **`Layout.jsx`:** Wrapper component for overall page structure, including header, footer, and sidebar/navigation.
- **`HomePage.jsx`:** Landing page featuring a brief intro and a call to action to start the compatibility check.
- **`CompatibilityChecker.jsx`:** Component for the compatibility check feature.
* `MacModelInput.jsx`: Input field for Mac model.
* `CompatibilityStatus.jsx`: Displays the compatibility result.
- **`SetupWizard.jsx`:** Main component orchestrating the multi-step wizard.
* `WizardStep.jsx`: Represents a single step in the wizard, handling content and navigation.
* `Step1_HardwareCheck.jsx`: Content for the hardware check step.
* `Step2_DriverDownload.jsx`: Content for driver download/build instructions.
* `Step3_SIPManagement.jsx`: Content for SIP management guidance.
* `Step4_Verification.jsx`: Content for installation verification.
* `WizardNavigation.jsx`: Buttons for Next/Previous/Finish.
- **`Dashboard.jsx`:** Component for displaying basic performance metrics.
* `GPUMetricCard.jsx`: Reusable card for displaying a single metric (e.g., Utilization, VRAM).
* `RealtimeChart.jsx`: Placeholder for future real-time chart integration.
- **`ResourceHub.jsx`:** Component for FAQs, guides, and troubleshooting.
* `FAQItem.jsx`: Collapsible item for displaying Q&A.
- **`Button.jsx`:** Custom reusable button component using Radix UI.
- **`Modal.jsx`:** Custom reusable modal component using Radix UI.
- **`Tooltip.jsx`:** Custom reusable tooltip component using Radix UI.
**DATA MODEL:**
- **`compatibilityData`:** (Local State/Mock Data)
```javascript
{
"MacBookProM1": {
"status": "compatible",
"message": "Your MacBook Pro with M1 chip is generally compatible. Follow the setup wizard."
},
"MacBookProM2Max": {
"status": "compatible",
"message": "Your MacBook Pro with M2 Max is highly compatible. Advanced features may be supported."
},
"MacBookAirM1": {
"status": "potentially_compatible",
"message": "MacBook Air M1 can work, but performance may be limited by thermal throttling. Ensure good ventilation."
},
"iMacM1": {
"status": "incompatible",
"message": "iMac models with M1 chips do not support eGPU configurations."
}
// ... more models
}
```
- **`wizardSteps`:** (Local State)
```javascript
[
{ id: 1, title: "Check Hardware", component: Step1_HardwareCheck },
{ id: 2, title: "Install Drivers", component: Step2_DriverDownload },
{ id: 3, title: "Manage SIP", component: Step3_SIPManagement },
{ id: 4, title: "Verify Installation", component: Step4_Verification }
]
```
- **`performanceData`:** (Local State/Mock Data)
```javascript
{
"gpuUtilization": 75,
"vramUsage": 12,
"temperature": 68
}
```
- **State Management (Zustand):** Store global state like current wizard step, compatibility results, user settings, and mock performance data.
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions between different sections of the SPA using `Framer Motion` or CSS transitions.
- **Button Hovers:** Slight scale-up or background color change on button hovers.
- **Loading States:** Display spinners or skeleton loaders (e.g., using Tailwind CSS animations) while checking compatibility or simulating data fetching.
- **Wizard Step Transitions:** Smooth slide-in/slide-out animations for steps in the wizard.
- **Interactive Elements:** Subtle animations on form inputs, toggles, and checkboxes.
**EDGE CASES:**
- **Empty States:** Display informative messages and clear calls to action when lists are empty (e.g., no compatibility data found, no resources available).
- **Error Handling:** Gracefully handle potential errors during API calls (if any backend is introduced) or data processing. Display user-friendly error messages. For MVP, focus on informing the user if their input is invalid or if a check fails.
- **Validation:** Implement client-side validation for user inputs (e.g., Mac model input). Ensure required fields are filled.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes, keyboard navigation support for all interactive elements (buttons, links, form inputs), sufficient color contrast, and focus management, especially using Radix UI primitives which are built with accessibility in mind.
- **Unsupported Configurations:** Clearly communicate when a configuration is known to be problematic or unsupported.
**SAMPLE DATA:**
1. **Mac Model Input:** "MacBook Pro (16-inch, M1 Pro, 2021)"
2. **Compatibility Result (Compatible):**
```json
{
"model": "MacBook Pro (14-inch, M3 Max, 2023)",
"status": "compatible",
"message": "Your M3 Max MacBook Pro is fully compatible with most Nvidia eGPUs via Thunderbolt 4. Proceed to the setup wizard.",
"supportedEnclosures": ["Thunderbolt 3", "Thunderbolt 4"]
}
```
3. **Compatibility Result (Incompatible):**
```json
{
"model": "Mac mini (M1, 2020)",
"status": "incompatible",
"message": "Mac mini models with Apple Silicon do not officially support eGPU configurations."
}
```
4. **Wizard Step Data Example:**
```json
{
"step": 2,
"title": "Install Nvidia Drivers",
"description": "Download the latest driver package optimized for ARM Macs. This package includes necessary components to interface with macOS.",
"instructions": [
"1. Click the button below to download the driver zip file.",
"2. Ensure your eGPU enclosure is connected and powered on.",
"3. Follow the included README instructions for installation. This may involve using Docker."
],
"downloadUrl": "/drivers/nvidia-arm-mac-v1.2.zip",
"ctaText": "Download Drivers"
}
```
5. **Performance Data Example:**
```json
{
"timestamp": "2024-03-15T10:30:00Z",
"gpuUtilization": 85,
"vramUsage": 10.5,
"temperature": 72,
"powerDraw": 250
}
```
6. **FAQ Item Example:**
```json
{
"question": "Do I need to disable SIP?",
"answer": "For some driver versions, disabling SIP might be necessary. Our wizard provides the safest method to manage SIP, but always proceed with caution. Refer to Step 3 for detailed guidance."
}
```
7. **Error Message Example:**
```json
{
"type": "validation_error",
"message": "Please enter a valid Mac model name."
}
```
8. **Mock eGPU Enclosure Data:**
```json
{
"id": "egpu-enclosure-001",
"brand": "Razer",
"model": "Core X",
"connectionType": "Thunderbolt 3",
"compatible": true
}
```
**DEPLOYMENT NOTES:**
- **Build Tool:** Vite is recommended for its speed and ease of configuration (`vite build`).
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., API endpoints if a backend is added later). For MVP, configuration might be minimal.
- **Performance Optimizations:** Code splitting (handled well by Vite/React Router), lazy loading components, image optimization (use appropriate formats and sizes), and efficient state management are crucial.
- **Hosting:** Deployable on static hosting platforms like Vercel, Netlify, or GitHub Pages.
- **CI/CD:** Set up a CI/CD pipeline for automated testing and deployment.
- **HTTPS:** Ensure the application is served over HTTPS.