You are an expert AI assistant tasked with building a single-page application (SPA) for a platform focused on analyzing and sharing security aspects of RISC-V hardware, starting with the Baochip-1x. The application should be a comprehensive resource for developers and security researchers.
**PROJECT OVERVIEW:**
The core purpose of this platform is to analyze, synthesize, and disseminate security vulnerabilities and features related to RISC-V based microcontrollers. It aims to empower developers and security researchers by providing deep insights into hardware security, exemplified by the Baochip-1x's Memory Management Unit (MMU) and its implications for high-assurance software. The value proposition is to be the go-to resource for understanding and mitigating security risks in cutting-edge, open-source hardware.
**TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **State Management:** Zustand (for its simplicity and performance)
- **Styling:** Tailwind CSS (for rapid UI development and utility-first approach)
- **Routing:** React Router DOM (for SPA navigation)
- **HTTP Client:** Axios (for API requests)
- **UI Components:** Radix UI (for accessible and unstyled primitives) or a similar library for modals, tooltips, etc.
- **Form Handling:** React Hook Form (for efficient form validation)
- **Icons:** Heroicons or similar SVG icon library
**CORE FEATURES:**
1. **Hardware Security Analysis Dashboard:**
* **User Flow:** Upon loading the app, the user sees a dashboard summarizing recent security findings and featured hardware. A specific section will detail the Baochip-1x, highlighting its MMU, open RTL, and crowdfunding status.
* **Details:** This section will display key metrics, risk levels, and detailed explanations of security features and potential vulnerabilities. It should include visual aids like diagrams or tables.
* **Interaction:** Users can click on specific hardware components (like Baochip-1x's MMU) to navigate to detailed analysis pages.
2. **Vulnerability Database:**
* **User Flow:** Users can access a dedicated database page. They can use search and filter options (e.g., by CVE, hardware type, severity, affected component) to find specific vulnerabilities.
* **Details:** Each vulnerability entry should include a CVE ID, description, severity score (e.g., CVSS), affected hardware, mitigation strategies, and links to external resources.
* **Interaction:** Clicking a vulnerability opens a detailed view. Filtering dynamically updates the displayed list.
3. **Community Forum:**
* **User Flow:** Users can navigate to the forum to browse existing discussion threads, create new topics, reply to posts, and upvote/downvote comments.
* **Details:** Basic forum functionality: categorized threads, user posts, replies, timestamps, user identification (anonymous or simple username for MVP).
* **Interaction:** Users can click on thread titles to view discussions, use a form to create new threads or reply.
4. **Notifications System:**
* **User Flow:** A subtle notification icon/badge in the header indicates new updates. Clicking it reveals a dropdown list of recent analysis updates or new vulnerability alerts.
* **Details:** This feature will aggregate updates from the analysis dashboard and the vulnerability database.
* **Interaction:** Clicking a notification leads to the relevant page/section.
**UI/UX DESIGN:**
- **Layout:** Single-page application with a persistent header containing the app logo, navigation links (Dashboard, Vulnerability DB, Forum, About), and a notification icon. A main content area displays the current view. A simple footer with copyright and links.
- **Color Palette:** Dark theme primary (e.g., dark gray/charcoal background) with vibrant accent colors (e.g., electric blue, neon green, or orange) for CTAs, highlights, and security-related indicators. Ensure high contrast for readability.
* Primary Background: `#1a1a1a`
* Secondary Background/Cards: `#2a2a2a`
* Primary Text: `#f0f0f0`
* Accent Color: `#00bcd4` (Cyan)
* Warning/Severity Color: `#ff9800` (Orange)
* Danger/Critical Color: `#f44336` (Red)
- **Typography:** Clean, modern sans-serif font (e.g., Inter, Roboto, or Poppins). Clear hierarchy using font weights and sizes. Headings should be prominent.
- **Responsive Design:** Mobile-first approach. Layout should adapt seamlessly from small mobile screens to large desktop monitors. Use Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`). Ensure touch targets are adequately sized on mobile.
**COMPONENT BREAKDOWN:**
- **`App.jsx`**: Main application component, sets up routing and global layout.
* Props: None
* Responsibility: Renders `Header`, `MainContent`, `Footer`, manages global state context if needed.
- **`Header.jsx`**: Persistent header component.
* Props: `notificationsCount` (number)
* Responsibility: Displays logo, navigation links, notification icon. Handles navigation logic.
- **`Navigation.jsx`**: Navigation links component.
* Props: None
* Responsibility: Renders navigation items using `NavLink` from `react-router-dom`.
- **`Dashboard.jsx`**: Displays the main overview of hardware security.
* Props: None
* Responsibility: Fetches and displays featured hardware (e.g., Baochip-1x) and recent security news/alerts.
- **`BaochipAnalysis.jsx`**: Detailed analysis page for Baochip-1x.
* Props: None
* Responsibility: Displays specific details about Baochip-1x, its MMU, open RTL, and implications.
- **`VulnerabilityDatabase.jsx`**: Main page for the vulnerability database.
* Props: None
* Responsibility: Fetches and displays a list of vulnerabilities, including search and filter controls.
- **`VulnerabilityList.jsx`**: Renders a list of vulnerability items.
* Props: `vulnerabilities` (array)
* Responsibility: Maps over vulnerability data and renders `VulnerabilityListItem`.
- **`VulnerabilityListItem.jsx`**: Displays a single vulnerability entry.
* Props: `vulnerability` (object)
* Responsibility: Shows CVE ID, severity, summary. Links to detailed view.
- **`VulnerabilityDetail.jsx`**: Displays the full details of a single vulnerability.
* Props: `vulnerabilityId` (string, from route params)
* Responsibility: Fetches and displays all information about a specific vulnerability.
- **`Forum.jsx`**: Main forum page.
* Props: None
* Responsibility: Fetches and displays forum threads, provides option to create new threads.
- **`ThreadList.jsx`**: Renders a list of forum threads.
* Props: `threads` (array)
* Responsibility: Maps over thread data and renders `ThreadListItem`.
- **`ThreadListItem.jsx`**: Displays a single forum thread summary.
* Props: `thread` (object)
* Responsibility: Shows thread title, author, post count, last active time.
- **`NotificationDropdown.jsx`**: Dropdown for displaying notifications.
* Props: `notifications` (array)
* Responsibility: Displays list of notifications, allows marking as read or navigating.
- **`SearchBar.jsx`**: Generic search bar component.
* Props: `onSearch` (function), `placeholder` (string)
* Responsibility: Handles user input for search queries.
- **`FilterControls.jsx`**: Component for filtering data (e.g., vulnerabilities).
* Props: `options` (array), `onFilterChange` (function)
* Responsibility: Renders dropdowns or checkboxes for filtering.
- **`Modal.jsx`**: Generic modal component.
* Props: `isOpen` (boolean), `onClose` (function), `children` (ReactNode)
* Responsibility: Displays content in a modal overlay.
**DATA MODEL (Zustand Store & Mock Data):**
- **`store.js` (Zustand):**
* `vulnerabilities`: Array of vulnerability objects.
* `threads`: Array of forum thread objects.
* `hardware`: Array of hardware component objects (e.g., Baochip-1x).
* `notifications`: Array of notification objects.
* `actions`: Functions to fetch, add, update data.
- **Mock Data Formats:**
* **`vulnerability` object:**
```json
{
"id": "vuln-123",
"cve": "CVE-2023-XXXX",
"title": "MMU Privilege Escalation Vulnerability",
"description": "A buffer overflow in the MMU context switching routine could allow a local attacker to gain elevated privileges.",
"severity": "High", // Low, Medium, High, Critical
"cvssScore": 8.1,
"affectedHardware": ["Baochip-1x", "OtherRISCVChip"],
"affectedComponents": ["MMU", "Kernel"],
"mitigation": "Apply firmware update v1.2.3. Ensure strict memory access controls.",
"references": ["http://example.com/cve-123", "http://example.com/baochip-docs"]
}
```
* **`thread` object:**
```json
{
"id": "thread-abc",
"title": "Discussion on Baochip-1x MMU Security Implications",
"author": "user123",
"createdAt": "2024-07-27T10:00:00Z",
"postCount": 15,
"lastPostAt": "2024-07-27T15:30:00Z"
}
```
* **`hardware` object:**
```json
{
"id": "hw-baochip-1x",
"name": "Baochip-1x",
"description": "A powerful new RISC-V microcontroller with an MMU and mostly open RTL.",
"status": "Crowdfunding", // Active Development, Available, End-of-Life
"securityHighlights": ["MMU inclusion", "Open RTL"],
"relatedVulnerabilities": ["vuln-123"]
}
```
* **`notification` object:**
```json
{
"id": "notif-xyz",
"type": "New Analysis", // "New Vulnerability", "Forum Update"
"message": "Detailed analysis of Baochip-1x MMU released.",
"timestamp": "2024-07-27T16:00:00Z",
"read": false,
"link": "/dashboard#bao"
}
```
**ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons and list items.
- **Page Transitions:** Smooth fade-in/fade-out transitions between routes using `Framer Motion` or CSS transitions. (If complexity allows for MVP).
- **Loading States:** Use skeleton loaders or spinners for data fetching. Display messages like "Loading analysis..." or "Fetching vulnerabilities...".
- **Micro-interactions:** Button press feedback, subtle animations on form validation success/error, smooth scrolling.
- **Notification Alert:** A brief visual cue (e.g., a small bounce animation) when a new notification arrives.
**EDGE CASES:**
- **Empty States:** Display user-friendly messages and relevant CTAs when lists are empty (e.g., "No vulnerabilities found matching your criteria.", "Start the first discussion!").
- **Error Handling:** Gracefully handle API errors. Display informative error messages to the user (e.g., "Failed to load data. Please try again later."). Implement retry mechanisms where appropriate.
- **Validation:** Use `React Hook Form` for client-side validation on any input fields (e.g., forum post creation, search queries). Provide clear visual feedback for invalid inputs.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure sufficient color contrast. Implement ARIA attributes where necessary. Ensure keyboard navigability for all interactive elements. Use `Radix UI` or similar for accessible primitives like modals and dropdowns.
**SAMPLE DATA (Minimum 5-10 entries for each relevant list):**
* **Hardware:** Include `Baochip-1x` and at least 2-3 other mock RISC-V chips with varying security profiles.
* **Vulnerabilities:** Include at least 5-10 mock vulnerabilities, varying in severity, affected components (MMU, Core, Peripheral), and mitigation strategies. Ensure at least one is directly related to the MMU context switching described in the source article.
* **Forum Threads:** Create 5-10 mock threads covering topics like "RISC-V Security Best Practices", "Analyzing Open RTL", "Baochip-1x Crowdfunding Discussion", etc.
* **Notifications:** Include a few mock notifications representing different types (New Analysis, New Vulnerability).
**DEPLOYMENT NOTES:**
- **Build:** Use `npm run build` or `yarn build`. Ensure the build output is optimized for size and performance.
- **Environment Variables:** Use `.env` files for API endpoints, keys, etc. (e.g., `REACT_APP_API_URL`).
- **Performance Optimizations:** Code splitting using React.lazy and Suspense for route-based or component-based loading. Image optimization if applicable. Memoization (`React.memo`, `useMemo`, `useCallback`) for performance-critical components and functions.
- **Static Assets:** Optimize favicon and other static assets.
- **SEO (Basic):** Implement basic SEO for the main page title and meta description, although as an SPA, dynamic content SEO might require additional setup (e.g., server-side rendering with Next.js if expanding beyond pure SPA).
- **CORS:** Ensure backend API (if separate) handles CORS correctly for requests from the frontend domain.