You are a seasoned full-stack developer and AI architect tasked with building a comprehensive, multi-page Next.js MVP application. The application, codenamed 'DC Grid Pro', aims to assist data centers in transitioning from traditional AC power infrastructure to more efficient DC power systems, especially for next-generation AI workloads.
**1. PROJECT OVERVIEW:**
DC Grid Pro is a SaaS platform designed to simplify and optimize the complex transition of data centers from AC to DC power infrastructure. The core problem it solves is the inefficiency, complexity, and high cost associated with traditional AC-to-DC power conversions, which are becoming a bottleneck for power-hungry AI compute. Our value proposition is to provide data center operators with data-driven insights, simulation tools, and management features to facilitate a smooth, efficient, and cost-effective migration to DC power, thereby reducing energy consumption, improving reliability, and enabling higher compute densities.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **UI Library:** shadcn/ui (for accessible, reusable components)
- **Styling:** Tailwind CSS (for utility-first styling)
- **ORM:** Drizzle ORM (for type-safe database interactions)
- **Database:** PostgreSQL (recommended, but adaptable to others)
- **Authentication:** NextAuth.js (or a similar robust solution for user management)
- **State Management:** React Context API or Zustand (for global state, component-level state via useState/useReducer)
- **Form Handling:** React Hook Form with Zod for validation
- **Charting:** Recharts or Chart.js for data visualization
- **Deployment:** Vercel (recommended)
- **Other:** TypeScript, ESLint, Prettier
**3. DATABASE SCHEMA:**
We will use Drizzle ORM with PostgreSQL.
**Users Table:**
- `id` (UUID, primary key)
- `name` (TEXT)
- `email` (TEXT, unique)
- `emailVerified` (TIMESTAMP with time zone)
- `image` (TEXT)
- `createdAt` (TIMESTAMP with time zone, default now())
- `updatedAt` (TIMESTAMP with time zone, default now())
**DataCenters Table:**
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to Users.id)
- `name` (TEXT)
- `location` (TEXT)
- `size_sqft` (INTEGER) // Size in square feet
- `currentPowerCapacity_kva` (INTEGER) // Current capacity in kVA
- `currentPUE` (DECIMAL(3,2)) // Current Power Usage Effectiveness
- `estimatedAI_Workload_Growth` (DECIMAL(5,2)) // Estimated AI workload growth percentage
- `createdAt` (TIMESTAMP with time zone, default now())
- `updatedAt` (TIMESTAMP with time zone, default now())
**PowerInfrastructure Table:**
- `id` (UUID, primary key)
- `dataCenterId` (UUID, foreign key to DataCenters.id)
- `type` (VARCHAR(50)) // e.g., 'AC Distribution', 'UPS', 'Transformer', 'DC Bus'
- `model` (TEXT)
- `manufacturer` (TEXT)
- `capacity_kva` (INTEGER) // Capacity in kVA or kW
- `efficiency_percent` (DECIMAL(5,2)) // Efficiency percentage
- `voltage_in` (INTEGER) // Input voltage
- `voltage_out` (INTEGER) // Output voltage
- `current_state` (VARCHAR(50)) // e.g., 'Operational', 'Under Maintenance', 'To Be Replaced'
- `purchaseDate` (DATE)
- `warrantyExpiry` (DATE)
- `createdAt` (TIMESTAMP with time zone, default now())
- `updatedAt` (TIMESTAMP with time zone, default now())
**DC_MigrationStrategies Table:**
- `id` (UUID, primary key)
- `dataCenterId` (UUID, foreign key to DataCenters.id)
- `strategyName` (TEXT) // e.g., 'Phased Rollout', 'Full DC Conversion'
- `targetVoltage` (INTEGER) // e.g., 800V
- `estimatedCost` (INTEGER) // Estimated cost in USD
- `estimatedSavings_percent` (DECIMAL(5,2)) // Estimated annual energy savings percentage
- `implementationTimeline_months` (INTEGER)
- `conversionType` (VARCHAR(50)) // e.g., 'Hybrid AC/DC', 'Full DC'
- `notes` (TEXT)
- `createdAt` (TIMESTAMP with time zone, default now())
- `updatedAt` (TIMESTAMP with time zone, default now())
**HardwareCatalog Table:**
- `id` (UUID, primary key)
- `name` (TEXT)
- `manufacturer` (TEXT)
- `type` (VARCHAR(100)) // e.g., 'DC UPS', 'DC-DC Converter', '800V Rack PDU', 'Server PSU'
- `specs` (JSONB) // JSON object for detailed specifications
- `compatibilityNotes` (TEXT)
- `estimatedPrice` (INTEGER)
- `createdAt` (TIMESTAMP with time zone, default now())
- `updatedAt` (TIMESTAMP with time zone, default now())
**ProjectTasks Table:**
- `id` (UUID, primary key)
- `migrationStrategyId` (UUID, foreign key to DC_MigrationStrategies.id)
- `taskName` (TEXT)
- `description` (TEXT)
- `dueDate` (DATE)
- `completionDate` (DATE)
- `status` (VARCHAR(50)) // e.g., 'Not Started', 'In Progress', 'Completed', 'On Hold'
- `assignedTo` (TEXT)
- `createdAt` (TIMESTAMP with time zone, default now())
- `updatedAt` (TIMESTAMP with time zone, default now())
**4. CORE FEATURES & USER FLOW:**
**a) User Authentication:**
- **Flow:** User lands on the homepage. Clicks 'Sign In' or 'Sign Up'. Redirected to the authentication page (hosted by NextAuth.js). Users can sign up with email/password or OAuth (Google/GitHub). Upon successful login, users are redirected to their dashboard. Unauthenticated users attempting to access protected routes are redirected to the login page.
- **Auth Pages:** `/auth/signin`, `/auth/signup` (or integrated into one page), `/auth/reset-password`.
**b) Data Center Profile Creation & Management:**
- **Flow:** After login, the user is prompted to create their first Data Center profile or select an existing one. The form (`/dashboard/data-centers/new`) collects details like name, location, size, current power capacity (kVA), PUE, and estimated AI workload growth.
- **User Interface:** A multi-step form or a single detailed form using React Hook Form and Zod for validation. Input fields for all `DataCenters` table columns.
- **Edge Case:** Handle initial data entry validation. Ensure unique data center names per user if applicable.
**c) Power Infrastructure Analysis:**
- **Flow:** Within a specific Data Center's view (`/dashboard/data-centers/[id]`), users can add and manage their existing power infrastructure components (transformers, UPS, AC distribution panels, etc.) via the 'Infrastructure' tab. Users input details for each component (model, capacity, efficiency, voltage, etc.). The system then calculates the overall efficiency and identifies conversion losses.
- **User Interface:** A form to add/edit `PowerInfrastructure` items. A table displaying all components for a data center, with calculated metrics like total AC conversion loss percentage.
- **Edge Case:** Handle missing or incomplete component data. Provide clear units for all inputs.
**d) DC Migration Strategy Generation:**
- **Flow:** On the Data Center's 'Migration' tab (`/dashboard/data-centers/[id]/migration`), users can initiate a strategy analysis. Based on the Data Center profile (size, AI growth) and current infrastructure analysis, the system suggests potential DC migration strategies (e.g., '800V DC Hybrid', 'Full DC Conversion'). Users can select a strategy, customize parameters (target voltage, timeline), and the system estimates costs and potential savings.
- **User Interface:** A wizard-like interface. Forms for strategy selection and customization, linked to `DC_MigrationStrategies` table. Display estimated cost, savings, and timeline. Include buttons to save the strategy or generate a detailed report.
- **Edge Case:** If AI growth is low, suggest delaying migration or focusing on incremental improvements. If current infrastructure is highly inefficient, strongly recommend a full DC conversion.
**e) Hardware Catalog & Compatibility Check:**
- **Flow:** Users can browse the `HardwareCatalog` (`/tools/hardware-catalog`). They can filter by type (e.g., 'DC UPS', '800V PDU'), manufacturer, and specifications. When viewing a generated `DC_MigrationStrategy`, users can click a 'Check Compatibility' button which queries the catalog based on the strategy's requirements (target voltage, power levels) and highlights suitable hardware options. Users can also manually add custom hardware to their internal catalog.
- **User Interface:** A searchable and filterable table/grid for the hardware catalog. Integration points within the migration strategy view.
- **Edge Case:** Display 'No compatible hardware found' messages clearly. Allow users to flag specific hardware for future consideration.
**f) Project Task Management:**
- **Flow:** For a selected `DC_MigrationStrategy`, users can access the 'Project Tasks' section (`/dashboard/data-centers/[id]/migration/[strategyId]/tasks`). Here, they can create, assign, and track project tasks related to the migration (e.g., 'Procure 800V PDUs', 'Install new DC Busbars', 'Test UPS systems'). Tasks have due dates, statuses, and assignments.
- **User Interface:** A Kanban board or a checklist view using the `ProjectTasks` table. Drag-and-drop functionality for status changes (optional for MVP). Filtering and sorting options.
- **Edge Case:** Automated reminders for upcoming due dates (future enhancement). Clear visual indicators for overdue tasks.
**5. API & DATA FETCHING:**
- **Architecture:** Next.js App Router with Server Components and Client Components.
- **API Routes:** Use Next.js API Routes (or server actions) for backend logic (CRUD operations on database).
- **Data Fetching:**
- Server Components will fetch data directly using async functions and Drizzle ORM queries (e.g., `fetchDataCenters(userId)`).
- Client Components will use `fetch` API or libraries like SWR/React Query for data fetching, especially for real-time updates or mutations.
- **Example API Endpoint (Conceptual - using Server Actions):**
```typescript
// app/data-centers/actions.ts
'use server';
import { db } from '@/lib/db'; // Your Drizzle DB instance
import { dataCenters } from '@/lib/schema'; // Your schema
import { eq } from 'drizzle-orm';
export async function createDataCenter(formData: FormData) {
const name = formData.get('name') as string;
const userId = 'current-user-id'; // Get from auth context
// ... other fields ...
await db.insert(dataCenters).values({
userId,
name,
// ... other fields ...
});
// revalidatePath('/dashboard/data-centers'); // Invalidate cache
}
```
- **Data Structure (Example API Response for Data Centers):**
```json
[
{
"id": "uuid-1",
"name": "MegaScale DC - West",
"location": "Oregon, USA",
"size_sqft": 50000,
"currentPowerCapacity_kva": 5000,
"currentPUE": 1.35,
"estimatedAI_Workload_Growth": 75.5
}
]
```
**6. COMPONENT BREAKDOWN (Next.js App Router):**
- **`/app/layout.tsx`:** Root layout (includes `<html>`, `<body>`, global providers, Tailwind CSS config).
- **`/app/page.tsx`:** Landing Page (Marketing - high-level overview, value proposition, CTA).
- **`/app/(auth)/layout.tsx`:** Authentication layout (shared structure for sign-in/sign-up).
- **`/app/(auth)/signin/page.tsx`:** Sign In page.
- **`/app/(auth)/signup/page.tsx`:** Sign Up page.
- **`/app/dashboard/layout.tsx`:** Main dashboard layout (includes sidebar, header, main content area).
- **`/app/dashboard/page.tsx`:** Dashboard Overview (summary of data centers, recent activity, quick links).
- **`/app/dashboard/data-centers/page.tsx`:** List of all user's Data Centers.
- **`/app/dashboard/data-centers/new/page.tsx`:** Form to create a new Data Center.
- **`/app/dashboard/data-centers/[id]/page.tsx`:** Data Center Detail View (Overview tab).
- **Components:** `DataCenterOverviewCard`, `PowerStatsChart`, `AIWorkloadTrend`. Uses Server Component data fetching.
- **`/app/dashboard/data-centers/[id]/infrastructure/page.tsx`:** Infrastructure Management Tab.
- **Components:** `InfrastructureTable` (with `AddInfrastructureForm` modal), `InfrastructureSummary`.
- **`/app/dashboard/data-centers/[id]/migration/page.tsx`:** DC Migration Strategy Main Page.
- **Components:** `MigrationStrategyList`, `CreateMigrationStrategyWizard`.
- **`/app/dashboard/data-centers/[id]/migration/[strategyId]/page.tsx`:** Specific Migration Strategy Details.
- **Components:** `StrategyDetailsCard`, `EstimatedSavingsChart`, `TimelineGanttChart` (placeholder).
- **`/app/dashboard/data-centers/[id]/migration/[strategyId]/tasks/page.tsx`:** Project Task Management for a Strategy.
- **Components:** `TaskList` (Kanban or Checklist view), `TaskForm`.
- **`/app/tools/hardware-catalog/page.tsx`:** Hardware Catalog Browser.
- **Components:** `HardwareTable` (searchable, filterable), `HardwareFilter`, `ViewHardwareModal`.
- **`/app/settings/page.tsx`:** User Profile and Settings.
**State Management:**
- Global state (auth status, user info): Context API or Zustand.
- Form state: React Hook Form.
- Local UI state: `useState`, `useReducer`.
- Server/Client data fetching state: Managed by Next.js data fetching patterns and potentially SWR/React Query for client-side caching/revalidation.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** "Minimalist Clean with Professional Undertones"
- **Color Palette:**
- Primary: `#007AFF` (Vibrant Blue - for CTAs, active states)
- Secondary: `#5AC8FA` (Lighter Blue - for accents, secondary info)
- Neutral Dark: `#1C1C1E` (for dark backgrounds, text on dark)
- Neutral Light: `#F2F2F7` (for light backgrounds, card backgrounds)
- Accent/Alert: `#FF3B30` (Red - for errors, alerts)
- Success: `#34C759` (Green - for success messages)
- Text (Dark BG): `#FFFFFF`
- Text (Light BG): `#000000`
- **Typography:** System fonts for maximum readability and performance (e.g., `font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;`). Use `rem` units for scaling.
- **Layout:** Clean, spacious layouts. Utilize CSS Grid and Flexbox. Sidebar navigation for dashboard. Clear separation of concerns on each page. Use cards for summarizing information.
- **Responsive Rules:** Mobile-first approach. Min-width breakpoints for tablet (`min-width: 768px`) and desktop (`min-width: 1024px`). Ensure all components are fully responsive.
- **Visual Elements:** Subtle gradients on buttons or headers, minimalist icons, clear data visualizations (charts).
**8. SAMPLE/MOCK DATA:**
**DataCenters:**
```json
[
{
"id": "dc-uuid-1",
"userId": "user-uuid-1",
"name": "Hyperscale Facility Alpha",
"location": "Ashburn, VA, USA",
"size_sqft": 150000,
"currentPowerCapacity_kva": 20000,
"currentPUE": 1.45,
"estimatedAI_Workload_Growth": 120.0
},
{
"id": "dc-uuid-2",
"userId": "user-uuid-1",
"name": "Edge Compute Node Beta",
"location": "London, UK",
"size_sqft": 15000,
"currentPowerCapacity_kva": 1500,
"currentPUE": 1.25,
"estimatedAI_Workload_Growth": 50.0
}
]
```
**PowerInfrastructure (Example for Facility Alpha):**
```json
[
{
"id": "pi-uuid-1",
"dataCenterId": "dc-uuid-1",
"type": "AC Distribution",
"model": "Schneider Electric Galaxy 15000",
"manufacturer": "Schneider Electric",
"capacity_kva": 15000,
"efficiency_percent": 95.0,
"voltage_in": 480,
"voltage_out": 480,
"current_state": "Operational",
"purchaseDate": "2020-01-15",
"warrantyExpiry": "2025-01-15"
},
{
"id": "pi-uuid-2",
"dataCenterId": "dc-uuid-1",
"type": "UPS",
"model": "Vertiv Liebert EXL SION 1000",
"manufacturer": "Vertiv",
"capacity_kva": 1000,
"efficiency_percent": 96.5,
"voltage_in": 480,
"voltage_out": 480,
"current_state": "Operational",
"purchaseDate": "2021-03-10",
"warrantyExpiry": "2026-03-10"
},
{
"id": "pi-uuid-3",
"dataCenterId": "dc-uuid-1",
"type": "Transformer",
"model": "Eaton 10kV-480V Step Down",
"manufacturer": "Eaton",
"capacity_kva": 5000,
"efficiency_percent": 98.0,
"voltage_in": 10000,
"voltage_out": 480,
"current_state": "Operational",
"purchaseDate": "2020-01-15",
"warrantyExpiry": "2025-01-15"
}
]
```
**DC_MigrationStrategies (Example):**
```json
[
{
"id": "strat-uuid-1",
"dataCenterId": "dc-uuid-1",
"strategyName": "800V DC Hybrid - Phased Rollout",
"targetVoltage": 800,
"estimatedCost": 2500000,
"estimatedSavings_percent": 15.5,
"implementationTimeline_months": 18,
"conversionType": "Hybrid AC/DC",
"notes": "Prioritize upgrading AI compute racks first, then expand to core infrastructure."
}
]
```
**HardwareCatalog (Examples):**
```json
[
{
"id": "hw-uuid-1",
"name": "NVIDIA HGX 800V Power Distribution Unit",
"manufacturer": "NVIDIA",
"type": "800V Rack PDU",
"specs": {"input_voltage": "800V DC", "output_voltage": "800V DC", "max_amperage": 100, "rack_units": 2},
"compatibilityNotes": "Designed for next-gen AI servers.",
"estimatedPrice": 5000
},
{
"id": "hw-uuid-2",
"name": "Vertiv 800V DC UPS Module",
"manufacturer": "Vertiv",
"type": "DC UPS",
"specs": {"input_voltage": "800V DC", "output_voltage": "800V DC", "capacity_kw": 500, "redundancy": "N+1"},
"compatibilityNotes": "Requires 800V DC input bus.",
"estimatedPrice": 75000
},
{
"id": "hw-uuid-3",
"name": "Eaton DC-DC Converter 800V to 48V",
"manufacturer": "Eaton",
"type": "DC-DC Converter",
"specs": {"input_voltage": "800V DC", "output_voltage": "48V DC", "max_amperage_out": 1000, "efficiency": 97.0},
"compatibilityNotes": "For powering auxiliary systems or legacy equipment.",
"estimatedPrice": 15000
}
]
```
**ProjectTasks (Example for Strategy 1):**
```json
[
{
"id": "task-uuid-1",
"migrationStrategyId": "strat-uuid-1",
"taskName": "Procure NVIDIA 800V PDUs",
"description": "Order 50 units of NVIDIA HGX 800V PDUs.",
"dueDate": "2025-06-30",
"completionDate": null,
"status": "In Progress",
"assignedTo": "Alice Green (Procurement Lead)"
},
{
"id": "task-uuid-2",
"migrationStrategyId": "strat-uuid-1",
"taskName": "Install new DC Busbars",
"description": "Run and terminate 800V DC busbars in Sector A.",
"dueDate": "2025-09-30",
"completionDate": null,
"status": "Not Started",
"assignedTo": "Bob White (Electrical Team)"
}
]
```
**9. TURKISH TRANSLATIONS:**
(Integrated into concept, targetAudience, mvpFeatures, monetization descriptions above. Key terms below)
- Data Centers: Veri Merkezleri
- AC to DC Transition: AC'den DC'ye Geçiş
- Power Infrastructure: Güç Altyapısı
- Energy Efficiency: Enerji Verimliliği
- Migration Strategy: Geçiş Stratejisi
- Hardware Catalog: Donanım Kataloğu
- Project Tasks: Proje Görevleri
- Sign In: Giriş Yap
- Sign Up: Kayıt Ol
- Dashboard: Kontrol Paneli
- Settings: Ayarlar
- Save: Kaydet
- Cancel: İptal
- New: Yeni
- Edit: Düzenle
- Delete: Sil
- Search: Ara
- Filter: Filtrele
- Estimated Cost: Tahmini Maliyet
- Estimated Savings: Tahmini Tasarruf
- Implementation Timeline: Uygulama Zaman Çizelgesi
- Status: Durum
- Due Date: Vade Tarihi
- Completed: Tamamlandı
**ANIMATIONS:**
- **Page Transitions:** Subtle fades or slides using Next.js `useRouter` and Framer Motion (optional, for enhanced UX).
- **Button Hovers:** Slight scale-up or background color change.
- **Loading States:** Use Tailwind CSS spinners or skeleton loaders within components while data is fetching.
- **Chart Interactions:** Tooltips and subtle animations on chart data points (using Recharts).
- **Form Submissions:** Visual feedback (e.g., disabling button, showing spinner) during API calls.
**EDGE CASES:**
- **Initial State:** When a user has no data centers, show a clear call-to-action to create one.
- **Empty States:** Display user-friendly messages for empty tables or lists (e.g., 'No infrastructure components added yet. Add your first component.').
- **Authorization:** All dashboard routes and API actions must be protected and tied to the authenticated user's ID. Ensure users can only access/modify their own data.
- **Validation:** Comprehensive client-side (React Hook Form + Zod) and server-side validation for all form inputs.
- **Error Handling:** Global error handling mechanism (e.g., a toast notification system) for API failures or unexpected errors. Specific error messages for invalid user input or server issues.
- **Data Integrity:** Use database constraints and Drizzle ORM's type safety to maintain data integrity.
- **Performance:** Optimize data fetching (Server Components preferred), use caching strategies, and ensure efficient database queries.