You are an expert AI assistant tasked with generating the complete code for a single-page web application (SPA) that addresses the user problem highlighted by the Hacker News post about Montana's 'Right to Compute Act'. The application, titled 'Compute Hakları Koruyucu' (Compute Rights Guardian), aims to help individuals and businesses in Montana understand, manage, and protect their digital computing rights as defined by the new legislation.
### 1. PROJECT OVERVIEW
**Application Name:** Compute Hakları Koruyucu (Compute Rights Guardian)
**Problem Solved:** The 'Right to Compute Act' in Montana grants individuals and businesses new rights regarding their digital assets and computing power. However, understanding, verifying, and enforcing these rights can be complex. This application provides a user-friendly platform for Montanans to track their digital assets, understand their rights, monitor potential violations, and access resources related to the Act. It empowers users to take proactive steps in safeguarding their digital sovereignty.
**Value Proposition:** Your digital rights, simplified and protected. The Compute Rights Guardian is the essential tool for every Montanan to navigate and secure their computing rights in the digital age.
### 2. TECH STACK
- **Frontend Framework:** React.js (v18+)
- **Language:** JavaScript (with JSX)
- **Styling:** Tailwind CSS (v3+) for rapid UI development and consistent design.
- **State Management:** Zustand for efficient and scalable global state management.
- **Routing:** React Router DOM for handling navigation within the SPA.
- **Form Handling:** React Hook Form with Zod for validation.
- **UI Components:** Radix UI for accessible and unstyled UI primitives (e.g., Dialog, DropdownMenu, ToggleGroup) to be styled with Tailwind CSS.
- **Icons:** Heroicons for a clean and consistent icon set.
- **Utilities:** Lodash for utility functions, date-fns for date manipulation.
- **Build Tool:** Vite for fast development server and optimized builds.
- **Deployment:** Vercel or Netlify compatibility.
### 3. CORE FEATURES
**A. User Authentication & Authorization (MVP Focus):**
- **Flow:** Users sign up/log in using email/password. Upon successful login, the system verifies their residency/eligibility (initially simulated, could involve future checks like self-attestation or ZIP code validation). Only eligible users (Montana residents) can access full features.
- **Details:** Implement secure password hashing (e.g., bcrypt.js on the backend, though for this frontend-only MVP, we'll simulate logged-in state).
**B. Digital Asset Inventory:**
- **Flow:** Logged-in users can manually add their digital assets. Each asset entry requires a name, type (e.g., Cloud Storage, Virtual Server, Crypto Wallet, IoT Device), provider (e.g., AWS, Google Cloud, specific crypto exchange), and optionally, relevant account identifiers (masked).
- **Details:** Provide a clear form with input fields and a dropdown for asset types. Use Zod for client-side validation.
**C. Rights Management & Status:**
- **Flow:** Once assets are inventoried, the system displays the 'Right to Compute' status for each. Initially, this will be a general indicator (e.g., 'Protected', 'Needs Review') based on asset type and general understanding of the law. Users can mark assets for 'Review' if they suspect an issue.
- **Details:** Use simple visual cues (color-coded tags or icons) to represent the status. This feature will be illustrative in the MVP, demonstrating the concept.
**D. Violation Alert System (Simulated):**
- **Flow:** Users can manually trigger a 'Check for Violations' action for selected assets. The system will present a simulated result (e.g., 'No known violations detected' or 'Potential violation detected - Recommend Review').
- **Details:** This will be a mock feature in the MVP, showing how a real-time monitoring system might work. It will involve a button click and displaying a randomized or predefined message.
**E. Resource Center:**
- **Flow:** A dedicated section providing concise explanations of the 'Right to Compute Act', links to official government resources, FAQs, and contact information for legal aid or relevant authorities.
- **Details:** Static content displayed in an organized manner (accordions, lists, links).
### 4. UI/UX DESIGN
- **Layout:** Single Page Application (SPA) with a clear header, main content area, and potentially a simple footer. Navigation will likely be handled via routing within the main content area or a sidebar/tabbed interface for different sections (Dashboard, Assets, Resources).
- **Header:** Application title, user login/logout button, potentially a status indicator.
- **Dashboard:** Overview of total assets, number of protected assets, recent alerts (simulated).
- **Assets Page:** List of inventoried assets with their status. A button to add new assets. Each asset in the list should be clickable to view/edit details.
- **Add/Edit Asset Form:** Modal or dedicated section with form fields (Name, Type, Provider, etc.) and a save button.
- **Resources Page:** Organized content with headings, paragraphs, lists, and links.
- **Color Palette:** Primary: A calming blue (e.g., `#3b82f6` - Tailwind's `blue-500`). Secondary: A neutral gray (e.g., `#6b7280` - Tailwind's `gray-500`). Accent: A subtle green for success/protected states (e.g., `#10b981` - Tailwind's `green-500`) and a warm orange/red for alerts (e.g., `#f97316` - Tailwind's `orange-500`). Background: White or very light gray (`#f3f4f6`). Text: Dark gray (`#1f2937` - Tailwind's `gray-800`).
- **Typography:** Use a clean, readable sans-serif font like Inter or Roboto. Utilize Tailwind's typography defaults or configure custom sizes and weights.
- **Responsive Design:** Mobile-first approach. Ensure usability on screens from 320px to large desktops. Use Tailwind's responsive modifiers (e.g., `md:`, `lg:`) extensively. Navigation might collapse into a burger menu on smaller screens.
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for modal pop-ups and content reveals. Clear loading indicators (spinners) when data is being fetched or processed (simulated).
### 5. DATA MODEL
- **State Management (Zustand Store):**
```javascript
// Example Zustand store structure
interface Asset {
id: string;
name: string;
type: 'Cloud Storage' | 'Virtual Server' | 'Crypto Wallet' | 'IoT Device' | 'Other';
provider: string;
accountIdentifier?: string; // Masked or partial identifier
status: 'Protected' | 'Needs Review' | 'Unknown';
lastChecked?: string; // ISO date string
}
interface UserState {
isLoggedIn: boolean;
isEligible: boolean; // Montana Resident
userProfile?: { email: string };
}
interface AppState {
assets: Asset[];
isLoading: boolean;
error: string | null;
}
// Combined store
useStore(set => ({
user: { isLoggedIn: false, isEligible: false },
assets: [],
isLoading: false,
error: null,
login: (email) => set(state => ({ user: { isLoggedIn: true, isEligible: true, userProfile: { email } } })),
logout: () => set(state => ({ user: { isLoggedIn: false, isEligible: false } })),
addAsset: (assetData) => set(state => ({ assets: [...state.assets, { ...assetData, id: Date.now().toString(), status: 'Unknown' }] })),
updateAssetStatus: (assetId, newStatus) => set(state => ({
assets: state.assets.map(asset => asset.id === assetId ? { ...asset, status: newStatus } : asset)
})),
// ... other actions like deleteAsset, setisLoading, setError
}))
```
- **Local Storage:** Store user login status (simulated) and potentially the asset list to persist data between sessions for a better MVP experience without a backend.
- **Mock Data:** Asset data will be generated or manually entered by the user.
### 6. COMPONENT BREAKDOWN
- **`App.jsx`:** Main application component. Sets up routing, global layout, and state provider.
- Props: None
- Responsibilities: Initialize app, manage overall layout.
- **`Header.jsx`:** Contains the application title and user authentication controls.
- Props: `onLogin`, `onLogout`, `isLoggedIn`, `isEligible`
- Responsibilities: Display title, manage login/logout UI.
- **`Dashboard.jsx`:** Displays a summary of user's digital assets and rights status.
- Props: `assets` (Array of Asset objects)
- Responsibilities: Aggregate and display key metrics (total assets, protected count), show recent alerts.
- **`AssetList.jsx`:** Renders a list of inventoried digital assets.
- Props: `assets` (Array of Asset objects), `onAssetClick` (Function)
- Responsibilities: Iterate through assets and render `AssetListItem` for each.
- **`AssetListItem.jsx`:** Represents a single asset in the list.
- Props: `asset` (Asset object)
- Responsibilities: Display asset name, type, provider, and status. Handle click events.
- **`AddAssetForm.jsx`:** Form for adding new digital assets. Could be a modal or a separate view.
- Props: `onSubmit` (Function), `initialData` (Object, for editing)
- Responsibilities: Capture asset details, perform validation, call submit handler.
- **`ResourceCenter.jsx`:** Displays static content about the 'Right to Compute Act'.
- Props: None
- Responsibilities: Render informational content.
- **`StatusIndicator.jsx`:** A reusable component to display status visually.
- Props: `status` ('Protected' | 'Needs Review' | 'Unknown')
- Responsibilities: Render appropriate icon and color based on status.
- **`ViolationAlert.jsx`:** Component to display simulated violation alerts.
- Props: `message` (string), `isVisible` (boolean)
- Responsibilities: Show/hide alert messages.
- **`ActionButton.jsx`:** Reusable button component, potentially with loading state.
- Props: `onClick` (Function), `children` (ReactNode), `isLoading` (boolean), `variant` ('primary' | 'secondary')
- Responsibilities: Render button with appropriate styling and loading indicator.
- **`ProtectedRoute.jsx`:** Wrapper component to ensure only eligible users can access certain routes/views.
- Props: `children` (ReactNode), `isEligible` (boolean)
- Responsibilities: Redirect or deny access if user is not eligible.
### 7. ANIMATIONS & INTERACTIONS
- **Page Transitions:** Use `Framer Motion` or CSS transitions for smooth loading/unloading of different sections/views within the SPA.
- **Button Hovers:** Subtle background color change or slight scale-up effect on buttons.
- **Form Focus:** Outline effect on input fields when focused.
- **Modals:** Fade-in and slide-up/down effect for the `AddAssetForm` modal.
- **Loading States:** Use a dedicated `LoadingSpinner` component (from `react-spinners` or custom SVG) displayed centrally or next to the action button when operations like adding/saving assets or checking violations are simulated.
- **Status Updates:** A brief visual confirmation (e.g., a small checkmark animation or color flash) when an asset's status is updated.
### 8. EDGE CASES
- **Authentication:** Handling incorrect login credentials (simulated), logout functionality.
- **Eligibility:** Ensuring non-eligible users are blocked from core features (redirect to a message or login page).
- **Empty States:** Displaying user-friendly messages when the asset list is empty (e.g., 'You haven't added any digital assets yet. Click the button below to start.'). Also, for the dashboard summary if no assets exist.
- **Form Validation:** Real-time feedback on invalid form inputs using Zod and React Hook Form. Display clear error messages next to the relevant fields.
- **Error Handling:** Generic error messages displayed to the user for unexpected issues (e.g., 'An unexpected error occurred. Please try again later.'). Use `try...catch` blocks in simulated async operations.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where needed. Test keyboard navigation. Ensure sufficient color contrast. Use accessible components from Radix UI.
- **Data Persistence:** If using Local Storage, handle potential storage quota exceeded errors (unlikely for this app scope but good practice).
### 9. SAMPLE DATA
```json
// Mock User Data (in Zustand store)
{
isLoggedIn: true,
isEligible: true,
userProfile: { email: 'montana.resident@email.com' }
}
// Mock Asset Data (Array in Zustand store)
[
{
"id": "asset-001",
"name": "Personal Cloud Storage",
"type": "Cloud Storage",
"provider": "MegaCloud",
"accountIdentifier": "mega***oud.com",
"status": "Protected",
"lastChecked": "2024-05-15T10:30:00Z"
},
{
"id": "asset-002",
"name": "ETH Wallet - Main",
"type": "Crypto Wallet",
"provider": "MetaMask",
"accountIdentifier": "0x123...abc",
"status": "Needs Review",
"lastChecked": "2024-05-14T09:15:00Z"
},
{
"id": "asset-003",
"name": "Dev Server - Staging",
"type": "Virtual Server",
"provider": "AWS",
"accountIdentifier": "us-east-1a",
"status": "Unknown",
"lastChecked": null
},
{
"id": "asset-004",
"name": "Home IoT Hub",
"type": "IoT Device",
"provider": "SmartHome Inc.",
"accountIdentifier": "hub-serial-xyz",
"status": "Protected",
"lastChecked": "2024-05-15T11:00:00Z"
}
]
// Resource Center Content Structure (Conceptual)
{
title: "Understanding Montana's Right to Compute Act",
sections: [
{
heading: "What is the Right to Compute?",
content: "The Act ensures that individuals and businesses have the right to access, use, and control their digital assets and computing power..."
},
{
heading: "Key Provisions",
list: ["Protection against unauthorized access...", "Right to data portability...", "Control over computational resources..."]
},
{
heading: "Official Resources",
links: [
{ text: "Montana Legislature - Official Act Text", url: "#" },
{ text: "Consumer Protection Office", url: "#" }
]
}
]
}
```
### 10. DEPLOYMENT NOTES
- **Build Command:** `npm run build` (or `yarn build`)
- **Output Directory:** `dist` (or configured by Vite)
- **Environment Variables:** Use `.env` files for configuration. For MVP, no sensitive variables are needed, but structure it for future API keys (e.g., `VITE_API_BASE_URL`).
- **Routing:** Since it's an SPA, configure the hosting provider (Vercel, Netlify) for fallback routing to `index.html` to handle client-side routing correctly on page reloads or direct access to deep links.
- **Performance:** Leverage Vite's optimizations. Code-split components if the app grows. Optimize images (though not applicable for this MVP). Ensure efficient state management to prevent unnecessary re-renders.
- **HTTPS:** Always deploy using HTTPS. Vercel and Netlify handle this automatically.
- **CORS:** If a backend is introduced later, ensure proper CORS configuration on the backend to allow requests from the frontend domain.
- **Testing:** While not explicitly requested for the AI prompt, advise the user to set up unit and integration tests using Vitest/React Testing Library for maintainability.
This comprehensive prompt provides the AI with all the necessary details to generate a functional, well-structured, and visually appealing MVP of the 'Compute Hakları Koruyucu' application using the specified tech stack.