## AI Master Prompt: Brutal Stand - Custom Hardware Design & E-commerce Platform
**PROJECT OVERVIEW:**
The Brutal Stand is a single-page e-commerce application (SPA) designed for users to discover, customize, and purchase unique, artistically designed hardware products, inspired by the aesthetic and concept of the Hacker News "Brutalist Concrete Laptop Stand" (Show HN). The platform aims to bridge the gap between functional hardware and artistic expression, allowing users to select from a curated catalog of items like laptop stands, phone stands, and desk accessories, with options for customization in materials, colors, and additional features. The core value proposition is offering aesthetically distinct, high-quality, and potentially personalized hardware that stands out from mass-produced alternatives.
**TECH STACK:**
- **Frontend Framework:** React.js (v18+ with Hooks and Context API)
- **Styling:** Tailwind CSS (v3+) for rapid UI development and utility-first styling.
- **State Management:** Zustand or Jotai for lightweight and efficient global state management, suitable for a single-page application.
- **Routing:** React Router DOM for managing navigation within the SPA.
- **Form Handling:** React Hook Form for efficient and performant form management, especially for customization options.
- **Animation:** Framer Motion for engaging UI animations, transitions, and micro-interactions.
- **HTTP Client:** Axios for making API requests (if backend integration is planned later, though MVP focuses on mock data/local storage).
- **Build Tool:** Vite for fast development server and optimized builds.
**CORE FEATURES:**
1. **Product Discovery Page:**
* **User Flow:** User lands on the homepage and sees a curated grid or list of available products. Each product card displays an image, name, brief description, and price. Users can click on a product to view details or proceed to customization.
* **Details:** Infinite scroll or pagination for loading more products. Filtering and sorting options (e.g., by category, price, style) should be considered for future iterations but not essential for MVP.
2. **Product Customization Module:**
* **User Flow:** After selecting a product, the user is taken to a customization view. This view presents various options dynamically based on the product type (e.g., for a laptop stand: material - concrete, wood, metal; color - grey, black, natural; finish - matte, polished; add-ons - USB ports, plant pot).
* **Interaction:** Users select options via radio buttons, dropdowns, color pickers, or interactive visual elements. A real-time preview of the customized product updates as options are changed. A summary of selected options and the updated price is displayed.
* **Example Customization (Brutalist Laptop Stand):
* **Material:** Concrete (default), Wood, Metal
* **Color (Concrete):** Raw Grey, Black, White
* **Finish:** Matte (default), Polished
* **Add-ons:** USB Ports (2x USB-A), Integrated Plant Pot, Exposed Rebar Detail (visual only)
* **Price Calculation:** Base price + cost of selected add-ons/premium materials.
3. **Shopping Cart:**
* **User Flow:** After customizing, the user can add the product to their cart. The cart icon (usually in the header) updates with the item count. Clicking the cart icon opens a sidebar or modal displaying all items, quantities, individual prices, and the total amount. Users can update quantities or remove items.
* **Functionality:** Persists cart items using `localStorage` for the MVP.
4. **Checkout Process (Simplified):**
* **User Flow:** From the cart, the user proceeds to checkout. For MVP, this involves a simple form for basic contact information (name, email) and simulated payment confirmation. No actual payment processing in MVP.
* **Information:** Collects necessary details for order fulfillment.
5. **Order Confirmation / Thank You Page:**
* **User Flow:** Upon simulated checkout completion, the user is redirected to a confirmation page displaying the order summary and a unique order ID. It provides a "thank you" message and basic instructions on what to expect next (e.g., "You will receive an email confirmation shortly").
**UI/UX DESIGN:**
- **Layout:** Single-page application layout. Header with logo, navigation (minimal, e.g., Products, Cart), and cart icon. Main content area dynamically displays product grids, customization forms, or cart/checkout views. Footer with essential links (About, Contact, FAQ).
- **Color Palette:** Inspired by brutalism and industrial design. Primary colors: Shades of grey (e.g., `#1F2937` - dark grey, `#6B7280` - medium grey, `#D1D5DB` - light grey), potentially with a contrasting accent color for CTAs (e.g., a muted rust orange `#B45309` or a deep industrial blue `#1E40AF`). Neutral backgrounds (`#FFFFFF` or very light grey).
- **Typography:** Use a clean, modern sans-serif font for body text (e.g., Inter, Roboto) and potentially a slightly more distinctive font for headings or branding elements that evokes a sense of solidity or structure (e.g., Oswald, Montserrat).
- **Component Styling:** Tailwind CSS utility classes will be used extensively. Focus on clean lines, strong visual hierarchy, and tactile-feeling elements. Use of `border`, `shadow`, `background` utilities to create depth and definition. Spacing utilities (`m-`, `p-`) are crucial for a balanced layout.
- **Responsive Design:** Mobile-first approach. Ensure the layout adapts gracefully to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (e.g., `md:`, `lg:`) for adjustments. Grids should reflow, forms should stack vertically on smaller screens.
**COMPONENT BREAKDOWN:**
- **`App.js` (or `main.jsx`):** Root component, sets up routing and global context/state providers.
- **`Layout.js`:** Wrapper component containing Header, Footer, and main content area (`children`).
- **`Header.js`:** Displays logo, navigation links, and CartWidget.
- **`Footer.js`:** Displays static links.
- **`ProductListPage.js`:** Displays `ProductGrid`. Fetches/receives product data.
- **`ProductGrid.js`:** Maps over product data and renders `ProductCard` components.
- **`ProductCard.js`:** Displays individual product summary (image, title, price). Receives `product` object as prop.
- **`ProductDetailPage.js`:** Displays `ProductCustomizer` and potentially related products.
- **`ProductCustomizer.js`:** Main component for customization. Manages selected options state, displays preview, options controls, and "Add to Cart" button.
- **`CustomizationOptions.js`:** Renders controls (radio buttons, color pickers etc.) for each customizable attribute. Receives `options`, `currentConfig`, and `onOptionChange` handler.
- **`ProductPreview.js`:** Renders a visual representation of the product based on `currentConfig`. Could be static images combined or a simplified 3D model placeholder.
- **`CartWidget.js`:** Displays item count. Can trigger `CartSidebar` or `CartModal`.
- **`CartSidebar.js` / `CartModal.js`:** Displays cart items. Receives `cartItems` and functions to update/remove items.
- **`CartItem.js`:** Displays details for a single item in the cart.
- **`CheckoutPage.js`:** Form for collecting user details.
- **`CheckoutForm.js`:** Handles form state and submission using React Hook Form.
- **`OrderConfirmationPage.js`:** Displays order success message and summary.
- **`Button.js`:** Reusable button component.
- **`Input.js` / `Select.js` / `ColorPicker.js`:** Reusable form input components.
**DATA MODEL (Mock Data & State):**
- **`products` Array:** Each object represents a product.
```json
[
{
"id": "prod_001",
"name": "Brutalist Concrete Laptop Stand",
"description": "Raw concrete laptop stand with integrated plant pot and USB ports. Heavy and stylish.",
"category": "Laptop Stand",
"basePrice": 120.00,
"imageUrl": "/images/brutalist-stand-main.jpg",
"customizableOptions": [
{
"id": "material",
"label": "Material",
"type": "select",
"options": [
{ "value": "concrete_raw", "label": "Raw Concrete", "priceModifier": 0 },
{ "value": "wood_oak", "label": "Oak Wood", "priceModifier": 30 },
{ "value": "metal_steel", "label": "Steel", "priceModifier": 50 }
]
},
{
"id": "color_concrete",
"label": "Concrete Color",
"type": "color",
"dependency": {"optionId": "material", "value": "concrete_raw"},
"options": [
{ "value": "#CCCCCC", "label": "Light Grey", "priceModifier": 0 },
{ "value": "#333333", "label": "Black", "priceModifier": 5 },
{ "value": "#FFFFFF", "label": "White", "priceModifier": 5 }
]
},
{
"id": "usb_ports",
"label": "USB Ports",
"type": "checkbox",
"options": [ { "value": "yes", "label": "Include 2x USB-A Ports", "priceModifier": 25 } ]
},
{
"id": "plant_pot",
"label": "Plant Pot",
"type": "checkbox",
"options": [ { "value": "yes", "label": "Integrated Plant Pot", "priceModifier": 15 } ]
}
]
},
// ... more products
]
```
- **`cartItems` State:** Array stored in Zustand/Jotai or `localStorage`.
```json
[
{
"productId": "prod_001",
"customization": {
"material": "concrete_raw",
"color_concrete": "#333333",
"usb_ports": "yes"
},
"quantity": 1,
"price": 150.00 // Calculated price
}
]
```
- **`checkoutInfo` State:** Object for user details collected during checkout.
- **Global State:** Use Zustand/Jotai to manage `cartItems`, potentially selected product/configuration during customization, and fetched product data.
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fades or slides between different views (Product List -> Detail -> Cart) using `Framer Motion`'s `AnimatePresence` and `motion.div`.
- **Button Hovers:** Slight scale-up or background color change on interactive elements like buttons and links.
- **Add to Cart:** A brief visual confirmation (e.g., the item briefly "flies" to the cart icon, or a small success message appears).
- **Loading States:** Skeletons or spinners for product images and data fetching (if applicable). `Framer Motion` can be used to animate these loading indicators.
- **Customization Preview:** Smooth updates to the product preview image as options change.
- **Form Interactions:** Input focus states, validation feedback animations.
**EDGE CASES & ACCESSIBILITY (a11y):
- **Empty States:** Display user-friendly messages and visuals for an empty product list or an empty cart (e.g., "No products found", "Your cart is empty. Start shopping!").
- **Error Handling:** Graceful handling of potential errors (e.g., failed data fetch, invalid form input). Display clear, user-friendly error messages.
- **Validation:** Client-side validation for all forms (customization, checkout) using React Hook Form. Ensure required fields are filled and formats are correct.
- **Accessibility:** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigation should be fully supported. Color contrast ratios must meet WCAG AA standards.
- **Responsiveness:** Test thoroughly on various devices and screen sizes.
- **No Product Selected:** Prevent adding to cart if required customization options are not selected.
**SAMPLE DATA (Mock Data):**
```json
[
{
"id": "prod_001",
"name": "Brutalist Concrete Laptop Stand",
"description": "Raw concrete laptop stand with integrated plant pot and USB ports. Heavy and stylish.",
"category": "Laptop Stand",
"basePrice": 120.00,
"imageUrl": "/images/brutalist-stand-main.jpg",
"customizableOptions": [
{
"id": "material",
"label": "Material",
"type": "select",
"options": [
{ "value": "concrete_raw", "label": "Raw Concrete", "priceModifier": 0 },
{ "value": "wood_oak", "label": "Oak Wood", "priceModifier": 30 },
{ "value": "metal_steel", "label": "Steel", "priceModifier": 50 }
]
},
{
"id": "color_concrete",
"label": "Concrete Color",
"type": "color",
"dependency": {"optionId": "material", "value": "concrete_raw"},
"options": [
{ "value": "#CCCCCC", "label": "Light Grey", "priceModifier": 0 },
{ "value": "#333333", "label": "Black", "priceModifier": 5 },
{ "value": "#FFFFFF", "label": "White", "priceModifier": 5 }
]
},
{
"id": "usb_ports",
"label": "USB Ports",
"type": "checkbox",
"options": [ { "value": "yes", "label": "Include 2x USB-A Ports", "priceModifier": 25 } ]
},
{
"id": "plant_pot",
"label": "Plant Pot",
"type": "checkbox",
"options": [ { "value": "yes", "label": "Integrated Plant Pot", "priceModifier": 15 } ]
}
]
},
{
"id": "prod_002",
"name": "Minimalist Metal Phone Stand",
"description": "Sleek and durable metal stand for your smartphone.",
"category": "Phone Stand",
"basePrice": 45.00,
"imageUrl": "/images/metal-phone-stand.jpg",
"customizableOptions": [
{
"id": "material_phone",
"label": "Material",
"type": "select",
"options": [
{ "value": "aluminum", "label": "Aluminum", "priceModifier": 0 },
{ "value": "stainless_steel", "label": "Stainless Steel", "priceModifier": 15 }
]
},
{
"id": "color_metal",
"label": "Color",
"type": "color",
"options": [
{ "value": "#808080", "label": "Silver", "priceModifier": 0 },
{ "value": "#000000", "label": "Black", "priceModifier": 5 }
]
}
]
},
{
"id": "prod_003",
"name": "Textured Wood Desk Organizer",
"description": "Handcrafted wooden organizer for your desk essentials.",
"category": "Desk Accessory",
"basePrice": 75.00,
"imageUrl": "/images/wood-organizer.jpg",
"customizableOptions": [
{
"id": "wood_type",
"label": "Wood Type",
"type": "select",
"options": [
{ "value": "walnut", "label": "Walnut", "priceModifier": 0 },
{ "value": "maple", "label": "Maple", "priceModifier": 10 }
]
},
{
"id": "engraving",
"label": "Personalization",
"type": "text",
"placeholder": "Enter text for engraving",
"priceModifier": 20
}
]
}
]
```
**DEPLOYMENT NOTES:**
- **Build Command:** `npm run build` (or `yarn build` if using Yarn).
- **Output Directory:** Default Vite output is `dist/`. Configure server to serve static files from this directory.
- **Environment Variables:** Use `.env` files for managing variables like API endpoints (if used later). For MVP, no critical environment variables are needed.
- **Performance Optimizations:** Code splitting via React Router, lazy loading components, image optimization (using appropriate formats and sizes), memoization (`React.memo`, `useMemo`, `useCallback`) for expensive computations or components.
- **Hosting:** Static hosting platforms like Vercel, Netlify, GitHub Pages are suitable for this SPA.