## AI Master Prompt: Bug Report Buddy - Next.js MVP Application
**1. PROJECT OVERVIEW**
**Project Name:** Bug Report Buddy
**Problem:** Apple's Feedback Assistant randomly closes bug reports without proper verification or timely updates, leading to frustration among developers and users who invest time in reporting issues. Reports are closed if users don't "verify" them on specific beta versions, wasting valuable feedback.
**Solution:** Bug Report Buddy is a SaaS platform designed to empower Apple users and developers by providing a centralized, community-driven system to track, manage, and advocate for their Apple bug reports. It aims to increase the visibility and lifespan of bug reports, encouraging Apple to address them more effectively.
**Core Value Proposition:** Save time, increase the impact of your bug reports, and foster a community that holds Apple accountable for its feedback process. Turn user feedback into a collaborative effort, not a one-way street.
**2. TECH STACK**
* **Framework:** Next.js (App Router)
* **Language:** TypeScript
* **Styling:** Tailwind CSS
* **ORM:** Drizzle ORM
* **Database:** PostgreSQL (or SQLite for local development/simplicity)
* **UI Components:** shadcn/ui
* **Authentication:** NextAuth.js (or Clerk for ease of use)
* **State Management:** React Context API / Zustand (for global state)
* **Form Handling:** React Hook Form with Zod for validation
* **Data Fetching:** React Query / SWR
* **Deployment:** Vercel (recommended)
**3. DATABASE SCHEMA**
* **`users` table:**
* `id` (UUID, primary key)
* `name` (String)
* `email` (String, unique)
* `emailVerified` (Timestamp, optional)
* `image` (String, optional)
* `createdAt` (Timestamp)
* `updatedAt` (Timestamp)
* **`accounts` table (for NextAuth.js):**
* `id` (String, primary key)
* `userId` (UUID, foreign key to `users.id`)
* `type` (String, e.g., 'oauth', 'email')
* `provider` (String)
* `providerAccountId` (String)
* `refresh_token` (Text, optional)
* `access_token` (Text, optional)
* `expires_at` (Timestamp, optional)
* `token_type` (String, optional)
* `scope` (String, optional)
* `id_token` (Text, optional)
* `session_state` (String, optional)
* **`sessions` table (for NextAuth.js):**
* `sessionToken` (String, primary key)
* `userId` (UUID, foreign key to `users.id`)
* `expires` (Timestamp)
* **`verificationTokens` table (for NextAuth.js):**
* `identifier` (String)
* `token` (String)
* `expires` (Timestamp)
* **`bugReports` table:**
* `id` (UUID, primary key)
* `appleReportId` (String, unique, indexed, e.g., 'FB12088655')
* `title` (String)
* `description` (Text)
* `status` (Enum: 'Open', 'Pending Verification', 'Fixed', 'Closed', 'Duplicate')
* `platform` (Enum: 'iOS', 'macOS', 'watchOS', 'tvOS', 'Other')
* `severity` (Enum: 'Low', 'Medium', 'High', 'Critical')
* `submittedAt` (Timestamp)
* `lastVerifiedAt` (Timestamp, optional)
* `closedAt` (Timestamp, optional)
* `submittedBy` (UUID, foreign key to `users.id`)
* `createdAt` (Timestamp)
* `updatedAt` (Timestamp)
* **`votes` table:**
* `id` (UUID, primary key)
* `bugReportId` (UUID, foreign key to `bugReports.id`, indexed)
* `userId` (UUID, foreign key to `users.id`, indexed)
* `createdAt` (Timestamp)
* UNIQUE(`bugReportId`, `userId`)
* **`comments` table:**
* `id` (UUID, primary key)
* `bugReportId` (UUID, foreign key to `bugReports.id`, indexed)
* `userId` (UUID, foreign key to `users.id`, indexed)
* `content` (Text)
* `createdAt` (Timestamp)
* `updatedAt` (Timestamp)
* **`reportUpdates` table:**
* `id` (UUID, primary key)
* `bugReportId` (UUID, foreign key to `bugReports.id`, indexed)
* `updateText` (Text)
* `updateType` (Enum: 'Verification Request', 'Status Change', 'Comment from Apple', 'Other')
* `occurredAt` (Timestamp)
* `createdAt` (Timestamp)
**4. CORE FEATURES & USER FLOW**
* **User Authentication (Sign Up / Sign In):**
* Flow: Users can sign up using their email and password or via OAuth providers (Google, GitHub, Apple Sign-In - if feasible).
* NextAuth.js will handle session management. Protected routes will redirect unauthenticated users to the login page.
* User `id` will be linked to all their submitted reports and votes.
* **Submit a Bug Report:**
* User navigates to 'New Report' page.
* Form fields: Apple Report ID (e.g., FB12088655), Title, Description, Platform (Dropdown), Severity (Dropdown).
* Validation: `appleReportId` must be unique in the system and follow a specific format (e.g., 'FB' followed by numbers). Title and Description are required.
* On submit: A new record is created in the `bugReports` table, linked to the current `userId`.
* User is redirected to the newly created report's detail page.
* **View Bug Reports:**
* **List View (`/reports`):** Displays a paginated list of bug reports, sortable by votes, date submitted, or status. Each item shows Title, Apple ID, Vote Count, Status, and Submitter.
* **Detail View (`/reports/[appleReportId]`):** Displays all information about a specific bug report. Includes Title, Description, Status, Platform, Severity, Submitter, Submission Date. Also shows the vote count and a section for comments and update history.
* **Vote on Bug Reports:**
* On the report list and detail views, authenticated users see a 'Vote Up' button.
* Clicking 'Vote Up' adds a record to the `votes` table linking the `userId` and `bugReportId`.
* The vote count displayed on the report is updated (ideally using optimistic UI updates).
* Users can only vote once per report. Clicking again might un-vote (optional MVP+ feature).
* **Add Comments:**
* On the report detail view, authenticated users can add comments.
* Form: Simple textarea and 'Submit Comment' button.
* On submit: New record in `comments` table linked to `bugReportId` and `userId`.
* Comments are displayed chronologically below the report details.
* **Track Report Updates (Manual/Community Driven):**
* On the report detail view, users (or potentially admins later) can add updates.
* Form: Textarea for update description, dropdown for update type (e.g., 'Verification Request Sent', 'Status Changed to Closed', 'User Confirmed Bug Still Present').
* On submit: New record in `reportUpdates` table.
* This data populates the 'Update History' section.
* *Future Scope:* Integration with Apple's API (if available) or scraping techniques to automate updates.
* **User Dashboard (`/dashboard`):**
* Displays reports submitted by the logged-in user.
* Shows the current status and vote count for each of their reports.
* Provides quick links to manage or view their reports.
**5. API & DATA FETCHING**
* **API Routes (App Router - `app/api/...`):**
* `POST /api/reports`: Create a new bug report.
* `GET /api/reports`: Fetch list of bug reports (with pagination, sorting, filtering).
* `GET /api/reports/[appleReportId]`: Fetch details for a specific bug report.
* `POST /api/reports/[appleReportId]/vote`: Add/remove a vote for a report.
* `POST /api/reports/[appleReportId]/comments`: Add a comment to a report.
* `GET /api/reports/[appleReportId]/comments`: Fetch comments for a report.
* `POST /api/reports/[appleReportId]/updates`: Add an update to a report.
* `GET /api/reports/[appleReportId]/updates`: Fetch updates for a report.
* `GET /api/users/me/reports`: Fetch reports submitted by the current user.
* **Data Fetching Strategy:**
* Server Components will be used for initial page loads where possible, fetching data directly.
* Client Components (using `use client`) will leverage React Query or SWR for dynamic data fetching, caching, revalidation, and mutations (votes, comments, updates).
* Example (Fetching report list in a Server Component): `async function getReports() { const res = await fetch(apiUrl + '/reports?sort=votes&limit=10'); return res.json(); }`
* Example (Voting in a Client Component using SWR): `const { mutate } = useSWRConfig(); const handleVote = async () => { await fetcher('/api/reports/' + reportId + '/vote', { method: 'POST' }); mutate('/api/reports/' + reportId); // Revalidate the report detail }`
**6. COMPONENT BREAKDOWN (Next.js App Router)**
* **`app/layout.tsx`:** Root layout (html, body, main container, global styles, ThemeProvider).
* **`app/page.tsx`:** Landing Page (marketing content, value proposition, CTA).
* **`app/dashboard/page.tsx`:** User Dashboard (displays user's submitted reports, quick actions).
* `components/ReportListItem`
* `components/UserReportList`
* **`app/reports/page.tsx`:** Bug Report List Page.
* `components/ReportTable` (or `ReportCard` for a more visual list)
* `components/SearchBar`
* `components/FilterDropdowns` (Platform, Status, Severity)
* `components/PaginationControls`
* **`app/reports/[appleReportId]/page.tsx`:** Bug Report Detail Page.
* `components/ReportDetailsCard`
* `components/VoteButton`
* `components/CommentSection`
* `components/CommentForm`
* `components/CommentList`
* `components/UpdateHistory`
* `components/AddUpdateForm`
* **`app/reports/new/page.tsx`:** New Bug Report Form Page.
* `components/ReportForm` (using React Hook Form)
* **`app/auth/signin/page.tsx`:** Sign-in Page (using NextAuth.js components or custom form).
* **`app/profile/page.tsx`:** User Profile Page (view/edit basic info).
* **`components/ui/` (shadcn/ui):** Standard components like `Button`, `Input`, `Card`, `DropdownMenu`, `Table`, `Pagination`, `Alert`, `Dialog`, `Skeleton`, `Tabs`, `Textarea`.
* **`components/layout/`:** `Navbar`, `Footer`, `Sidebar` (if needed).
* **`components/providers/`:** `ThemeProvider`, `SWRConfigProvider`.
* **`lib/`:** API client functions, utility functions.
* **`hooks/`:** Custom React hooks (e.g., `useAuth`, `useDebounce`).
* **`styles/globals.css`:** Tailwind CSS base styles.
**7. UI/UX DESIGN & VISUAL IDENTITY**
* **Design Style:** Minimalist Clean with subtle gradient accents.
* **Color Palette:**
* Primary: `#007AFF` (Apple Blue - subtle use)
* Secondary: `#5856D6` (Vibrant Purple for accents/buttons)
* Background: `#FFFFFF` (White for main content areas)
* Dark Background (for dark mode): `#1C1C1E`
* Text (Dark): `#000000`
* Text (Light): `#FFFFFF`
* Muted Text/Borders: `#8E8E93`
* Success/Positive: `#30D158` (Green)
* Warning/Pending: `#FFCC00` (Yellow)
* Error/Closed: `#FF4535` (Red)
* **Typography:** San Francisco (system font stack) or a clean sans-serif like Inter.
* Headings: Bold, varying sizes (e.g., 36px, 24px, 18px)
* Body Text: Regular, 16px
* **Layout:** Focus on clear information hierarchy. Use cards for distinct content blocks (reports, comments). Ample whitespace. Responsive design targeting mobile-first, then scaling up for tablet and desktop.
* **Sections:** Consistent header/navbar, main content area, footer.
* **Responsiveness:** Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`) will be used extensively. Ensure layouts adapt gracefully.
**8. SAMPLE/MOCK DATA**
* **Bug Report 1:**
* `appleReportId`: "FB12088655"
* `title`: "Privacy: Network filter extension TCP connection and IP address leak"
* `description`: "When using a network filter extension, TCP connections and associated IP addresses are leaked, bypassing the filter."
* `status`: "Pending Verification"
* `platform`: "macOS"
* `severity`: "High"
* `submittedAt`: "2023-03-25T10:00:00Z"
* `votes`: 152
* **Bug Report 2:**
* `appleReportId`: "FB98765432"
* `title`: "Mail app crashes when attaching large (>50MB) files"
* `description`: "The native Mail application on macOS Sonoma 14.2 consistently crashes when attempting to attach files larger than 50 megabytes."
* `status`: "Open"
* `platform`: "macOS"
* `severity`: "Medium"
* `submittedAt`: "2024-01-10T14:30:00Z"
* `votes`: 78
* **Bug Report 3:**
* `appleReportId`: "FB11223344"
* `title`: "System Settings "Sharing" pane fails to load"
* `description`: "Clicking on the 'Sharing' option within System Settings results in a spinning loader that never resolves."
* `status`: "Closed"
* `platform`: "iOS"
* `severity`: "Low"
* `submittedAt`: "2023-11-01T09:15:00Z"
* `votes`: 25
* **Comment on Report 1:**
* `userId`: "user-abcde"
* `content`: "I can confirm this issue still exists on macOS 14.4 beta. The leak is significant for privacy."
* `createdAt`: "2024-03-15T11:05:00Z"
* **Update on Report 2:**
* `bugReportId`: "FB98765432"
* `updateText`: "User reported needing to verify on macOS 14.5 beta. Verification request sent by Apple 2 days ago."
* `updateType`: "Verification Request"
* `occurredAt`: "2024-03-20T16:00:00Z"
* **User Profile:**
* `id`: "user-abcde"
* `name`: "Alex Chen"
* `email`: "alex.chen@example.com"
**9. TURKISH TRANSLATIONS (Key UI Elements)**
* **App Title:** Hata Raporu Dostu
* **Sign In / Sign Up:** Giriş Yap / Kayıt Ol
* **Dashboard:** Kontrol Paneli
* **New Report:** Yeni Rapor
* **Submit Report:** Rapor Gönder
* **My Reports:** Raporlarım
* **All Reports:** Tüm Raporlar
* **Report Title:** Rapor Başlığı
* **Description:** Açıklama
* **Status:** Durum
* **Platform:** Platform
* **Severity:** Ciddiyet
* **Votes:** Oy
* **Vote Up:** Oy Ver
* **Add Comment:** Yorum Ekle
* **Comments:** Yorumlar
* **Update History:** Güncelleme Geçmişi
* **Submit:** Gönder
* **Cancel:** İptal
* **Search:** Ara
* **Filter:** Filtrele
* **Loading...:** Yükleniyor...
* **No reports found:** Rapor bulunamadı.
* **Error:** Hata
* **Verification Required:** Doğrulama Gerekli
* **Open:** Açık
* **Closed:** Kapalı
* **Fixed:** Düzeltildi
**10. ANIMATIONS & EDGE CASES**
* **Animations:**
* Subtle hover effects on buttons and interactive elements.
* Smooth transitions for route changes.
* Loading skeletons or spinners for data fetching states.
* Fade-in animations for new comments or updates.
* **Edge Cases:**
* **No Reports:** Display a clear message and a CTA to add the first report when the reports list is empty.
* **User Not Authenticated:** Redirect to login page for protected actions (voting, commenting, submitting).
* **API Errors:** Graceful error handling with user-friendly messages (e.g., using toast notifications).
* **Form Validation:** Real-time validation feedback using Zod and React Hook Form.
* **Duplicate Reports:** Handle potential duplicate `appleReportId` submissions (though DB constraint helps).
* **Rate Limiting:** Implement basic rate limiting on API endpoints like voting or commenting to prevent abuse.
* **Data Integrity:** Ensure vote counts are accurate, comments are linked correctly, etc. Use database transactions where necessary.
* **Apple ID Format:** Strict validation for the Apple Report ID format.
* **Empty States:** Design for empty states within comments, updates, and user dashboards.
This prompt provides a comprehensive blueprint for generating a fully functional, multi-page Next.js MVP application for Bug Report Buddy. It covers project scope, technical details, database design, user flows, API structure, UI components, design aesthetics, mock data, translations, and crucial edge case handling.