You are an AI assistant tasked with generating a single-page Server-Side Rendering (SSR) React application with Next.js and Tailwind CSS, based on the concept of transforming old MacBook shells into functional monitors or mini-PC displays. The application will be named 'FrameBook: Eski Mac'lere Yeni Hayat' (FrameBook: New Life for Old Macs).
PROJECT OVERVIEW:
The primary goal is to create a platform that empowers tech enthusiasts and retro computing hobbyists to repurpose old MacBook enclosures into modern displays or integrated mini-PC setups. The problem addressed is the difficulty users face in finding comprehensive guides, suitable parts, and a supportive community for such niche DIY projects. The value proposition lies in providing a centralized, user-friendly resource that simplifies the complex process of retrofitting old hardware, fostering a community around this unique form of tech modification.
TECH STACK:
- Framework: Next.js (for SSR capabilities, routing, and API routes if needed later).
- Language: TypeScript (for type safety and better developer experience).
- Styling: Tailwind CSS (for rapid, utility-first styling).
- UI Components: Custom React components, potentially using a library like Headless UI for accessible and unstyled components.
- State Management: React Context API for global state (e.g., user authentication status if implemented later) and component-level state for local UI logic. For MVP, minimal state management will be required.
- Routing: Next.js built-in routing.
- Deployment: Vercel (recommended for Next.js applications).
CORE FEATURES:
1. **Project Guides (Rehberler):**
* **User Flow:** Users navigate to the 'Guides' section. They see a list of available guides, filterable by MacBook model (e.g., 'A1181'). Clicking a guide displays a detailed, step-by-step walkthrough.
* **Content:** Each guide includes an introduction, a list of required tools and parts, step-by-step instructions with clear explanations, and embedded images or videos demonstrating the process. Emphasis will be on clarity and safety.
* **Example Guide (A1181 to Monitor):**
* Introduction: Project overview, difficulty level, estimated time.
* Required Parts: Specific display controller board model, compatible LCD panel, power adapter, internal wiring, etc.
* Required Tools: Screwdriver set (Pentalobe, Phillips), spudger, anti-static wrist strap, heat gun (optional), soldering iron (optional).
* Steps:
1. Disassembly: Complete teardown of the MacBook A1181.
2. Chassis Preparation: Cleaning and modification of the original shell.
3. Component Integration: Installing the display controller, panel, and wiring.
4. Power Connection: Setting up the power input.
5. Testing: Initial power-on and display check.
6. Final Assembly: Securing all components and closing the shell.
* Visuals: High-quality images for each critical step.
2. **Parts Finder (Parça Bulucu):**
* **User Flow:** Users visit the 'Parts Finder' section. They can either select a specific MacBook model and the type of component they need (e.g., 'A1181 - Display Controller Board') or search directly. Results display recommended parts with links to reputable online marketplaces (Amazon, eBay, AliExpress, specialized electronics stores).
* **Content:** Curated list of compatible parts, links to suppliers, and user reviews/ratings for parts and sellers. Emphasis on verified compatibility.
3. **Community Forum (Topluluk Forumu):**
* **User Flow:** Users access the 'Forum' section. They can view existing topics, search for specific discussions, create new topics (posts) with titles and descriptions, and reply to existing posts. Basic moderation tools might be needed later.
* **Content:** Categories for different topics: General Discussion, Project Showcase, Troubleshooting, Parts Recommendations, specific model discussions.
4. **Project Showcase (Projelerim / Sergile):**
* **User Flow:** Registered users (future feature, for MVP, maybe just a gallery linked from the forum) can upload photos/videos of their completed projects. Other users can view these projects, comment, and like them.
* **Content:** User-submitted galleries of their modified MacBooks, categorized or sortable by model/type.
UI/UX DESIGN:
- **Layout:** Single-page application feel using Next.js routing. A clean, navigable layout with a prominent header (App Title, Navigation Links: Guides, Parts Finder, Forum, Showcase). Footer with copyright and basic links. Main content area dynamically changes based on the selected section.
- **Color Palette:** Inspired by classic Mac aesthetics but modernized. Primary colors: Dark Gray/Charcoal (#333), Silver/Light Gray (#ccc), White (#fff) for text and backgrounds. Accent color: A subtle, tech-inspired blue (#007AFF) or a warm accent for calls-to-action. Avoid overly bright or distracting colors.
- **Typography:** Clean, sans-serif fonts. Use 'Inter' or 'Roboto' for body text and headings. Ensure good readability and hierarchy.
- **Responsive Design:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (desktops, tablets, smartphones). Use Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:) extensively. Navigation might collapse into a hamburger menu on smaller screens.
- **Visual Style:** Minimalist, functional, with a focus on clarity. High-quality imagery is crucial for guides and showcase sections.
COMPONENT BREAKDOWN:
- `Layout.tsx`: Wrapper component handling the overall page structure (header, footer, main content area). Receives `children` as props.
- `Header.tsx`: Contains the application title/logo and primary navigation links. Manages active link highlighting.
- `Footer.tsx`: Contains copyright information and secondary links.
- `HomePage.tsx`: Landing page introducing the concept, highlighting key sections (Guides, Parts Finder, Forum).
- `GuidesList.tsx`: Displays a list or grid of available project guides. Includes filtering/search options.
- `GuideCard.tsx`: Represents a single guide in the list, showing title, brief description, and thumbnail. Receives `guide` object as props.
- `GuideDetail.tsx`: Displays the full content of a selected guide, including steps, images, and tool/part lists. Receives `guide` object as props.
- `PartsFinder.tsx`: Main component for the parts finder. Might contain search/filter UI and display results.
- `PartResult.tsx`: Represents a single recommended part in the search results. Receives `part` object as props.
- `Forum.tsx`: Displays the forum interface, listing topics or threads.
- `TopicCard.tsx`: Represents a single forum topic. Receives `topic` object as props.
- `Showcase.tsx`: Displays the project showcase gallery.
- `ProjectCard.tsx`: Represents a single project in the showcase. Receives `project` object as props.
- `Button.tsx`: Reusable button component with various states (default, hover, disabled). Accepts `children` and `onClick` props.
- `Card.tsx`: Reusable container for displaying content blocks (like guide previews, forum topics). Accepts `children`.
DATA MODEL:
- **Guides:**
```json
{
"id": "string",
"title": "string",
"description": "string",
"model": "string", // e.g., 'A1181'
"difficulty": "string", // e.g., 'Beginner', 'Intermediate', 'Advanced'
"estimatedTime": "string", // e.g., '2-3 hours'
"steps": [
{
"stepNumber": "number",
"title": "string",
"instruction": "string",
"imageUrl": "string" // Optional
}
],
"requiredTools": ["string"],
"requiredParts": ["string"]
}
```
- **Parts:**
```json
{
"id": "string",
"name": "string",
"description": "string",
"compatibleModels": ["string"], // e.g., ['A1181', 'A1278']
"category": "string", // e.g., 'Display Controller', 'LCD Panel', 'Power Adapter'
"purchaseLinks": [
{
"platform": "string", // e.g., 'Amazon', 'eBay'
"url": "string"
}
]
}
```
- **Forum Topics:**
```json
{
"id": "string",
"title": "string",
"author": "string", // User ID or name
"timestamp": "string", // ISO format
"content": "string",
"replies": [
{
"id": "string",
"author": "string",
"timestamp": "string",
"content": "string"
}
]
}
```
- **Showcase Projects:**
```json
{
"id": "string",
"title": "string",
"author": "string",
"description": "string",
"images": ["string"], // URLs to images
"videos": ["string"], // URLs to videos
"model": "string"
}
```
**State Management:** For MVP, mock data will be imported directly into components or simple page-level state management using `useState` and `useEffect`. Future iterations might involve Context API for user session or more complex state needs.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on cards (Guides, Parts, Forum Topics) on hover to indicate interactivity.
- **Page Transitions:** Smooth transitions between pages using Next.js's built-in capabilities or libraries like `Framer Motion` (if complexity warrants). Fade-in/out effects.
- **Loading States:** Implement skeleton loaders or spinners (`react-spinners`) when fetching data (if implemented via API later) or when transitioning between sections. Displaying a subtle loading indicator within buttons during async operations.
- **Micro-interactions:** Button click feedback (slight press effect), smooth scrolling to anchors within guides.
EDGE CASES:
- **Empty States:** Guides, Parts, Forum, and Showcase sections should have visually clear empty states with appropriate messages (e.g., "No guides found for this model. Check back soon!" or "Start the discussion! Create the first topic.").
- **Error Handling:** Implement basic error handling for potential issues (e.g., failed data loading, broken links). Display user-friendly error messages.
- **Validation:** For future features like user registration or forum posting, implement input validation (e.g., required fields, valid email format).
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast. Alt text for all meaningful images.
- **Responsiveness:** Ensure all components and content adapt gracefully to different screen sizes and orientations. Test on various devices/emulators.
SAMPLE DATA:
1. **Guide Example (A1181):**
```json
{
"id": "guide-a1181-monitor",
"title": "MacBook (13-inch, Early 2006) - Monitöre Dönüştürme",
"description": "İlk nesil siyah MacBook kasasını modern bir harici monitöre dönüştürme rehberi.",
"model": "A1181",
"difficulty": "Intermediate",
"estimatedTime": "3-5 hours",
"steps": [
{ "stepNumber": 1, "title": "MacBook'u Sökme", "instruction": "Pentalobe ve Phillips vidaları kullanarak MacBook'u dikkatlice sökün. İç bileşenleri çıkarın.", "imageUrl": "/images/a1181-disassembly-1.jpg" },
{ "stepNumber": 2, "title": "Kasa Hazırlığı", "instruction": "Kasanın içini temizleyin ve ekran panelini monte etmek için gerekli modifikasyonları yapın.", "imageUrl": "/images/a1181-chassis-prep.jpg" }
],
"requiredTools": ["Pentalobe Screwdriver Set", "Phillips Screwdriver Set", "Spudger", "Anti-static Wrist Strap"],
"requiredParts": ["Custom LCD Controller Board for MacBook A1181", "Compatible LCD Panel (e.g., LP133WH1-TJA1)", "12V DC Power Adapter", "Internal Wiring Harness"]
}
```
2. **Part Example (Controller Board):**
```json
{
"id": "part-controller-a1181",
"name": "MacBook A1181 LCD Controller Board",
"description": "Eski MacBook A1181 kasalarını HDMI veya DP monitörlere dönüştürmek için kullanılan kontrol kartı.",
"compatibleModels": ["A1181"],
"category": "Display Controller",
"purchaseLinks": [
{ "platform": "eBay", "url": "https://www.ebay.com/itm/XYZ" },
{ "platform": "AliExpress", "url": "https://www.aliexpress.com/item/ABC" }
]
}
```
3. **Forum Topic Example:**
```json
{
"id": "topic-123",
"title": "A1181 için En İyi Ekran Paneli Hangisi?",
"author": "RetroFanatic",
"timestamp": "2023-10-27T10:00:00Z",
"content": "Arkadaşlar, A1181 kasamı monitör yapıyorum. Şu anda LP133WH1-TJA1 paneli düşünüyorum ama daha iyi veya daha uygun fiyatlı alternatifler var mı? Tecrübelerinizi paylaşırsanız sevinirim.",
"replies": [
{ "id": "reply-123-1", "author": "ModMaster", "timestamp": "2023-10-27T11:30:00Z", "content": "LP133WH1 iyi bir seçim, ben de onu kullandım. Piksel yoğunluğu tatmin edici.", "replies": [] },
{ "id": "reply-123-2", "author": "Newbie", "timestamp": "2023-10-27T12:15:00Z", "content": "Ben B133EW01 v2 denedim, biraz daha parlak ama renkler daha soluk.", "replies": [] }
]
}
```
4. **Showcase Project Example:**
```json
{
"id": "project-456",
"title": "My Sleek A1181 Monitor Build",
"author": "DIYGuru",
"description": "Finally completed my A1181 conversion! Used a 13.3" IPS panel and a custom controller board. Looks amazing on my desk.",
"images": ["/images/showcase-a1181-1.jpg", "/images/showcase-a1181-2.jpg"],
"videos": [],
"model": "A1181"
}
```
5. **Another Part Example:**
```json
{
"id": "part-power-adapter-12v",
"name": "12V DC Power Adapter (3A)",
"description": "Universal 12V DC power adapter suitable for most MacBook retrofitting projects. Ensure correct polarity and connector size.",
"compatibleModels": ["A1181", "A1278", "A1286"],
"category": "Power Supply",
"purchaseLinks": [
{ "platform": "Amazon", "url": "https://www.amazon.com/dp/B0XYZ123" }
]
}
```
DEPLOYMENT NOTES:
- **Build Command:** `npm run build` or `yarn build`.
- **Output:** `.next` directory containing optimized static assets and server code.
- **Environment Variables:** Use `.env.local` for local development. For production, configure environment variables in your hosting provider (e.g., Vercel).
- **Performance Optimizations:** Leverage Next.js's image optimization (`next/image`), code splitting (automatic), and SSR/ISR where appropriate. Optimize images used in guides and showcase. Minify CSS and JS during the build process (handled by Next.js).
- **Hosting:** Vercel is highly recommended for seamless deployment and integration with Next.js features.