You are an AI coding assistant tasked with generating a single-page SPA (Single Page Application) for a web application called 'Donanımım' (My Hardware). This application aims to empower users to extend the lifespan of their electronic devices, find repair resources, and make informed purchasing decisions in an era of rising hardware costs and centralized control.
## 1. PROJECT OVERVIEW
**Purpose:** To combat the trend of decreasing hardware affordability, diminishing consumer choice, and the shift of computing power towards data centers. 'Donanımım' provides users with tools and information to maintain their current hardware, facilitate repairs, and make smarter future purchasing decisions, thereby promoting digital independence and self-sufficiency.
**Problem Solved:** Addresses the "RAM-pocalypse" and the broader trend of expensive, less accessible, and harder-to-repair consumer electronics. It offers an alternative to the disposable tech culture by empowering users with knowledge and resources.
**Value Proposition:** 'Donanımım' helps users save money by extending device lifespan, reduces e-waste by encouraging repair over replacement, and provides crucial insights into a rapidly changing hardware market, ensuring users retain control over their digital lives.
## 2. TECH STACK
* **Frontend Framework:** React (using Create React App for simplicity or Vite for performance)
* **Styling:** Tailwind CSS (for rapid, utility-first styling)
* **State Management:** Zustand (lightweight and efficient for global state)
* **Routing:** React Router DOM (for navigation within the SPA)
* **HTTP Client:** Axios (for API requests, if needed later)
* **Local Storage:** Browser's Local Storage API (for persisting user data like device lists and preferences)
* **Icons:** Heroicons or Font Awesome
* **Form Handling:** React Hook Form (optional, for complex forms)
* **Date Handling:** date-fns or Moment.js (for date management)
## 3. CORE FEATURES (MVP)
**A. My Devices Module:**
* **User Flow:**
1. User navigates to the 'My Devices' section.
2. Clicks 'Add Device'.
3. Fills in device details: Type (Laptop, Desktop, Phone, Tablet, etc.), Brand, Model, Purchase Date, Warranty Expiry Date (optional), Custom Notes.
4. Device is added to a list. Each device card displays key info (Model, Type).
5. Clicking a device card opens a detailed view.
6. Detailed view shows all entered info, calculated remaining warranty (if applicable), and quick links to relevant repair guides or market insights.
7. Option to 'Edit' or 'Delete' device.
8. 'Maintenance Reminders' feature: Users can set custom reminders for tasks like cleaning, software updates, etc. (visualized via a timeline or checklist).
* **Description:** Allows users to catalog their hardware, track warranty periods, and receive timely maintenance suggestions to prolong device life.
**B. Repair Hub:**
* **User Flow:**
1. User navigates to the 'Repair Hub'.
2. Browses repair guides by device type or searches by model/issue.
3. Selects a guide (e.g., 'Replace Laptop RAM', 'Fix Cracked Phone Screen').
4. Guide displays step-by-step instructions with text, images (placeholders initially), and required tools/parts.
5. Access to a community forum: Users can ask repair-related questions, share their experiences, and help others. A simple thread/post system.
* **Description:** A curated collection of DIY repair guides and a community forum to assist users in troubleshooting and fixing their devices.
**C. Market Insights:**
* **User Flow:**
1. User navigates to 'Market Insights'.
2. Sees summarized data on current hardware price trends (e.g., CPU, GPU, RAM prices are rising/stable/falling).
3. Views articles/tips on making informed purchasing decisions: 'When to Buy', 'What to Look For', 'Signs of Shortages'.
4. Can potentially search for specific component price histories (mock data for MVP).
* **Description:** Provides users with analysis of hardware market trends, pricing fluctuations, and advice on navigating the current economic landscape for tech purchases.
## 4. UI/UX DESIGN
* **Layout:** Single-page application with a persistent sidebar navigation (collapsible on smaller screens) and a main content area. Clean, modern, and intuitive interface.
* **Color Palette:**
* Primary: Deep Blue (#1E3A8A - dark, stable, trustworthy)
* Secondary: Teal (#14B8A6 - accent, modern, techy)
* Accent/Call to Action: Orange (#F97316 - energetic, attention-grabbing)
* Background: Light Gray (#F3F4F6)
* Text: Dark Gray (#1F2937)
* Success: Green (#22C55E)
* Warning: Yellow (#FBBF24)
* Error: Red (#EF4444)
* **Typography:** Sans-serif fonts. 'Inter' or 'Roboto' for body text, 'Poppins' or 'Montserrat' for headings.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on mobile/tablet. Content sections adjust fluidly. Tailwind CSS's responsive prefixes (sm:, md:, lg:) will be used extensively.
* **Key Components:** Navigation Menu, Device Card, Device Detail View, Repair Guide Card, Forum Thread Preview, Market Trend Chart (placeholder), Input Forms, Buttons, Modals.
## 5. DATA MODEL & STATE MANAGEMENT
* **State Management Tool:** Zustand.
* **Global State (store.js):**
* `user`: { id, name, email } (null if not logged in - MVP assumes no auth, data stored locally)
* `devices`: Array of device objects.
* `marketData`: Object containing market trend summaries.
* `repairGuides`: Array of guide objects.
* `forumThreads`: Array of thread objects.
* `ui`: { isLoading, error, activeNavItem }.
* **Local Storage:**
* `devices`: Stores the user's device list array.
* `userPreferences`: Stores UI preferences if any.
* **Device Object Structure:**
```json
{
"id": "uuid-string",
"type": "Laptop" | "Desktop" | "Phone" | "Tablet" | "Other",
"brand": "Dell",
"model": "XPS 15",
"purchaseDate": "2023-01-15T10:00:00.000Z",
"warrantyExpiryDate": "2025-01-15T10:00:00.000Z", // Optional, null if not set
"notes": "High-performance laptop for development."
}
```
* **Repair Guide Object Structure:**
```json
{
"id": "uuid-string",
"title": "How to Replace RAM in a Dell XPS 15",
"deviceType": "Laptop",
"compatibleModels": ["XPS 15 9500", "XPS 15 9510"],
"difficulty": "Easy",
"estimatedTime": "30 minutes",
"steps": [
{ "stepNumber": 1, "instruction": "Power off the laptop completely...", "imageUrl": "/placeholder-images/step1.jpg" },
// ... more steps
],
"toolsNeeded": ["Phillips screwdriver", "Anti-static wrist strap"],
"partsNeeded": ["DDR4 RAM Module"]
}
```
* **Market Data Structure:**
```json
{
"overallTrend": "Slightly Increasing", // e.g., Increasing, Decreasing, Stable, Volatile
"componentTrends": {
"CPU": "Increasing",
"GPU": "Increasing",
"RAM": "Stable",
"SSD": "Decreasing"
},
"analysis": "Key component prices are seeing upward pressure due to supply chain issues and high demand...",
"purchaseAdvice": "Consider holding off on GPU upgrades unless absolutely necessary..."
}
```
## 6. COMPONENT BREAKDOWN
* **`App.js`:** Main application component. Sets up routing using `React Router DOM`. Imports and renders `Header`, `Sidebar`, and route-specific content components.
* **`Header.js`:** Displays the application title/logo and potentially a user profile icon (if auth is added later). Uses Tailwind CSS for styling.
* **`Sidebar.js`:** Navigation menu component. Contains links to 'My Devices', 'Repair Hub', 'Market Insights'. Manages active link state using Zustand.
* Props: `activeItem` (string), `onItemClick` (function).
* **`pages/MyDevicesPage.js`:** Container for the 'My Devices' features.
* Imports `DeviceList`, `AddDeviceForm`, `DeviceDetailModal`.
* Manages the list of devices fetched from Zustand store/local storage.
* **`components/DeviceList.js`:** Renders a grid or list of `DeviceCard` components.
* Props: `devices` (Array).
* **`components/DeviceCard.js`:** Displays a summary of a single device.
* Props: `device` (Object), `onClick` (function).
* Displays: Type, Brand, Model. Calculates remaining warranty visually (e.g., progress bar or days remaining).
* **`components/AddEditDeviceForm.js`:** Form for adding or editing device details.
* Props: `device` (Object, optional for edit), `onSubmit` (function), `onCancel` (function).
* Uses local state or React Hook Form.
* **`components/DeviceDetailModal.js`:** Modal dialog to show full device details.
* Props: `device` (Object), `isOpen` (boolean), `onClose` (function).
* **`pages/RepairHubPage.js`:** Container for repair guides and forum.
* Imports `RepairGuideList`, `SearchBar`, `ForumThreadsList`.
* **`components/RepairGuideList.js`:** Displays a list of `RepairGuideCard` components.
* Props: `guides` (Array).
* **`components/RepairGuideCard.js`:** Summary card for a repair guide.
* Props: `guide` (Object), `onClick` (function).
* Displays: Title, Device Type, Difficulty.
* **`components/ForumThreadsList.js`:** Displays a list of forum thread previews.
* Props: `threads` (Array).
* **`pages/MarketInsightsPage.js`:** Displays market data and advice.
* Imports `MarketTrendChart` (placeholder), `AnalysisDisplay`, `AdviceSection`.
* **`components/MarketTrendChart.js`:** Placeholder component for visualizing market data.
* Props: `data` (Object).
* Could use a simple charting library like Chart.js later, or just display text summaries for MVP.
* **`components/AnalysisDisplay.js`:** Displays the textual market analysis.
* Props: `analysis` (string).
* **`components/AdviceSection.js`:** Displays purchasing advice.
* Props: `advice` (string).
* **`components/SearchBar.js`:** Universal search bar component.
* Props: `placeholder` (string), `onSearch` (function).
## 7. ANIMATIONS & INTERACTIONS
* **Page Transitions:** Subtle fade-in/out using CSS transitions when navigating between sections.
* **Hover Effects:** Slight scale-up or shadow increase on interactive elements like cards and buttons.
* **Loading States:** Use skeleton loaders or spinners (e.g., from `react-spinners`) when data is being fetched (e.g., loading devices, market data). Displayed within the relevant component areas.
* **Micro-interactions:** Button click feedback (slight visual change), form input focus states.
* **Warranty Indicator:** A progress bar or color-coded indicator on `DeviceCard` showing remaining warranty percentage.
## 8. EDGE CASES & ACCESSIBILITY (a11y)
* **Empty States:** Display user-friendly messages and clear calls to action when lists are empty (e.g., "You haven't added any devices yet. Click 'Add Device' to start!").
* **Error Handling:** Implement try-catch blocks for local storage operations. Display user-friendly error messages (e.g., "Failed to save device data.") using a toast notification system or within the UI.
* **Validation:** Basic form validation for required fields (e.g., Model, Type) using `required` attribute and potentially regex for dates. Clear inline error messages.
* **Accessibility (a11y):**
* Use semantic HTML elements (header, nav, main, section, article, button).
* Ensure sufficient color contrast.
* Add ARIA attributes where necessary (e.g., `aria-label` for icon-only buttons).
* Ensure keyboard navigability for all interactive elements.
* Use `alt` text for images (even placeholders).
* **Data Persistence:** Ensure data is saved reliably to `localStorage` upon addition/edit/deletion.
## 9. SAMPLE DATA
* **Devices (Array for Zustand store / Local Storage):**
```json
[
{
"id": "d1",
"type": "Laptop",
"brand": "Framework",
"model": "DIY Edition",
"purchaseDate": "2023-05-20T14:30:00.000Z",
"warrantyExpiryDate": null,
"notes": "Custom build for repairability. Added extra storage."
},
{
"id": "d2",
"type": "Phone",
"brand": "Google",
"model": "Pixel 7 Pro",
"purchaseDate": "2022-11-10T09:00:00.000Z",
"warrantyExpiryDate": "2024-11-10T09:00:00.000Z",
"notes": "Main phone, screen protector applied."
}
]
```
* **Repair Guides (Array for Zustand store):**
```json
[
{
"id": "r1",
"title": "How to Replace Laptop RAM",
"deviceType": "Laptop",
"compatibleModels": ["Most Laptops", "Check Service Manual"],
"difficulty": "Easy",
"estimatedTime": "15 minutes",
"steps": [
{ "stepNumber": 1, "instruction": "Ensure laptop is powered off and unplugged.", "imageUrl": "/placeholders/laptop_off.jpg" },
{ "stepNumber": 2, "instruction": "Ground yourself to prevent static discharge.", "imageUrl": "/placeholders/grounding.jpg" },
{ "stepNumber": 3, "instruction": "Locate the RAM access panel on the bottom of the laptop. Unscrew it.", "imageUrl": "/placeholders/ram_panel.jpg" },
{ "stepNumber": 4, "instruction": "Gently release the clips holding the current RAM module...", "imageUrl": "/placeholders/release_ram.jpg" },
{ "stepNumber": 5, "instruction": "Insert the new RAM module at an angle...", "imageUrl": "/placeholders/insert_ram.jpg" },
{ "stepNumber": 6, "instruction": "Replace the access panel and screws. Power on to test.", "imageUrl": "/placeholders/test.jpg" }
],
"toolsNeeded": ["Phillips screwdriver set"],
"partsNeeded": ["Compatible DDR4/DDR5 RAM module"]
}
]
```
* **Market Data (Object for Zustand store):**
```json
{
"overallTrend": "Increasing",
"componentTrends": {
"CPU": "Increasing",
"GPU": "Volatile",
"RAM": "Stable",
"SSD": "Decreasing"
},
"analysis": "Global semiconductor shortages combined with strong demand for AI hardware continue to drive up prices for CPUs and GPUs. RAM prices remain relatively stable, while SSD prices are beginning to fall slightly.",
"purchaseAdvice": "For gamers, GPU prices are unpredictable; consider purchasing used or waiting for potential price drops later in the year. For productivity users, CPU and RAM remain the best value, but expect modest price increases. Delaying purchases if not urgent is advisable."
}
```
## 10. DEPLOYMENT NOTES
* **Build Tool:** Vite recommended for faster build times and development server.
* **Environment Variables:** Use `.env` files for configurations (e.g., `NODE_ENV`). For a simple MVP using only local storage, no external API keys are needed.
* **Deployment Platform:** Netlify, Vercel, or GitHub Pages are suitable for hosting static SPAs. Configure the build command (`npm run build` or `yarn build`) and output directory (`dist` or `build`).
* **Routing:** Configure the hosting provider to handle client-side routing correctly (e.g., redirect all 404s to `index.html` for React Router to take over).
* **Performance:** Optimize image sizes (use appropriate formats like WebP). Code splitting can be implemented later if needed (Vite/CRA support this).
* **SEO:** For a true SPA, initial SEO can be challenging. Consider pre-rendering or server-side rendering (SSR) with a framework like Next.js if SEO becomes critical, but this is beyond the MVP scope.
* **Local Storage Limits:** Be mindful of browser `localStorage` size limits (typically 5-10MB). For extensive user data, a backend and database would be required.