PROJECT OVERVIEW:
The project is to build a single-page web application (SPA) called 'Otomotiv Ar-Ge Platformu' (Automotive R&D Platform). This platform aims to empower individuals and professionals in the automotive security research and reverse engineering community. It provides a centralized environment where users can catalog, simulate, and collaborate on projects involving salvaged automotive electronic components, specifically focusing on systems like Tesla's car computers (MCU, AP). The core value proposition is to lower the barrier to entry for hands-on automotive hardware experimentation by providing digital tools and a community space, enabling users to run and test complex automotive ECUs on their desks without needing the entire vehicle.
TECH STACK:
- Frontend Framework: React (using Vite for fast development server and build)
- Styling: Tailwind CSS for utility-first CSS and rapid UI development
- State Management: Zustand for simple and scalable global state management
- Routing: React Router DOM for client-side navigation
- UI Components: Headless UI for accessible and unstyled components, Radix UI for further UI primitives if needed
- Icons: Lucide React for a comprehensive icon library
- Form Handling: React Hook Form for efficient form validation and management
- Utilities: Lodash for utility functions, date-fns for date/time manipulation
- API Calls (if needed later): Axios or Fetch API
- Local Storage: Utilizing browser's Local Storage for persisting user preferences and potentially draft data.
CORE FEATURES:
1. **Component Cataloging:**
* **User Flow:** User navigates to 'Catalog' section. Clicks 'Add New Component'. Fills out a form including Component Type (MCU, AP, Infotainment, etc.), Make/Model (e.g., Tesla Model 3), Part Number, Condition (Salvaged, New), Source (eBay, junkyard, etc.), Purchase Price, and optional Notes/Photos. User submits the form. The component is added to their personal catalog and displayed in a searchable/filterable list.
* **Details:** Supports various component types with specific relevant fields. Image uploads for visual identification. Search and filter by type, make, model, etc.
2. **Hardware Simulation (Basic):**
* **User Flow:** From the 'Catalog' list, user selects a component and clicks 'Simulate'. A dedicated simulation interface opens. The user can select a power supply profile (e.g., 12V, configurable amperage/voltage via sliders/inputs). They can toggle power on/off. A simulated console displays basic boot messages or simulated I/O status. This is an emulation of power delivery and basic signal presence, not a full OS simulation.
* **Details:** Visual representation of power input. On/Off toggle. Simulated output logs that mimic basic hardware responses (e.g., 'Power ON', 'CPU Initializing...'). Limited interaction, focusing on power and basic state.
3. **Setup Guides & Resources:**
* **User Flow:** User navigates to 'Resources'. They can browse guides categorized by vehicle make/model or component type. Guides include required peripheral hardware (power supplies, displays), connection diagrams (simplified), recommended software/firmware links (external), and common pitfalls. Users can also access community-submitted guides.
* **Details:** Rich text editor for guides. Categorization and tagging. Ability to link to external resources. Community submission feature with moderation.
4. **Community Forum:**
* **User Flow:** User navigates to 'Forum'. They can view existing topics, create new topics, reply to posts, and search for discussions. Topics can be tagged (e.g., 'Tesla MCU', 'Power Supply Issues', 'Bootloader').
* **Details:** Standard forum functionality: Create, Read, Update, Delete (own posts). Threaded replies. Tagging system. User profiles (minimal).
UI/UX DESIGN:
- **Layout:** A clean, modern dashboard layout. A persistent sidebar navigation for Catalog, Simulation, Resources, Forum, and Settings. The main content area displays the selected section. Responsive design adapting to desktop, tablet, and mobile viewports.
- **Color Palette:** Primary: Dark charcoal (#1a1a1a), Secondary: Deep blue (#007bff), Accent: Vibrant cyan (#00f0ff) or electric green (#39ff14). Neutral: Light gray (#f8f9fa) for backgrounds, dark gray (#343a40) for text. Focus on a tech-oriented, slightly futuristic feel.
- **Typography:** Sans-serif font family (e.g., Inter, Roboto, or Tailwind's default). Clear hierarchy using font weights and sizes. Headings: Bold, larger. Body text: Regular weight, comfortable line height.
- **Responsive Rules:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content blocks reflow and stack vertically. Ensure touch targets are adequately sized.
COMPONENT BREAKDOWN:
1. **`Layout.jsx`**: Main application shell. Includes sidebar, header (optional), and main content area. Handles routing.
* Props: `children` (the current page content).
* Responsibility: Structural layout, navigation.
2. **`Sidebar.jsx`**: Navigation menu component.
* Props: `isOpen` (boolean for mobile), `onClose` (function).
* Responsibility: Displays navigation links, handles mobile menu toggle.
3. **`CatalogPage.jsx`**: Displays the user's component catalog.
* Props: None (fetches data from store).
* Responsibility: Renders the list/grid of cataloged items, search/filter controls, 'Add New' button.
4. **`CatalogItem.jsx`**: Represents a single item in the catalog list/grid.
* Props: `item` (object with component details).
* Responsibility: Displays individual component info, links to detail/simulation view.
5. **`CatalogForm.jsx`**: Form for adding/editing catalog items.
* Props: `initialData` (object, optional), `onSubmit` (function).
* Responsibility: Handles form input, validation, and submission.
6. **`SimulationPage.jsx`**: Interface for simulating hardware.
* Props: `componentId` (string, from URL).
* Responsibility: Renders simulation controls (power, sliders), displays simulated console output.
7. **`ConsoleOutput.jsx`**: Displays simulated terminal/log output.
* Props: `logs` (array of strings).
* Responsibility: Renders scrolling log messages.
8. **`ResourcesPage.jsx`**: Displays guides and helpful links.
* Props: None.
* Responsibility: Browsing, searching, and displaying resource content.
9. **`ForumPage.jsx`**: Main forum interface.
* Props: None.
* Responsibility: Displays topic list, search, create topic button.
10. **`TopicItem.jsx`**: Represents a single forum topic.
* Props: `topic` (object with topic details).
* Responsibility: Displays topic title, author, date, replies count.
11. **`Input.jsx`, `Button.jsx`, `Modal.jsx` etc.**: Reusable UI components (potentially from Headless UI).
* Props: Standard HTML attributes + custom props as needed.
* Responsibility: Basic UI elements.
DATA MODEL:
- **State Structure (Zustand Store):**
```javascript
{
catalog: {
items: [], // Array of component objects
loading: false,
error: null
},
simulation: {
selectedComponentId: null,
powerState: 'OFF', // 'OFF', 'ON'
voltage: 12,
amperage: 5,
simulatedLogs: []
},
resources: {
guides: [],
searchQuery: ''
},
forum: {
topics: [],
selectedTopicId: null,
posts: []
},
user: {
// Basic user info if authentication is added later
}
}
```
- **Mock Data Format (Catalog Item):**
```json
{
"id": "comp_123abc",
"type": "MCU", // e.g., MCU, AP, Infotainment, BMS
"makeModel": "Tesla Model 3",
"partNumber": "1045511-00-E",
"condition": "Salvaged", // Salvaged, Used, New
"source": "eBay Seller XYZ",
"purchasePrice": 250.50,
"currency": "USD",
"notes": "Water-cooled casing intact. Minor cosmetic scratches.",
"imageUrl": "/path/to/image.jpg",
"addedDate": "2024-07-26T10:00:00Z"
}
```
- **Mock Data Format (Forum Topic):**
```json
{
"id": "topic_789def",
"title": "Getting Tesla Model 3 MCU to POST without AP Unit",
"authorId": "user_abc",
"authorName": "TestUser1",
"createdAt": "2024-07-25T15:30:00Z",
"lastReplyAt": "2024-07-26T09:00:00Z",
"replyCount": 5,
"tags": ["Tesla", "MCU", "Booting", "AP"]
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/out transitions between pages using `Framer Motion` or CSS transitions triggered by route changes.
- **Button Hovers:** Slight scale-up or background color change on button hover states.
- **Form Feedback:** Input field focus outlines, subtle animations on validation errors (e.g., a slight shake).
- **Loading States:** Skeleton loaders or spinners (`react-spinners`) displayed while fetching data for catalog, resources, or forum topics. The 'Simulate' button could show a pulsing animation when active.
- **Micro-interactions:** Smooth toggling of power in the simulation. Smooth scrolling in the console output.
EDGE CASES:
- **Empty States:** Display user-friendly messages and potentially calls to action when the catalog, resources, or forum are empty (e.g., "Your catalog is empty. Add your first component!").
- **Error Handling:** Graceful handling of API errors (if implemented later) or simulation failures. Display informative error messages to the user without crashing the app. Use try-catch blocks.
- **Form Validation:** Implement client-side validation for all forms (required fields, number formats for price/voltage/amperage, valid URLs for images/links). Use React Hook Form for robust validation.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive elements, especially in the sidebar and forms. Keyboard navigability for all interactive components. Sufficient color contrast.
- **Data Persistence:** Use Local Storage to save catalog items and user preferences. Handle potential Local Storage quota exceeded errors.
- **Simulation Limits:** Clearly communicate the limitations of the simulation (it's not a full OS emulator). Prevent users from expecting actual OS boot.
SAMPLE DATA:
1. **Catalog Item (Tesla MCU):**
```json
{
"id": "comp_tesla_mcu_001",
"type": "MCU",
"makeModel": "Tesla Model 3",
"partNumber": "1045511-00-E",
"condition": "Salvaged",
"source": "Junkyard Direct",
"purchasePrice": 280.00,
"currency": "USD",
"notes": "From a 2019 Model 3. Water-cooled. Tested power delivery.",
"imageUrl": "/images/tesla_mcu_sample.jpg",
"addedDate": "2024-07-20T11:00:00Z"
}
```
2. **Catalog Item (Tesla AP Computer):**
```json
{
"id": "comp_tesla_ap_001",
"type": "AP Computer",
"makeModel": "Tesla Model 3/Y",
"partNumber": "1494067-00-D",
"condition": "Salvaged",
"source": "eBay",
"purchasePrice": 450.00,
"currency": "USD",
"notes": "Hardware version D. Needed for advanced features.",
"imageUrl": "/images/tesla_ap_sample.jpg",
"addedDate": "2024-07-21T12:30:00Z"
}
```
3. **Catalog Item (Generic ECU):**
```json
{
"id": "comp_ecu_generic_005",
"type": "ECU",
"makeModel": "Generic CAN Gateway",
"partNumber": "GW-XYZ-V2",
"condition": "Used",
"source": "Electronics Surplus",
"purchasePrice": 75.00,
"currency": "USD",
"notes": "Standard CAN interface, common in many vehicles.",
"imageUrl": null,
"addedDate": "2024-07-22T08:15:00Z"
}
```
4. **Resource Entry (Example):**
```json
{
"id": "res_tesla_mcu_power",
"title": "Powering the Tesla Model 3 MCU - Pinout and Guide",
"type": "Guide", // Guide, Link, Document
"tags": ["Tesla", "MCU", "Power", "Wiring"],
"summary": "Detailed guide on identifying power, ground, and CAN pins for the Model 3 MCU.",
"url": "/guides/tesla-mcu-power-guide", // Internal link
"externalUrl": "https://example.com/tesla_pinout.pdf", // Optional external link
"createdAt": "2024-07-10T00:00:00Z"
}
```
5. **Forum Topic (Example):**
```json
{
"id": "topic_tesla_boot_001",
"title": "Troubleshooting MCU Boot Loop - Model S",
"authorId": "user_456",
"authorName": "AutoHacker",
"createdAt": "2024-07-25T10:00:00Z",
"lastReplyAt": "2024-07-26T08:45:00Z",
"replyCount": 12,
"tags": ["Tesla", "Model S", "MCU", "Boot Loop", "Debugging"]
}
```
6. **Simulated Log Entry:**
`"[INFO] Power ON - Applying 12.0V"
`"[DEBUG] Initializing memory controller..."
`"[WARN] Voltage stable at 11.95V."
`"[ERROR] CPU core not responding. Aborting boot."`
DEPLOYMENT NOTES:
- **Build Tool:** Vite. Run `npm run build` for production build.
- **Environment Variables:** Use `.env` file for configuration. Key variables might include `NODE_ENV`, `VITE_API_URL` (if external API is used later).
- **Hosting:** Suitable for static hosting platforms like Vercel, Netlify, GitHub Pages, or Cloudflare Pages.
- **Performance:** Vite provides fast build times and optimized output. Code splitting is handled automatically. Optimize images. Lazy load components where appropriate.
- **CI/CD:** Setup pipelines for automated testing and deployment (e.g., GitHub Actions).
- **HTTPS:** Ensure deployment uses HTTPS for security.
- **Cache Control:** Configure appropriate cache headers for static assets.