You are tasked with building a comprehensive, fully functional MVP of a developer tool platform aimed at revolutionizing native Windows application development. The platform, tentatively named 'Display Enhancer' (or similar brandable name), addresses the pain points highlighted in a Hacker News discussion about the 'messy' state of Windows native development, particularly the difficulty in creating modern, performant applications compared to web or cross-platform solutions like Electron. The goal is to provide developers with a streamlined, enjoyable, and powerful native development experience. This prompt will guide an AI assistant to generate the complete Next.js MVP application.
**1. PROJECT OVERVIEW:**
The 'Display Enhancer' platform aims to simplify and enhance the process of creating native Windows applications. It solves the problem of a fragmented, complex, and often frustrating native development ecosystem by providing a unified set of tools, libraries, and a clear development workflow. The core value proposition is to empower developers to build high-performance, visually appealing, and platform-integrated Windows applications with significantly less friction than currently possible. The MVP will focus on showcasing the potential of this approach, particularly by including utilities for common Windows-specific needs like advanced monitor management (addressing the 'Display Blackout' scenario).
**2. TECH STACK:**
* **Frontend Framework:** React (using Next.js App Router for optimal structure and performance)
* **Styling:** Tailwind CSS (for rapid, utility-first styling)
* **ORM:** Drizzle ORM (for type-safe database interactions with PostgreSQL)
* **Database:** PostgreSQL (as the primary database)
* **Authentication:** NextAuth.js (for robust email/password and OAuth authentication)
* **UI Components:** shadcn/ui (for accessible, themeable, and production-ready components)
* **State Management:** Zustand or React Context API (for efficient global and local state management)
* **API Layer:** Server Actions (within Next.js App Router) and potentially tRPC for type-safe API communication.
* **Programming Language (for core libraries, to be integrated):** C++/WinRT or Rust/WinRT (for native Windows libraries), JavaScript/TypeScript for the Next.js app.
* **Deployment:** Vercel (recommended for Next.js)
**3. DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
```typescript
// schema.ts
import { pgTable, serial, text, timestamp, boolean, varchar, uuid, foreignKey, jsonb } from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
export const users = pgTable('users', {
id: uuid('id').primaryKey(), // Use UUID for user IDs
name: text('name'),
email: varchar('email', { length: 256 }).notNull().unique(),
emailVerified: timestamp('emailVerified', { mode: 'date' }),
image: text('image'),
createdAt: timestamp('createdAt').defaultNow()
});
export const accounts = pgTable('accounts', {
id: serial('id').primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
type: varchar('type', { length: 100 }).notNull(),
provider: varchar('provider', { length: 100 }).notNull(),
providerAccountId: varchar('providerAccountId', { length: 256 }).notNull(),
refresh_token: text('refresh_token'),
access_token: text('access_token'),
expires_at: timestamp('expires_at', { mode: 'date' }),
token_type: varchar('token_type', { length: 50 }),
scope: text('scope'),
id_token: text('id_token'),
session_state: text('session_state'),
}, (t) => ({ // Ensure unique constraint per provider
compoundKey: [t.provider, t.providerAccountId]
}));
export const sessions = pgTable('sessions', {
id: serial('id').primaryKey(),
sessionToken: varchar('sessionToken', { length: 256 }).notNull().unique(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
expires: timestamp('expires', { mode: 'date' }).notNull()
});
export const verificationTokens = pgTable('verificationTokens', {
id: serial('id').primaryKey(),
identifier: text('identifier').notNull(),
token: text('token').notNull(),
expires: timestamp('expires', { mode: 'date' }).notNull()
}, (t) => ({
compoundKey: [t.identifier, t.token]
}));
// Core Application Entities
export const projects = pgTable('projects', {
id: uuid('id').primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
name: varchar('name', { length: 256 }).notNull(),
description: text('description'),
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow()
});
export const monitorConfigs = pgTable('monitorConfigs', {
id: uuid('id').primaryKey(),
projectId: uuid('projectId').notNull().references(() => projects.id, { onDelete: 'cascade' }),
name: varchar('name', { length: 256 }).notNull(),
configData: jsonb('configData').notNull(), // Stores display settings, blackout logic, etc.
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow()
});
// Relations (example)
export const usersRelations = relations(users, {
projects: ()=>
projects.filterWhere((p) => p.userId === users.id),
});
export const projectsRelations = relations(projects, {
user: ()=> users.findUnique({ where: { id: projects.userId } }),
monitorConfigs: ()=>
monitorConfigs.filterWhere((mc) => mc.projectId === projects.id)
});
export const monitorConfigsRelations = relations(monitorConfigs, {
project: ()=> projects.findUnique({ where: { id: monitorConfigs.projectId } })
});
// Add indexes for frequently queried fields
// Example: createIndex('idx_projects_userId', projects, projects.userId);
```
**4. CORE FEATURES & USER FLOW:**
* **Authentication Flow:**
1. User lands on the homepage (which might include marketing/landing elements for MVP).
2. Clicks 'Sign Up' or 'Login'.
3. Presented with options: Email/Password, Google OAuth, Microsoft OAuth.
4. **Email/Password:** Enters email and password. Server validates, creates user in DB if new, generates session token, sets cookie, redirects to dashboard. Handles password reset flow.
5. **OAuth:** Redirected to provider (Google/Microsoft). After authorization, receives user info. If new user, create in DB; if existing, log them in. Generate session token, set cookie, redirect to dashboard.
6. **Dashboard:** User sees their projects. If no projects, a prompt to create one.
7. **Logout:** Clicks logout, session is invalidated server-side, cookie cleared, redirected to login/home page.
* **Project Management:**
1. **Create Project:** From dashboard, user clicks 'New Project'. A modal/form appears (via Server Action) prompting for Project Name and Description.
2. **View Projects:** Dashboard displays a list/grid of user's projects with name, description, last updated.
3. **Edit Project:** Clicking a project navigates to a dedicated project page. User can edit name/description via an inline form or edit button leading to a modal.
4. **Delete Project:** Option to delete a project (with confirmation modal).
* **Monitor Configuration (MVP Core - 'Display Blackout' example):**
1. Navigate to a specific Project's page.
2. Click 'Add Monitor Configuration' or similar.
3. A form appears to define a new configuration:
* **Name:** User-defined name (e.g., "Gaming - Side Monitors Blackout").
* **Display Selection:** UI to select which displays (e.g., Monitor 1, Monitor 2, Monitor 3). Potentially use a simple dropdown or multi-select for MVP.
* **Action:** Choose 'Blackout Overlay' or 'Turn Off'.
* **Trigger:** For MVP, this could be manual (a button click in the app UI) or scheduled (simple time-based). Advanced triggers (e.g., 'Game Detected') are out of scope for MVP.
4. **Save Configuration:** Form submits via Server Action, saving `configData` (JSON) to `monitorConfigs` table.
5. **View/Manage Configurations:** Project page lists existing configurations. User can edit, delete, or 'Activate' a configuration.
6. **Activate Configuration:** Clicking 'Activate' would (in a real implementation) trigger a native Windows utility/background process. For the MVP simulation, this action could update a status flag or simply log the activation in the UI, acknowledging the intended functionality.
**5. API & DATA FETCHING:**
* **Server Actions:** Used for all mutations (create, update, delete) related to projects and monitor configurations. E.g., `async function createProject(formData: FormData) {...}`.
* **API Routes (if needed for complex logic or external services):** Standard Next.js API routes (`app/api/...`) for fetching data or performing actions not suitable for Server Actions. For MVP, primarily used for NextAuth.js callbacks.
* **Data Fetching in Components:** Use `fetch` within Server Components (default in App Router) for initial data load. For dynamic data or client-side interactions (e.g., refreshing project list, activating a config), use `useEffect` with client-side `fetch` calls or a library like `swr` in Client Components.
* **Data Flow:** Server Components fetch data directly from DB via Drizzle. Client Components fetch data from Server Actions or API Routes.
* **Example API Endpoint (Conceptual - for native integration):**
* `POST /api/projects/[projectId]/monitor-configs/activate`
* **Request Body:** `{ "configId": "uuid" }`
* **Response Body (Success):** `{ "success": true, "message": "Configuration activated successfully." }`
* **Response Body (Error):** `{ "success": false, "message": "Failed to activate configuration." }`
* **Note:** In a real app, this endpoint would signal a separate native background service or trigger a system call.
**6. COMPONENT BREAKDOWN (Next.js App Router):**
* **`app/layout.tsx`:** Root layout (<html>, <body>), global providers (e.g., ThemeProvider), global Tailwind directives.
* **`app/page.tsx`:** Landing/Marketing page for the platform (for MVP, can be simple). Includes calls to action for Sign Up/Login.
* **`app/(auth)/login/page.tsx`:** Login form component (uses shadcn/ui). Handles email/password submission via Server Action or NextAuth.js.
* **`app/(auth)/signup/page.tsx`:** Signup form component (uses shadcn/ui). Handles email/password submission via Server Action or NextAuth.js.
* **`app/(protected)/dashboard/page.tsx`:** Protected route. Fetches and displays the user's projects (using Server Component fetching). Includes 'Create New Project' button.
* **`app/(protected)/projects/[projectId]/page.tsx`:** Protected route. Displays details of a single project. Fetches project details and its monitor configurations. Includes forms for editing project details and managing configurations.
* **`components/ProjectForm.tsx`:** Client Component for creating/editing project details. Uses Server Actions.
* **`components/MonitorConfigForm.tsx`:** Client Component for creating/editing monitor configurations. Uses Server Actions.
* **`components/MonitorConfigList.tsx`:** Client Component to display and manage existing configurations (e.g., Activate, Edit, Delete buttons).
* **`app/(protected)/settings/page.tsx`:** User settings page (e.g., update profile, manage connected accounts). Protected route.
* **`components/ui/...`:** Re-exports from shadcn/ui (Button, Input, Card, Dialog, etc.).
* **`components/AuthButton.tsx`:** Client Component displaying login/logout button based on session status.
* **`components/Navigation.tsx`:** Navigation bar/sidebar component.
* **`components/LoadingSpinner.tsx`:** Global loading indicator component.
* **`lib/db.ts`:** Drizzle ORM database connection setup.
* **`lib/auth.ts`:** NextAuth.js configuration.
* **`types/index.ts`:** Shared TypeScript types.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
* **Design Style:** Modern, clean, and professional with a focus on clarity and developer productivity. Subtle futuristic or tech-oriented accents.
* **Color Palette:**
* Primary (Brand): Deep Blue (`#0A2540`)
* Secondary (Accent): Electric Teal (`#2DE1CC`)
* Background: Dark Slate (`#1E293B`)
* Surface/Cards: Slightly lighter Dark Slate (`#2F3A4E`)
* Text (Primary): Light Gray (`#F8FAFC`)
* Text (Secondary): Muted Gray (`#94A3B8`)
* Success: Green (`#34D399`)
* Warning: Yellow (`#FBBF24`)
* Error: Red (`#F87171`)
* **Typography:** A clean sans-serif font family like 'Inter' or 'Manrope' for body text and a slightly more distinct but readable font like 'Exo 2' or 'Poppins' for headings.
* **Layout:** Primarily use a sidebar navigation for core sections and a main content area. Utilize cards and clean lists for displaying data. Forms should be well-spaced and intuitive. Implement a responsive grid system.
* **Visual Elements:** Subtle gradients in accents, use of icons (e.g., Lucide React) for clarity, clean borders, and appropriate use of whitespace.
**8. SAMPLE/MOCK DATA:**
* **User:**
```json
{
"id": "clw4g0a5b000008ly5f1z1o9r",
"name": "Jane Doe",
"email": "jane.doe@example.com",
"image": "https://example.com/avatar.jpg"
}
```
* **Project:**
```json
{
"id": "clw4g0a5b000008ly5f1z1o9r",
"userId": "clw4g0a5b000008ly5f1z1o9r",
"name": "My Awesome Utility",
"description": "A native Windows tool to enhance productivity.",
"createdAt": "2024-01-15T10:00:00Z"
}
```
* **Monitor Configuration (for 'Display Blackout'):**
```json
{
"id": "clw4g0a5b000008ly5f1z1o9s",
"projectId": "clw4g0a5b000008ly5f1z1o9r",
"name": "Gaming - Side Monitors Blackout",
"configData": {
"selectedDisplays": [1, 3], // Assuming 3 monitors, blackout 1 and 3
"action": "blackout_overlay",
"trigger": "manual",
"overlayColor": "#000000",
"opacity": 1.0
},
"createdAt": "2024-01-16T11:30:00Z"
}
```
* **Another Monitor Config:**
```json
{
"id": "clw4g0a5b000008ly5f1z1o9t",
"projectId": "clw4g0a5b000008ly5f1z1o9r",
"name": "Presentation Mode - Extend Left",
"configData": {
"selectedDisplays": [2], // Only use primary monitor
"action": "extend",
"direction": "left",
"resolution": "1920x1080",
"trigger": "schedule_start_time: 09:00:00"
},
"createdAt": "2024-01-17T09:00:00Z"
}
```
* **Empty State (Dashboard):** A card or message prompting the user to create their first project.
* **Empty State (Project Page - Monitor Configs):** A message like "No monitor configurations yet. Click 'Add Configuration' to get started."
**9. TURKISH TRANSLATIONS (for UI elements):**
* **App Title:** Display Enhancer (Placeholder, can be refined)
* **Sign Up:** Kayıt Ol
* **Login:** Giriş Yap
* **Logout:** Çıkış Yap
* **Dashboard:** Kontrol Paneli
* **My Projects:** Projelerim
* **New Project:** Yeni Proje
* **Project Name:** Proje Adı
* **Description:** Açıklama
* **Save:** Kaydet
* **Cancel:** İptal
* **Edit:** Düzenle
* **Delete:** Sil
* **Settings:** Ayarlar
* **Monitor Configurations:** Monitör Ayarları
* **Add Configuration:** Ayar Ekle
* **Activate:** Aktifleştir
* **Blackout Overlay:** Karartma Katmanı
* **Turn Off:** Kapat
* **Select Displays:** Monitörleri Seç
* **Are you sure?** Emin misiniz?
* **This action cannot be undone.** Bu işlem geri alınamaz.
* **Loading...** Yükleniyor...
* **Error:** Hata
* **Success:** Başarılı
**10. ANIMATIONS:**
* **Page Transitions:** Subtle fade or slide transitions between pages/sections using Next.js features or libraries like `Framer Motion`.
* **Button Hovers:** Slight scale-up or background color change on hover.
* **Loading States:** Use shadcn/ui's `Spinner` component or custom skeleton loaders for data fetching.
* **Form Interactions:** Smooth transitions for opening/closing modals (shadcn/ui `Dialog`), subtle input focus animations.
* **Hover Effects:** On list items (projects, configurations), provide a subtle hover effect (e.g., background color change or shadow).
**11. EDGE CASES:**
* **Authentication:** Handle expired sessions, invalid tokens, failed OAuth callbacks gracefully.
* **Authorization:** Ensure users can only access and modify their own data (projects, configurations).
* **Data Validation:** Implement robust server-side validation for all form inputs using Zod with Drizzle.
* **Empty States:** Design clear and helpful UI states when there is no data (no projects, no configurations).
* **Error Handling:** Implement global error handling (e.g., using error boundaries in React) and display user-friendly error messages. Log detailed errors server-side.
* **API Errors:** Gracefully handle network errors and API failures, providing feedback to the user.
* **Database Errors:** Catch and log database errors. Provide generic error messages to the user.
* **Configuration Application:** Simulate the 'activation' of monitor configurations, providing feedback even if the actual native interaction isn't implemented in the web MVP. Log the attempt and success/failure.
**Deliverable:** A complete, deployable Next.js application (MVP) demonstrating the core features outlined above, built with the specified tech stack, adhering to the design principles, and including all necessary components and logic for a functional user experience. The application should be multi-page, include database persistence, and user authentication.