You are an expert AI startup consultant, application idea analyst, and senior full-stack developer. Your task is to generate a fully functional, multi-page Next.js MVP application based on the provided Hacker News problem. The application should be production-ready for an MVP, including database integration, authentication, and a user-friendly interface.
**1. PROJECT OVERVIEW:**
Develop "TurboLite Data Manager", a SaaS platform that enhances the functionality of Turbolite, a Rust-based SQLite VFS serving queries directly from S3. The core problem is enabling developers and businesses, particularly those using database-per-tenant/user/session architectures, to efficiently manage and query their largely cold SQLite databases stored on S3 with sub-second performance for JOIN queries. TurboLite Data Manager will provide a user-friendly web interface for managing these S3-backed SQLite databases, offering features like easy S3 integration, SQL querying, performance monitoring, and basic access control. The value proposition is significantly reduced infrastructure costs and improved query performance for cold data compared to traditional database solutions or naive S3 file access.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM for PostgreSQL
- **Database:** PostgreSQL (for user accounts, metadata, and application state)
- **Authentication:** NextAuth.js (or Clerk for simplicity)
- **UI Components:** shadcn/ui
- **State Management:** React Context API / Zustand (for global state)
- **API Layer:** Server Actions / Route Handlers (Next.js)
- **File Storage Integration:** AWS SDK for JavaScript (for S3 interactions)
- **Form Handling:** React Hook Form with Zod for validation
- **Charting:** Recharts or Chart.js for performance metrics
- **Deployment:** Vercel or similar
**3. DATABASE SCHEMA (PostgreSQL):**
- **`users` table:**
- `id` (uuid, primary key)
- `name` (text)
- `email` (text, unique)
- `emailVerified` (timestamp)
- `image` (text)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
- **`accounts` table:** (For NextAuth.js)
- `id` (uuid, primary key)
- `userId` (uuid, foreign key to `users.id`)
- `type` (text)
- `provider` (text)
- `providerAccountId` (text)
- `refresh_token` (text)
- `access_token` (text)
- `expires_at` (timestamp)
- `token_type` (text)
- `scope` (text)
- `id_token` (text)
- **`sessions` table:** (For NextAuth.js)
- `id` (uuid, primary key)
- `sessionToken` (text, unique)
- `userId` (uuid, foreign key to `users.id`)
- `expires` (timestamp)
- **`verificationTokens` table:** (For NextAuth.js)
- `identifier` (text)
- `token` (text, unique)
- `expires` (timestamp)
- **`turbo_databases` table:**
- `id` (uuid, primary key)
- `userId` (uuid, foreign key to `users.id`)
- `name` (text, not null)
- `s3BucketName` (text, not null)
- `s3BasePath` (text)
- `region` (text, default 'us-east-1')
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
- **`database_metrics` table:**
- `id` (uuid, primary key)
- `turboDatabaseId` (uuid, foreign key to `turbo_databases.id`)
- `queryCount` (integer, default 0)
- `avgQueryTimeMs` (float, default 0)
- `coldQueryCount` (integer, default 0)
- `maxQueryTimeMs` (integer, default 0)
- `dataTransferBytes` (bigint, default 0)
- `timestamp` (timestamp)
**4. CORE FEATURES & USER FLOW:**
**A. User Authentication:**
- **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Log In'. Redirected to authentication provider (e.g., Google, GitHub, Email/Password via NextAuth.js). After successful auth, redirected to the dashboard.
- **MVP Features:** Email/Password signup/login, OAuth (Google/GitHub).
**B. Database Management:**
- **Flow:** Logged-in user navigates to 'Databases' page. Clicks 'Add New Database'. Fills a form with Database Name, S3 Bucket Name, S3 Base Path, AWS Region. Submits. The system validates S3 credentials (read-only check initially) and creates a new record in `turbo_databases` table. The UI displays the list of managed databases.
- **MVP Features:** Add new S3-backed database configuration, List managed databases, Edit database configuration (name, path, region), Delete database configuration.
**C. SQL Querying Interface:**
- **Flow:** User selects a database from the list. Navigates to the 'Query Editor' page for that database. A CodeMirror or Monaco editor instance is available for writing SQL queries. User writes a query (e.g., `SELECT COUNT(*) FROM tenant_data WHERE tenant_id = 'abc';`). Clicks 'Run Query'. The backend attempts to execute this query against the specified S3 database using the Turbolite VFS logic (simulated or integrated). Results (or error) are displayed in a table below the editor. Basic query validation (syntax check) before execution.
- **MVP Features:** SQL query editor (syntax highlighting), Execute SQL queries, Display query results in a table, Display query execution time.
**D. Performance Monitoring:**
- **Flow:** User navigates to the 'Dashboard' or 'Metrics' page. This page displays charts and key metrics for selected or all managed databases. Metrics include total queries, average query time, cold query count, data transfer volume over time.
- **MVP Features:** Display historical query count (line chart), Display average query time (line chart), Display data transfer volume (bar chart).
**E. Basic Access Control:**
- **Flow:** Within the 'Database Settings' for a specific database, there's a section for 'Access Control'. User can invite other users (by email) to access this database with predefined roles (e.g., 'Viewer', 'Querier'). The `turbo_databases` table might need a join table (`database_access`) to manage user permissions per database.
- **MVP Features:** Invite users by email to a database, Assign 'Viewer' (read-only, can see metrics) or 'Querier' (can run SQL queries) roles. (This can be simplified for MVP by only allowing the owner).
**5. API & DATA FETCHING:**
- **Authentication:** Handled by NextAuth.js, provides session data to client components.
- **Database CRUD (TurboLite Data Manager's DB):** Use Server Actions or Route Handlers for:
- `POST /api/databases`: Create a new database entry.
- `GET /api/databases`: List all databases for the current user.
- `GET /api/databases/[id]`: Get details for a specific database.
- `PUT /api/databases/[id]`: Update database configuration.
- `DELETE /api/databases/[id]`: Delete a database entry.
- **Query Execution:**
- `POST /api/databases/[id]/query`: Accepts an SQL query string. Executes the query via a backend service that interacts with the S3-backed SQLite file using Turbolite logic. Returns query results, execution time, and relevant metrics. This might involve a separate microservice or a complex server-side logic.
- **Metrics Fetching:**
- `GET /api/databases/[id]/metrics?timeframe=24h`: Fetch historical metric data for charting.
- **Data Fetching Pattern:** Server Components will fetch data where possible. Client Components will use `fetch` or libraries like SWR for dynamic data, passing session tokens implicitly or explicitly.
- **S3 Interaction:** Backend logic will use AWS SDK. Credentials should be securely managed (e.g., environment variables, AWS Secrets Manager).
**6. COMPONENT BREAKDOWN (Next.js App Router):**
- **`app/` directory:**
- **`layout.tsx`:** Root layout (includes Navbar, Footer, global styles).
- **`page.tsx`:** Homepage (Marketing/Landing Page for the SaaS).
- **`auth/`:** Authentication pages (Sign In, Sign Up, Reset Password).
- `layout.tsx`
- `signin/page.tsx`
- `signup/page.tsx`
- **`dashboard/`:** User dashboard.
- `page.tsx`: Overview of managed databases, recent activity, quick stats. (Server Component fetching primary data).
- **`databases/`:** Database management section.
- `page.tsx`: Lists all managed databases (Client Component with table and actions).
- `[id]/` (Database detail pages):
- `page.tsx`: Overview of a specific database (Server Component).
- `query/page.tsx`: Query Editor interface (Client Component with CodeMirror/Monaco, results table).
- `metrics/page.tsx`: Performance metrics and charts (Client Component with Recharts).
- `settings/page.tsx`: Database configuration and access control (Client Component with forms).
- **`layout.tsx`:** Dashboard-specific layout (e.g., sidebar navigation).
- **`components/` directory:**
- **`ui/`:** Re-exports from shadcn/ui (Button, Input, Card, Table, Sheet, Dialog, etc.).
- **`auth/`:** Auth-related components (e.g., `SignInButton`, `SignOutButton`, `UserAvatar`).
- **`common/`:** Reusable components across the app.
- `Navbar.tsx`: Top navigation bar.
- `Sidebar.tsx`: Dashboard sidebar navigation.
- `Footer.tsx`
- `DataTable.tsx`: Generic data table component.
- `Chart.tsx`: Wrapper for charting library.
- `SuspenseBoundary.tsx`: For handling suspense/loading states.
- **`databases/`:** Database-specific components.
- `DatabaseList.tsx`
- `DatabaseForm.tsx`
- `QueryEditor.tsx` (Integrates CodeMirror/Monaco)
- `QueryResultTable.tsx`
- `MetricCharts.tsx`
- **`forms/`:** Form-related components and hooks.
- `S3ConfigForm.tsx`
- `QueryForm.tsx`
- **State Management:** Utilize React Context for authentication status and user session. Zustand for managing complex client-side states like query editor content, fetched results before rendering, or UI state.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** "Modern Professional" with a hint of "Tech Elegance". Clean lines, intuitive layouts, and subtle animations.
- **Color Palette:**
- Primary: `#0A74DA` (A strong, trustworthy blue)
- Secondary: `#60A5FA` (Lighter blue for accents)
- Accent: `#8B5CF6` (A vibrant purple for key call-to-actions)
- Background: `#FFFFFF` (Light mode base) / `#111827` (Dark mode base)
- Text: `#1F2937` (Dark mode base) / `#F3F4F6` (Light mode base)
- Borders/Dividers: `#E5E7EB` / `#374151`
- Success: `#10B981`
- Warning: `#F59E0B`
- Error: `#EF4444`
- **Typography:**
- Headings: Inter (Semi-bold, Bold)
- Body Text: Inter (Regular, Medium)
- **Layout:**
- Desktop: Main content area with a fixed left sidebar for navigation. Responsive header/navbar.
- Mobile: Collapsible sidebar (hamburger menu), main content takes full width.
- **Sections:** Clear separation using cards, dividers, and whitespace. Consistent padding and margins.
- **Animations:** Subtle fade-ins for content loading, smooth transitions for route changes, hover effects on buttons and interactive elements. Loading spinners (`react-spinners` or CSS loaders) for async operations.
**8. SAMPLE/MOCK DATA:**
- **User:** `{
"id": "user-123",
"name": "Ahmet Yılmaz",
"email": "ahmet.yilmaz@example.com"
}`
- **Database List Item:** `[
{
"id": "db-abc",
"name": "Müşteri Veritabanı (Tenant A)",
"s3BucketName": "my-turbo-databases",
"s3BasePath": "tenants/abc/data/",
"region": "us-west-2",
"createdAt": "2023-10-26T10:00:00Z"
},
{
"id": "db-def",
"name": "Oturum Logları (Session X)",
"s3BucketName": "my-turbo-databases",
"s3BasePath": "sessions/x/logs/",
"region": "eu-central-1",
"createdAt": "2023-10-25T14:30:00Z"
}
]`
- **Query Result:** `{
"rows": [
{"count": 150},
{"tenant_id": "abc"}
],
"fields": [{"name": "count"}],
"executionTimeMs": 185,
"query": "SELECT COUNT(*) as count FROM users WHERE last_login > '2023-01-01';"
}`
- **Metric Data Point:** `{
"timestamp": "2023-10-26T12:00:00Z",
"queryCount": 1200,
"avgQueryTimeMs": 210.5,
"dataTransferBytes": 524288000 // 500MB
}`
- **Empty State (No Databases):** `{
"message": "Henüz bir veritabanı eklemediniz.",
"action": {
"text": "Yeni Veritabanı Ekle",
"href": "/databases/new"
}
}`
**9. TURKISH TRANSLATIONS:**
- **App Title:** TurboLite Veri Yöneticisi
- **Navbar:** Kontrol Paneli, Veritabanlarım, Yeni Ekle, Ayarlar, Çıkış Yap
- **Buttons:** Sorguyu Çalıştır, Kaydet, Güncelle, Sil, Ekle, İptal
- **Placeholders:** Veritabanı Adı, S3 Bucket Adı, S3 Yolu, Sorgu Girin...
- **Labels:** Veritabanı Adı, S3 Bucket Adı, AWS Bölgesi, Sorgu Sonuçları, Çalışma Süresi, Veri Aktarımı
- **Messages:** Veritabanı başarıyla eklendi., Sorgu çalıştırılıyor..., Kaydedilemedi.
- **Page Titles:** Kontrol Paneli, Veritabanı Listesi, Sorgu Düzenleyici, Performans Metrikleri, Veritabanı Ayarları