PROJECT OVERVIEW:
Develop a Next.js MVP application for a conceptual hardware product line that addresses the discontinuation of Apple's Mac Pro. This application will serve as the primary interface for users to configure, learn about, and pre-order a new line of modular, upgradeable professional workstations. The core value proposition is offering ultimate customization, future-proofing, and sustained performance for creative professionals and tech enthusiasts who were left without a clear high-end, upgradeable Apple desktop option.
TECH STACK:
- Frontend: React (Next.js App Router)
- Styling: Tailwind CSS
- ORM: Drizzle ORM (PostgreSQL)
- UI Components: shadcn/ui
- State Management: Zustand or React Context API
- Authentication: NextAuth.js (Credentials Provider for MVP, with considerations for OAuth)
- Database: PostgreSQL
- Deployment: Vercel
- Other: React Hook Form, zod for validation, React Query for data fetching, possibly a charting library like Recharts for performance monitoring.
DATABASE SCHEMA:
1. `users` table:
- `id` (UUID, primary key)
- `name` (VARCHAR)
- `email` (VARCHAR, unique)
- `emailVerified` (TIMESTAMP)
- `image` (TEXT)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
2. `products` table:
- `id` (UUID, primary key)
- `name` (VARCHAR)
- `description` (TEXT)
- `category` (VARCHAR) -- e.g., 'Base Unit', 'CPU Module', 'GPU Module', 'RAM Module', 'Storage Module'
- `basePrice` (INTEGER)
- `imageUrl` (TEXT)
- `isConfigurable` (BOOLEAN, default false)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
3. `productVariants` table:
- `id` (UUID, primary key)
- `productId` (UUID, foreign key to `products.id`)
- `name` (VARCHAR) -- e.g., 'Core i9 14900K', 'RTX 4090 24GB', '32GB DDR5 RAM', '1TB NVMe SSD'
- `specs` (JSONB) -- e.g., {'cores': 24, 'clockSpeed': '5.8GHz'}, {'memory': '24GB', 'type': 'GDDR6X'}
- `priceModifier` (INTEGER) -- added to base price or variant price
- `stock` (INTEGER)
- `isAvailable` (BOOLEAN, default true)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
4. `configurations` table:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `configurationName` (VARCHAR, optional)
- `totalPrice` (INTEGER)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
5. `configurationItems` table:
- `id` (UUID, primary key)
- `configurationId` (UUID, foreign key to `configurations.id`)
- `productId` (UUID, foreign key to `products.id`)
- `productVariantId` (UUID, foreign key to `productVariants.id`, optional)
- `quantity` (INTEGER, default 1)
6. `orders` table:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `configurationId` (UUID, foreign key to `configurations.id`)
- `orderStatus` (VARCHAR) -- e.g., 'Pending', 'Processing', 'Shipped', 'Delivered', 'Cancelled'
- `shippingAddress` (JSONB)
- `paymentIntentId` (VARCHAR, optional)
- `totalAmount` (INTEGER)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
7. `forumPosts` table:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `title` (VARCHAR)
- `content` (TEXT)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
8. `forumComments` table:
- `id` (UUID, primary key)
- `postId` (UUID, foreign key to `forumPosts.id`)
- `userId` (UUID, foreign key to `users.id`)
- `content` (TEXT)
- `createdAt` (TIMESTAMP, default NOW())
- `updatedAt` (TIMESTAMP)
CORE FEATURES & USER FLOW:
1. **User Authentication (Sign Up/Login):**
* Flow: User lands on the homepage -> Clicks 'Sign Up' or 'Login' -> Presented with a modal/page for email/password or OAuth (Google/Apple) -> Upon successful authentication, redirected to dashboard or homepage with logged-in state.
* MVP Focus: Email/Password using NextAuth.js Credentials Provider.
* Edge Cases: Invalid credentials, existing email, password reset flow (future).
2. **Product Catalog & Details:**
* Flow: Logged-in user navigates to 'Products' page -> Sees a list of product categories (Base Unit, CPU, GPU, etc.) -> Clicks a category -> Views available product variants (e.g., specific CPU models) with prices and basic specs -> Clicks a product variant for detailed specs and an 'Add to Configuration' button.
* Data Fetching: Fetch product data from the `products` and `productVariants` tables.
3. **Modular Configuration Builder:**
* Flow: User clicks 'Create New Configuration' or adds a product to an existing configuration -> The application dynamically displays compatible modules based on the current configuration (e.g., after selecting a Base Unit, compatible CPU/GPU/RAM options appear) -> User selects desired variants, and the `totalPrice` updates in real-time -> User can save the configuration, name it, and add it to their cart.
* Logic: Frontend logic will manage compatibility rules (e.g., PSU wattage, motherboard slots, thermal limits) and calculate the total price.
* Backend Interaction: Save configurations to the `configurations` and `configurationItems` tables.
* Edge Cases: Incompatible module selections, out-of-stock variants.
4. **Shopping Cart & Checkout (Pre-order):**
* Flow: User navigates to the cart -> Reviews their saved configuration(s) -> Clicks 'Proceed to Checkout' -> Enters shipping information (MVP: basic form, future: address validation) -> Completes pre-order (MVP: simulates payment, future: integrates Stripe/payment gateway) -> Receives order confirmation.
* Backend Interaction: Create an order in the `orders` table, linking to the `configurationId`.
* Edge Cases: Cart modification during checkout, payment failure.
5. **Community Forum:**
* Flow: User navigates to the 'Forum' page -> Sees a list of discussion threads -> Can create a new thread (title, content) or reply to existing threads -> View posts and replies.
* Backend Interaction: CRUD operations on `forumPosts` and `forumComments` tables.
* Edge Cases: Content moderation (future), nested replies.
API & DATA FETCHING:
- Use Next.js API Routes (App Router) or Server Actions for backend logic.
- All data fetching on the client-side should use React Query for caching, background updates, and error handling.
- Example API Endpoints (conceptual, using Server Actions or Route Handlers):
* `POST /api/auth/signup` | `POST /api/auth/login`: User authentication.
* `GET /api/products`: Fetch all products and their variants.
* `GET /api/products/[category]`: Fetch products by category.
* `POST /api/configurations`: Create a new configuration.
* `PUT /api/configurations/[id]`: Update an existing configuration.
* `POST /api/configurations/[id]/add-item`: Add item to configuration.
* `POST /api/orders`: Create a new order.
* `GET /api/forum/posts`: Fetch forum posts.
* `POST /api/forum/posts`: Create a new forum post.
* `POST /api/forum/posts/[id]/comments`: Add a comment to a post.
- Request/Response: Use JSON. Ensure consistent naming conventions. Validate incoming request data using `zod`.
- Server Actions: Preferred for mutations and data fetching tied directly to components within the App Router structure. Example `saveConfiguration(configurationData)`.
COMPONENT BREAKDOWN (Next.js App Router):
- `app/layout.tsx`: Root layout, includes head, providers (Auth, Theme, etc.), global styles, Tailwind setup.
- `app/page.tsx`: Homepage (Landing page introducing the concept, value prop, CTA for configuration).
- `app/dashboard/layout.tsx`: Authenticated user layout.
- `app/dashboard/page.tsx`: User dashboard (Overview of saved configurations, recent orders, quick links).
- `app/(auth)/login/page.tsx`: Login page.
- `app/(auth)/signup/page.tsx`: Sign up page.
- `app/configure/page.tsx`: Main configuration builder interface. State managed via Zustand/Context.
- Components: `ProductSelector`, `VariantSelector`, `CompatibilityChecker`, `ConfigurationSummary`.
- `app/configure/[configId]/page.tsx`: Edit existing configuration.
- `app/products/page.tsx`: Product catalog page.
- Components: `ProductCard`, `CategoryFilter`.
- `app/products/[productId]/page.tsx`: Individual product detail page.
- `app/cart/page.tsx`: Shopping cart page.
- Components: `CartItem`, `CheckoutForm`.
- `app/order-confirmation/[orderId]/page.tsx`: Order confirmation page.
- `app/forum/page.tsx`: Forum main page (list of posts).
- Components: `PostListItem`.
- `app/forum/new/page.tsx`: Create new forum post page.
- `app/forum/[postId]/page.tsx`: View individual forum post and its comments.
- Components: `CommentList`, `CommentForm`.
- `app/account/page.tsx`: User account settings (basic profile info).
- `components/ui/`: Shared UI components from shadcn/ui (Button, Card, Input, Dialog, etc.).
- `components/layout/`: Header, Footer, Sidebar (if applicable).
- `lib/`: Utility functions, API client setup, Drizzle ORM setup.
- `hooks/`: Custom React hooks (e.g., `useConfiguration`, `useAuth`).
- `context/` or `store/`: Global state management setup.
UI/UX DESIGN & VISUAL IDENTITY:
- **Design Style:** 'Modern Minimalist Tech' with subtle futuristic elements.
- **Color Palette:**
- Primary: Deep Navy Blue (`#0A192F`)
- Secondary: Dark Charcoal (`#222831`)
- Accent 1: Electric Cyan (`#00FFF5`)
- Accent 2: Cool Gray (`#8892B0`)
- Background: Near Black (`#010101`)
- Text: Off-White (`#EEEEEE`)
- **Typography:** Inter (Sans-serif) for body text, headings. Use varying weights for hierarchy.
- **Layout:** Clean, spacious layouts. Utilize a grid system (Tailwind's default). Focus on clarity and ease of navigation. Card-based design for products and configurations.
- **Responsiveness:** Mobile-first approach. Ensure all components adapt seamlessly from small mobile screens to large desktops.
- **Visual Elements:** Subtle gradient backgrounds on key sections, clean iconography, high-quality product imagery.
ANIMATIONS:
- Page Transitions: Smooth fades or slides using Next.js `useRouter` and a library like `Framer Motion` (optional, for MVP). Example: `motion.div` with `initial`, `animate`, `exit` props.
- Component Transitions: Use Tailwind CSS transitions for hover effects on buttons and cards (e.g., slight scale-up, color change).
- Loading States: Skeleton loaders or subtle spinners (e.g., from shadcn/ui) while data is fetching.
- Micro-interactions: Button click feedback, form input focus states.
EDGE CASES:
- **Authentication:** Handle unauthorized access attempts gracefully (redirect to login, display messages).
- **Empty States:** Design informative and visually appealing empty states for the dashboard, cart, and forum when no data exists.
- **Validation:** Implement robust client-side (zod + React Hook Form) and server-side validation for all forms (signup, configuration, checkout, forum).
- **Error Handling:** Global error handling mechanism (e.g., using context or a toast notification system) for API failures. Specific error messages for invalid configurations or checkout issues.
- **Stock Management:** Clearly indicate when product variants are out of stock and prevent them from being added to configurations.
- **Compatibility:** Prevent users from adding incompatible components during configuration, providing clear explanations.
SAMPLE DATA:
1. **Base Unit Product:**
```json
{
"id": "uuid-base-1",
"name": "ProWorkstation Base Chassis",
"category": "Base Unit",
"basePrice": 250000, // 2500 USD
"imageUrl": "/images/base-unit.png",
"isConfigurable": true
}
```
2. **CPU Variant:**
```json
{
"id": "uuid-cpu-1",
"productId": "uuid-base-1", // Assuming it links to a CPU product category
"name": "Apex Core X1 (16-Core)",
"priceModifier": 80000, // 800 USD
"specs": {"cores": 16, "clockSpeed": "4.5GHz", "cache": "64MB"},
"stock": 50,
"isAvailable": true
}
```
3. **GPU Variant:**
```json
{
"id": "uuid-gpu-1",
"productId": "uuid-gpu-2", // Assuming it links to a GPU product category
"name": "Quantum Graphics Pro (32GB VRAM)",
"priceModifier": 150000, // 1500 USD
"specs": {"vram": "32GB GDDR6X", "computeUnits": 128},
"stock": 30,
"isAvailable": true
}
```
4. **Saved Configuration:**
```json
{
"id": "uuid-config-1",
"userId": "uuid-user-1",
"configurationName": "My Video Editing Rig",
"totalPrice": 480000, // 4800 USD
"configurationItems": [
{"productId": "uuid-base-1", "productVariantId": null, "quantity": 1},
{"productId": "uuid-cpu-1", "productVariantId": "uuid-cpu-1", "quantity": 1},
{"productId": "uuid-gpu-1", "productVariantId": "uuid-gpu-1", "quantity": 1},
{"productId": "uuid-ram-1", "productVariantId": "uuid-ram-2", "quantity": 2} // 2x 32GB RAM sticks
]
}
```
5. **Forum Post:**
```json
{
"id": "uuid-post-1",
"userId": "uuid-user-2",
"title": "Best CPU for 8K Video Editing?",
"content": "Looking for recommendations on the most suitable CPU module for handling 8K footage in Premiere Pro. Considering options X, Y, Z...",
"createdAt": "2024-03-15T10:00:00Z"
}
```
6. **Forum Comment:**
```json
{
"id": "uuid-comment-1",
"postId": "uuid-post-1",
"userId": "uuid-user-1",
"content": "I'd recommend the Apex Core X1, it handles my 8K projects smoothly!",
"createdAt": "2024-03-15T11:30:00Z"
}
```
7. **Order:**
```json
{
"id": "uuid-order-1",
"userId": "uuid-user-1",
"configurationId": "uuid-config-1",
"orderStatus": "Pending",
"shippingAddress": {"street": "123 Main St", "city": "Anytown", "zip": "12345", "country": "USA"},
"totalAmount": 480000,
"createdAt": "2024-03-16T09:00:00Z"
}
```
8. **RAM Variant (Example):**
```json
{
"id": "uuid-ram-2",
"productId": "uuid-ram-1", // RAM Product Category
"name": "64GB DDR5 RAM Kit (2x32GB)",
"priceModifier": 40000, // 400 USD
"specs": {"capacity": "64GB", "type": "DDR5", "speed": "6000MHz"},
"stock": 100,
"isAvailable": true
}
```
**TURKISH TRANSLATIONS:**
- **Titles:** Ana Sayfa, Ürünler, Yapılandır, Sepetim, Siparişlerim, Forum, Hesabım, Giriş Yap, Kayıt Ol
- **Buttons:** Yapılandır, Sepete Ekle, Satın Al, Siparişi Tamamla, Yeni Konu Aç, Gönder, Düzenle, Sil
- **Short Descriptions:** Profesyonel iş istasyonunuzu özelleştirin. Geleceğe hazır, modüler donanım. Toplulukla bağlantı kurun. Siparişinizi gözden geçirin. Profilinizi güncelleyin.
- **Labels:** Ürün Adı, Fiyat, Açıklama, Miktar, Adres, Ödeme Yöntemi, Konu Başlığı, Mesaj
- **Placeholders:** E-posta adresiniz, Şifreniz, Arama yapın...