You are an expert AI assistant tasked with building a Single Page Application (SPA) for a platform dedicated to celebrating and guiding users through the resurgence of wired headphones. The application, tentatively named 'Sesin Sade Hali: Kablolu Kulaklık Rehberi' (The Simple State of Sound: Wired Headphone Guide), aims to be the definitive resource for consumers seeking superior audio quality, technological simplicity, and a conscious alternative to the prevailing Bluetooth trend. This prompt will serve as a comprehensive blueprint for generating the entire frontend codebase using React and Tailwind CSS, focusing on a clean, intuitive, and responsive user experience.
## PROJECT OVERVIEW:
The core problem this application addresses is the underrepresentation and potential neglect of high-quality wired headphones in the current market narrative, which is heavily dominated by wireless alternatives. While wired headphones offer significant advantages in sound fidelity, latency, and simplicity, consumers often lack easily accessible, reliable information to make informed purchasing decisions. 'Sesin Sade Hali' will provide in-depth reviews, comparative tools, curated buying guides, and a community platform for enthusiasts. The core value proposition is to empower users to rediscover and embrace the superior audio experience and straightforward technology of wired headphones, positioning it as a deliberate and informed choice rather than an outdated option.
## TECH STACK:
- **Framework:** React (using Vite for a fast development environment)
- **Styling:** Tailwind CSS (for utility-first, rapid UI development)
- **State Management:** Zustand (lightweight, performant, and easy to integrate)
- **Routing:** React Router DOM (for client-side navigation)
- **Data Fetching:** Axios (for making API requests, if a backend is introduced later, otherwise mock data)
- **Form Handling:** React Hook Form (for efficient and clean form management)
- **Icons:** Heroicons (for a consistent and clean icon set)
## CORE FEATURES:
1. **Product Reviews Section:**
* **User Flow:** Users navigate to the 'Reviews' section. They can browse reviews via cards displaying product image, name, and a brief summary. Clicking a card leads to a detailed review page. Filtering and sorting options (by rating, date, category) should be available.
* **Details:** Each review page will feature high-resolution product images, a detailed technical specification breakdown, pros and cons, an in-depth analysis of sound quality, comfort, build quality, and a final verdict. A rating out of 5 stars will be prominently displayed.
2. **Comparison Tool:**
* **User Flow:** Users can select multiple headphone models (e.g., up to 4) from a searchable list or their saved items. The tool will display a side-by-side comparison table highlighting key specifications, price, and user ratings. A clear visual indicator will show which product excels in each category.
* **Details:** The comparison interface should be intuitive, allowing users to easily add or remove products. Key comparison metrics include: Driver Size, Frequency Response, Impedance, Sensitivity, Cable Length, Connector Type, Weight, Price Range, and Average User Rating.
3. **Buying Guides & Recommendations:**
* **User Flow:** Users can access curated guides categorized by use-case (e.g., 'Best Budget Wired Headphones', 'Audiophile Recommendations', 'For Gaming', 'For Travel') or budget. Each guide will present a list of recommended products with brief explanations of why they are suitable. Filtering options within guides (e.g., by price, brand) will be available.
* **Details:** These guides should be written in an engaging and informative tone, offering practical advice beyond just technical specs. Links to the full reviews and potentially affiliate links (for monetization) will be included.
4. **Community Forum/Discussion (Optional for MVP, but good to plan):**
* **User Flow:** A simple section where users can post questions, share their experiences, and discuss wired headphones. Moderation would be key.
* **Details:** Basic functionality: creating posts, commenting, upvoting/downvoting.
5. **User Accounts (for saving comparisons/favorites):**
* **User Flow:** Users can register/login to save their favorite products, create custom comparison lists, and potentially track their favorite reviews.
* **Details:** Minimal profile management. Focus on core saving functionality.
## UI/UX DESIGN:
- **Layout:** A clean, minimalist, single-page layout. A persistent header will contain the logo and main navigation (Reviews, Compare, Guides, Login/Profile). A footer will contain essential links (About, Contact, Privacy Policy).
- **Color Palette:** Primary: Deep Navy Blue (#1A202C). Secondary: Teal Green (#38A169) for accents and calls to action. Neutrals: White (#FFFFFF), Light Gray (#F7FAFC), Dark Gray (#2D3748) for text and backgrounds. Ensure high contrast for readability.
- **Typography:** Use a sans-serif font like Inter or Poppins for body text and headings. Maintain a clear hierarchy using font weights and sizes. Example: Headings H1, H2, H3; Body text size 16px; Secondary text 14px.
- **Responsive Design:** Mobile-first approach. Use Tailwind's responsive modifiers (sm:, md:, lg:, xl:) extensively. Ensure optimal viewing and interaction on all screen sizes, from small mobile devices to large desktop monitors. Navigation should adapt (e.g., hamburger menu on mobile).
- **Component Structure:** A clear separation of concerns. Header, Footer, Navigation components. Page-level components (ReviewsPage, ComparePage, GuidesPage). Feature-specific components (ReviewCard, ComparisonTable, FilterSidebar, ProductListItem).
## COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing using React Router.
- **`Header.jsx`:** Contains logo, navigation links, search bar (optional for MVP), user login/profile button. Props: `navItems` (array of objects).
- **`Footer.jsx`:** Contains copyright info and utility links. Props: None.
- **`HomePage.jsx`:** Landing page, potentially featuring featured reviews or a call to action to explore the platform.
- **`ReviewsPage.jsx`:** Displays a list of product reviews. Manages filtering and sorting state. Props: None (manages its own state or fetches data).
- **`ReviewCard.jsx`:** Displays a summary of a single review. Props: `review` (object: {id, title, imageUrl, summary, rating}).
- **`FilterSidebar.jsx`:** Allows filtering reviews by category, rating, etc. Props: `onFilterChange` (function).
- **`ProductDetailPage.jsx`:** Displays the full details of a single product review. Props: `productId` (from URL param).
- **`ProductGallery.jsx`:** Displays product images. Props: `images` (array).
- **`TechSpecs.jsx`:** Displays technical specifications. Props: `specs` (object).
- **`ComparePage.jsx`:** The comparison tool interface. Manages the list of products to compare. Props: None (manages state internally).
- **`ComparisonTable.jsx`:** Renders the side-by-side comparison. Props: `products` (array of product objects).
- **`ProductSelector.jsx`:** Component to search and add products for comparison. Props: `onProductAdd` (function), `products` (array).
- **`GuidesPage.jsx`:** Displays various buying guides. Props: None.
- **`GuideCard.jsx`:** Summary card for a buying guide. Props: `guide` (object: {id, title, description, imageUrl}).
- **`LoginPage.jsx` / `RegisterPage.jsx`:** User authentication forms.
- **`UserProfilePage.jsx`:** Displays user-saved items and settings.
## DATA MODEL:
- **Mock Data Structure (JavaScript Array of Objects):**
```javascript
const mockReviews = [
{
id: 'rev-001',
name: 'AudioPhonic X1',
brand: 'AudioPhonic',
imageUrl: '/images/audiophonic-x1.jpg',
summary: 'Exceptional clarity and balanced sound profile, a true audiophile gem.',
rating: 4.8,
price: 199.99,
category: 'Audiophile',
pros: ['Stunning detail retrieval', 'Comfortable fit', 'Durable build quality'],
cons: ['High impedance requires a dedicated amp', 'Premium price point'],
specs: {
driverType: '50mm Beryllium',
impedance: '300 Ohms',
sensitivity: '98 dB/mW',
frequencyResponse: '10Hz - 40kHz',
cableLength: '2m detachable',
connector: '3.5mm + 6.3mm adapter',
weight: '350g'
},
detailedDescription: 'The AudioPhonic X1 represents the pinnacle of...',
datePublished: '2023-10-26'
},
// ... more review objects
];
const mockGuides = [
{
id: 'guide-001',
title: 'Best Budget Wired Headphones Under $50',
description: 'Discover amazing sound without breaking the bank. Our top picks for affordable wired earbuds and headphones.',
imageUrl: '/images/budget-guide.jpg',
category: 'Budget'
},
// ... more guide objects
];
```
- **State Management (Zustand):**
- `useReviewStore`: manages fetched reviews, current filters, sorting options.
- `useComparisonStore`: manages the list of products currently added to the comparison tool.
- `useUserStore`: manages user authentication status, saved items (favorites, comparison lists).
## ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle scale-up or shadow effect on `ReviewCard` and `GuideCard` components.
- **Transitions:** Smooth transitions for opening/closing filter sidebars, expanding/collapsing sections on product detail pages. Use Tailwind's `transition` utility.
- **Loading States:** Implement skeleton loaders or spinners for reviews and comparison data fetching. Use a placeholder component or conditional rendering.
- **Micro-interactions:** Visual feedback on button clicks, adding items to comparison, form submissions.
- **Page Transitions:** For a SPA feel, implement subtle fade or slide transitions between main sections using React Router's `<TransitionGroup>` or similar libraries if needed, though keep it minimal for performance.
## EDGE CASES:
- **Empty States:** Design visually appealing empty states for when there are no reviews, no comparison items selected, or no search results. Include clear calls to action (e.g., 'Add products to compare').
- **Error Handling:** Gracefully handle API errors or data loading issues. Display user-friendly error messages. Implement try-catch blocks for data fetching.
- **Validation:** For any forms (login, registration, contact), implement client-side validation using React Hook Form, providing clear error messages.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure sufficient color contrast. Add `alt` attributes to images. Make sure all interactive elements are keyboard navigable and have clear focus states.
- **Responsiveness:** Thoroughly test layouts and interactions on various devices and screen sizes.
## SAMPLE DATA (More detailed examples):
```javascript
// Sample data for a specific review
{
id: 'rev-002',
name: 'Studio Pro M50',
brand: 'SoundTech',
imageUrl: '/images/studio-pro-m50.jpg',
summary: 'A popular choice for studio monitoring and casual listening, offering a good balance of accuracy and punch.',
rating: 4.5,
price: 129.00,
category: 'Studio Monitoring',
pros: ['Accurate sound reproduction', 'Comfortable for long sessions', 'Foldable design'],
cons: ['Slightly V-shaped signature might not suit purists', 'Cable is not detachable'],
specs: {
driverType: '45mm Dynamic',
impedance: '32 Ohms',
sensitivity: '97 dB/mW',
frequencyResponse: '15Hz - 20kHz',
cableLength: '3m (attached, coiled)',
connector: '6.3mm (with 3.5mm adapter included)',
weight: '285g'
},
detailedDescription: 'The SoundTech Studio Pro M50 has been a staple for many years...',
datePublished: '2023-09-15'
}
// Sample data for another review
{
id: 'rev-003',
name: 'CommuteBuds Lite',
brand: 'UrbanSound',
imageUrl: '/images/commutebuds-lite.jpg',
summary: 'Lightweight and affordable earbuds perfect for daily commutes and general use.',
rating: 3.9,
price: 39.99,
category: 'Everyday Use',
pros: ['Very affordable', 'Lightweight and comfortable', 'Decent sound for the price'],
cons: ['Bass can be a bit muddy', 'Build quality feels basic'],
specs: {
driverType: '30mm Dynamic',
impedance: '16 Ohms',
sensitivity: '102 dB/mW',
frequencyResponse: '20Hz - 18kHz',
cableLength: '1.2m',
connector: '3.5mm',
weight: '150g'
},
detailedDescription: 'For those who need a no-fuss audio solution for their daily travels...',
datePublished: '2023-11-01'
}
// Sample data for a comparison selection
const productsToCompare = [
mockReviews[0], // AudioPhonic X1
mockReviews[1] // Studio Pro M50
];
// Sample data for a guide
{
id: 'guide-002',
title: 'Choosing Your First Audiophile Headphones',
description: 'A beginner's guide to understanding terms like impedance, frequency response, and finding headphones that suit your listening style.',
imageUrl: '/images/audiophile-guide-beginner.jpg',
category: 'Audiophile'
}
// Sample data for user profile
const userProfile = {
userId: 'user-123',
username: 'AudioEnthusiast',
savedFavorites: ['rev-001', 'rev-003'],
savedComparisons: [ ['rev-001', 'rev-002'] ]
};
```
## DEPLOYMENT NOTES:
- **Build Tool:** Vite is recommended for its speed and ease of configuration (`npm run build`).
- **Environment Variables:** Use `.env` files for API keys (if any) or configuration settings. Vite supports `import.meta.env.VITE_` variables.
- **Performance Optimizations:** Code splitting (handled well by Vite/React Router), image optimization (use appropriate formats and sizes), lazy loading components where necessary.
- **Hosting:** Platforms like Vercel, Netlify, or GitHub Pages are suitable for deploying static SPAs. Configure build settings to point to the Vite build output (`dist` folder).