You are an expert AI assistant tasked with building a single-page React application using Next.js and Tailwind CSS. The application, named 'Donanım Sınırları Dedektifi' (Hardware Limitations Detective), aims to track and inform users about potential hardware shortages and hidden limitations in Apple products, focusing on components like RAM and storage, inspired by user reports and tech news analysis.
**1. PROJECT OVERVIEW:**
The primary goal of this application is to provide users with timely and transparent information about the supply chain status and potential hardware limitations of Apple products. The problem arises from situations like Apple quietly removing configurations (e.g., the 512GB RAM option for Mac Studio) or facing supply crunches without explicit user notification. This app will aggregate data from tech news, forums, and user reports to build a comprehensive, easily digestible status report for each product, empowering users to make informed purchasing decisions. The core value proposition is proactive disclosure and data-driven insights into hardware availability.
**2. TECH STACK:**
- **Framework:** Next.js (for SSR/SSG capabilities and routing)
- **UI Library:** React
- **Styling:** Tailwind CSS (with Headless UI or similar for accessible components if needed)
- **State Management:** Zustand or React Context API (for simpler state, Zustand for more complex)
- **Data Fetching:** Next.js built-in fetch, possibly SWR for client-side caching
- **API Integration:** Utilize serverless functions or Next.js API routes for backend logic and external API calls (e.g., news aggregators, potentially custom scrapers if ethically and legally feasible)
- **Deployment:** Vercel (ideal for Next.js projects)
- **Potential Libraries:** `react-icons`, `date-fns` for date formatting, `dompurify` for sanitizing HTML content from news sources.
**3. CORE FEATURES:**
- **Product Monitoring Dashboard:** The main view displays a list of monitored Apple products (e.g., Mac Studio, MacBook Pro, iPhone 15 Pro). Each product entry shows a summary status (e.g., 'Stable', 'Potential Shortage', 'Configuration Removed').
- **User Flow:** User lands on the dashboard. They see a list of products with their current status. Clicking a product navigates to a detailed view.
- **Detailed Product View:** For each product, this page provides in-depth information:
- **Spec History:** Tracks changes in available configurations, RAM/storage options, and pricing over time.
- **News Aggregation & Analysis:** Displays relevant news articles, forum discussions, and user reports, summarized and categorized.
- **Supply Chain Risk Score:** A calculated score (e.g., 1-10) indicating the likelihood of shortages or limitations based on aggregated data.
- **User Reports:** Section for users to submit and view community-reported issues.
- **User Flow:** User clicks a product on the dashboard. They see historical data, news summaries, risk score, and recent user reports. They can also submit a new report.
- **User Report Submission Form:** A simple form allowing users to report specific issues (e.g., '512GB M3 Ultra Mac Studio is no longer listed as an option', 'Longer shipping times for M3 Max MacBook Pro').
- **User Flow:** User navigates to a specific product's detailed view or a general submission page. They fill out the form with details, select the product, and submit. The report is added to a moderation queue or directly displayed if user reputation is high.
- **News & Data Fetching Module:** A background process (likely Next.js API routes or serverless functions) that periodically fetches data from configured sources (RSS feeds, APIs, potentially web scraping - use with caution).
- **User Flow:** This is an internal process. It runs on a schedule, fetches new data, parses it, and updates the application's data store.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) structure. Main dashboard for product overview. Dedicated page for each product's details. Navigation via a simple header and possibly a sidebar or breadcrumbs.
- **Color Palette:** Primarily dark theme for a tech-focused aesthetic. Use accent colors (e.g., a muted orange or blue) to highlight key information like risk scores or status changes. Neutral grays and whites for text and backgrounds. Ensure high contrast for accessibility.
- **Typography:** Clean, readable sans-serif font (e.g., Inter, Roboto). Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. Utilize Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`) to ensure usability across all devices. The dashboard should adapt to list or card views. Detail pages should stack content vertically on smaller screens.
- **Component Structure:** Focus on reusable components (e.g., `ProductCard`, `StatusBadge`, `NewsListItem`, `ReportForm`, `ChartComponent`).
- **Interactions:** Subtle hover effects on interactive elements. Smooth transitions for loading states and data updates. Visual feedback for form submissions.
**5. DATA MODEL:**
- **`Product` Object:**
- `id`: string (unique identifier, e.g., 'mac-studio-m3-ultra')
- `name`: string (e.g., 'Mac Studio (M3 Ultra)')
- `category`: string (e.g., 'Desktop Mac')
- `imageUrl`: string
- `currentStatus`: 'Stable' | 'Potential Shortage' | 'Configuration Removed' | 'Price Increase' | 'Info Pending'
- `riskScore`: number (1.0-10.0)
- `lastUpdated`: string (ISO date)
- `specs`: object (current available specs, e.g., `{ 'ramOptions': ['256GB', '1TB'], 'storageOptions': ['1TB', '2TB'] }`)
- **`SpecEntry` Object (for history):**
- `timestamp`: string (ISO date)
- `ramOptions`: string[]
- `storageOptions`: string[]
- `price`: number
- `notes`: string (e.g., '512GB RAM option removed')
- **`NewsArticle` Object:**
- `id`: string
- `source`: string (e.g., 'Hacker News', 'MacRumors')
- `title`: string
- `url`: string
- `publishedAt`: string (ISO date)
- `summary`: string (AI-generated or excerpted)
- `relatedProductIds`: string[]
- **`UserReport` Object:**
- `id`: string
- `productId`: string
- `timestamp`: string (ISO date)
- `reportText`: string
- `reporterId`: string (optional, for authenticated users)
- `status`: 'Pending' | 'Verified' | 'Dismissed'
- **State Management:** Use Zustand for global state like product lists, filters, and potentially user authentication. Local component state for form inputs, UI toggles etc.
- **Data Storage:** Initially, use local JSON files for mock data. For a deployed app, use a database (e.g., PostgreSQL with Prisma, or a NoSQL DB like MongoDB) managed via Next.js API routes or a separate backend.
**6. COMPONENT BREAKDOWN:**
- **`Layout.tsx`:** Main application shell. Includes Header, Footer (optional), and children rendering. Handles overall structure and responsiveness.
- Props: `children: React.ReactNode`
- **`Header.tsx`:** Top navigation bar. Includes logo, app title, main navigation links (Dashboard, Submit Report), and potentially user auth status.
- Props: None (or could accept `isLoggedIn: boolean`)
- **`ProductCard.tsx`:** Displays summary info for a single product on the dashboard.
- Props: `product: Product` (includes name, imageUrl, currentStatus, riskScore)
- **`StatusBadge.tsx`:** Renders a colored badge indicating product status.
- Props: `status: Product['currentStatus']`
- **`ProductDetail.tsx`:** Container component for the detailed product view. Fetches and orchestrates sub-components.
- Props: `productId: string`
- **`SpecHistoryChart.tsx`:** Visualizes historical spec changes and pricing.
- Props: `specEntries: SpecEntry[]`
- **`NewsFeed.tsx`:** Displays a list of aggregated news articles related to the product.
- Props: `articles: NewsArticle[]`
- **`UserReportList.tsx`:** Displays user-submitted reports for a product.
- Props: `reports: UserReport[]`
- **`ReportForm.tsx`:** Form for users to submit new reports.
- Props: `productId: string` (to associate report with product), `onSubmit: (reportData) => void`
- **`LoadingSpinner.tsx`:** Reusable loading indicator.
- Props: `size?: 'small' | 'medium' | 'large'`
- **`ErrorMessage.tsx`:** Displays error messages.
- Props: `message: string`
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Use Next.js's built-in router or a library like `Framer Motion` for smooth page transitions between the dashboard and product detail views.
- **Hover Effects:** Subtle background color changes or slight scaling on `ProductCard` and other interactive elements.
- **Loading States:** Display `LoadingSpinner` components while data is being fetched. Use skeleton loaders for list items (`ProductCard` placeholders) for a perceived faster load time.
- **Data Update Animations:** When data refreshes, subtly animate changed values (e.g., `riskScore`) or use a brief highlight effect on updated `ProductCard` components.
- **Form Submission Feedback:** Visual confirmation (e.g., checkmark animation, brief message) upon successful `ReportForm` submission.
**8. EDGE CASES:**
- **Empty States:** The dashboard should display a helpful message if no products are being tracked or if data fetching fails. The `NewsFeed` and `UserReportList` should show 'No reports found' or 'No news available' messages.
- **Error Handling:** Implement robust error handling for API requests. Display user-friendly error messages using `ErrorMessage` component. Log detailed errors to a monitoring service.
- **Data Validation:** Validate user input in the `ReportForm` (e.g., required fields, text length). Implement backend validation as well.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for interactive components. Maintain sufficient color contrast. Make sure all functionality is keyboard-navigable.
- **Data Source Reliability:** Handle cases where news sources are unavailable or return malformed data. Implement fallback mechanisms or skip problematic sources.
- **Scraping Ethics/Legality:** If web scraping is considered, implement robust error handling, respect `robots.txt`, avoid overwhelming target sites, and be aware of legal implications.
**9. SAMPLE DATA:**
```json
// Mock Product Data
[
{
"id": "mac-studio-m3-ultra",
"name": "Mac Studio (M3 Ultra)",
"category": "Desktop Mac",
"imageUrl": "/images/mac-studio.png",
"currentStatus": "Configuration Removed",
"riskScore": 8.5,
"lastUpdated": "2024-03-15T10:00:00Z",
"specs": {
"ramOptions": ["256GB", "1TB"],
"storageOptions": ["1TB", "2TB"],
"basePrice": 2000
}
},
{
"id": "iphone-15-pro",
"name": "iPhone 15 Pro",
"category": "Smartphone",
"imageUrl": "/images/iphone-15-pro.png",
"currentStatus": "Stable",
"riskScore": 3.2,
"lastUpdated": "2024-03-14T18:30:00Z",
"specs": {
"ramOptions": ["8GB"],
"storageOptions": ["128GB", "256GB", "512GB", "1TB"],
"basePrice": 999
}
},
{
"id": "macbook-pro-14-m3-max",
"name": "MacBook Pro 14" (M3 Max)",
"category": "Laptop",
"imageUrl": "/images/mbp-14.png",
"currentStatus": "Potential Shortage",
"riskScore": 6.8,
"lastUpdated": "2024-03-13T12:00:00Z",
"specs": {
"ramOptions": ["36GB", "48GB", "64GB", "128GB"],
"storageOptions": ["512GB", "1TB", "2TB", "4TB", "8TB"],
"basePrice": 2199
}
}
]
// Mock News Article Data
[
{
"id": "news-1",
"source": "MacRumors",
"title": "Apple Quietly Removes 512GB RAM Option for M3 Ultra Mac Studio Amid Supply Concerns",
"url": "https://www.macrumors.com/example/apple-removes-512gb-ram-studio/",
"publishedAt": "2024-03-14T09:00:00Z",
"summary": "Apple has removed the high-end 512GB RAM configuration from the Mac Studio page, potentially indicating a supply chain bottleneck for advanced memory modules. Pricing for the 256GB model has also seen an increase.",
"relatedProductIds": ["mac-studio-m3-ultra"]
},
{
"id": "news-2",
"source": "Hacker News Discussion",
"title": "Discussion: Apple's M3 chip supply chain constraints",
"url": "https://news.ycombinator.com/item?id=123456789",
"publishedAt": "2024-03-13T15:45:00Z",
"summary": "Users are discussing potential delays and availability issues for M3 Max MacBook Pro models, particularly concerning higher RAM and storage configurations.",
"relatedProductIds": ["macbook-pro-14-m3-max"]
}
]
// Mock User Report Data
[
{
"id": "report-1",
"productId": "mac-studio-m3-ultra",
"timestamp": "2024-03-15T08:30:00Z",
"reportText": "I can no longer select the 512GB RAM option when configuring a new Mac Studio M3 Ultra on Apple's website. It seems to be gone completely.",
"reporterId": "user123",
"status": "Verified"
},
{
"id": "report-2",
"productId": "macbook-pro-14-m3-max",
"timestamp": "2024-03-14T11:20:00Z",
"reportText": "Ordered a 128GB M3 Max model two weeks ago, estimated delivery is now 6 weeks instead of the initial 3 weeks.",
"reporterId": "user456",
"status": "Pending"
}
]
```
**10. DEPLOYMENT NOTES:**
- **Build Command:** `npm run build` or `yarn build` (Next.js handles optimization).
- **Environment Variables:** Use `.env.local` for local development. For production, configure variables in Vercel: `NEWS_API_KEY`, `DATABASE_URL` (if applicable), `EXTERNAL_API_ENDPOINT`.
- **Performance Optimizations:** Leverage Next.js features like Image Optimization (`next/image`), Static Generation (SSG) for pages with unchanging data, and Server-Side Rendering (SSR) or Incremental Static Regeneration (ISR) for dynamic content. Code splitting is handled automatically by Next.js.
- **API Routes:** Implement data fetching and aggregation logic within Next.js API routes (`pages/api/`) or serverless functions. Consider caching strategies for external API calls to manage rate limits and costs.
- **Monitoring:** Integrate a service like Sentry or LogRocket for error tracking and performance monitoring in production.
- **CI/CD:** Vercel provides seamless CI/CD integration with Git repositories. Ensure your build and deployment settings are configured correctly in the Vercel dashboard.