Generate a fully functional, multi-page Next.js 14 (App Router) MVP application for 'DeployWhisper'. This application, inspired by the Hacker News post 'DeployTarot.com', aims to provide a unique, metaphorical lens on software deployment risks and uncertainties. The core idea is to map common deployment scenarios to 'Tarot-like' card readings, offering insights, potential risks, and advice. The application should be visually engaging, interactive, and provide a sense of playful guidance rather than actual predictive power.
**PROJECT OVERVIEW:**
DeployWhisper is a SaaS application that offers a metaphorical interpretation of software deployment risks and uncertainties. It uses a system of 'deployment cards' analogous to Tarot cards, where users select a deployment scenario (e.g., 'API Release', 'DB Migration', 'Hotfix in Production'), and the app generates a 'reading' based on predefined interpretations for that scenario. The value proposition lies in providing a lighthearted yet thought-provoking way for development teams to discuss, anticipate, and potentially mitigate risks associated with shipping code. It's designed to be a conversation starter and a tool for mindful deployment practices, wrapped in an engaging, mystical-themed UI.
**TECH STACK:**
- **Framework:** Next.js 14 (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS v3
- **UI Components:** shadcn/ui (leveraging Radix UI primitives and Tailwind CSS)
- **ORM:** Drizzle ORM with a PostgreSQL database (using Neon.tech or Supabase for hosting)
- **Authentication:** NextAuth.js (using credentials provider for initial setup, can extend to OAuth)
- **State Management:** React Context API for global state, local component state for UI interactions.
- **Form Handling:** React Hook Form with Zod for validation.
- **Deployment/Hosting:** Vercel
- **Iconography:** Lucide React
**DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
1. **`users` table:**
- `id`: uuid (primary key, default gen_random_uuid())
- `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())
2. **`accounts` table:** (For NextAuth.js)
- `id`: uuid (primary key, default gen_random_uuid())
- `userId`: uuid (references `users.id` on delete cascade)
- `type`: text
- `provider`: text
- `providerAccountId`: text
- `refresh_token`: text
- `access_token`: text
- `expires_at`: bigint
- `token_type`: text
- `scope`: text
- `id_token`: text
- `session_state`: text
3. **`sessions` table:** (For NextAuth.js)
- `id`: uuid (primary key, default gen_random_uuid())
- `sessionToken`: text (unique)
- `userId`: uuid (references `users.id` on delete cascade)
- `expires`: timestamp (with time zone)
4. **`verificationTokens` table:** (For NextAuth.js)
- `identifier`: text
- `token`: text
- `expires`: timestamp (with time zone)
5. **`deploymentScenarios` table:**
- `id`: uuid (primary key, default gen_random_uuid())
- `name`: text (e.g., 'API Release', 'DB Migration')
- `description`: text
- `iconName`: text (Lucide icon name)
- `createdAt`: timestamp (with time zone, default now())
6. **`deploymentCards` table:**
- `id`: uuid (primary key, default gen_random_uuid())
- `scenarioId`: uuid (references `deploymentScenarios.id` on delete cascade)
- `title`: text (e.g., 'The Contract Changes', 'The Database Watches')
- `interpretation`: text (Detailed explanation of risk/outcome)
- `advice`: text (Actionable recommendations)
- `imageUrl`: text (Optional path for card image)
- `orderInScenario`: integer (For ordering cards within a scenario)
- `createdAt`: timestamp (with time zone, default now())
7. **`userReadings` table:**
- `id`: uuid (primary key, default gen_random_uuid())
- `userId`: uuid (references `users.id` on delete cascade)
- `scenarioId`: uuid (references `deploymentScenarios.id` on delete cascade)
- `selectedCardIds`: uuid[] (Array of card IDs 'drawn' for this reading)
- `userNotes`: text (Optional user notes about the reading)
- `feedbackRating`: integer (e.g., 1-5 for accuracy/usefulness)
- `feedbackComment`: text
- `createdAt`: timestamp (with time zone, default now())
**CORE FEATURES & USER FLOW:**
1. **Authentication (Sign Up / Sign In):**
- User lands on the homepage.
- Clicks 'Sign In' or 'Sign Up'.
- Presented with a modal or dedicated page for authentication (email/password initially).
- Upon successful authentication, redirects to the main dashboard/reading page.
- **Flow:** Landing -> Auth Modal -> Enter Credentials -> Submit -> Redirect to Dashboard.
2. **Scenario Selection:**
- Authenticated user navigates to the 'Get a Reading' or 'New Reading' page.
- A visually appealing grid or list of predefined `deploymentScenarios` is displayed, each with an icon and name.
- User clicks on a desired scenario.
- **Flow:** Dashboard -> Click 'New Reading' -> Select Scenario from Grid.
3. **Card Reading Generation:**
- After selecting a scenario, the user is taken to the 'Reading' page for that scenario.
- The system fetches associated `deploymentCards` for the selected `scenarioId`.
- A random subset of cards (e.g., 3 cards for a 'past, present, future' metaphor) is selected from the available cards for that scenario.
- The selected `selectedCardIds` are stored in a new `userReadings` record.
- The UI displays the selected cards visually, along with their `title`, `interpretation`, and `advice` fetched from the `deploymentCards` table.
- **Flow:** Select Scenario -> System Fetches Cards -> Displays Selected Cards with Details.
4. **Viewing Past Readings:**
- User can access a 'Past Readings' or 'History' page from their dashboard.
- This page lists previous `userReadings` records, showing the scenario, date, and perhaps a summary.
- User clicks on a past reading to view the full details (cards, interpretations, notes, feedback).
- **Flow:** Dashboard -> Click 'History' -> Select Past Reading -> View Details.
5. **Providing Feedback:**
- On the 'Reading Details' page (for current or past readings), a feedback section is available.
- Users can rate the reading's perceived accuracy/usefulness (e.g., 1-5 stars) and optionally leave a comment.
- The `feedbackRating` and `feedbackComment` are saved to the corresponding `userReadings` record.
- **Flow:** View Reading -> Fill Feedback Form -> Submit -> Data Saved.
6. **(Future MVP+) Custom Scenario Creation:**
- A dedicated section for users to define their own deployment scenarios, including naming, describing, and potentially associating custom cards (requires more complex UI and DB structure).
**API & DATA FETCHING (Next.js App Router):**
- **Server Components:** Utilize Next.js Server Components for fetching data directly from the database for initial page loads (e.g., dashboard, scenario selection, reading display) to ensure SEO and performance.
- **Client Components:** Use Client Components for interactive elements like forms, buttons, and stateful UI parts.
- **Route Handlers (API Routes):** Create API routes in `app/api/` for actions requiring server-side logic that isn't directly part of initial render, such as submitting feedback or handling authentication callbacks.
- **Example API Route (`POST /api/feedback`):**
- **Request Body:** `{ readingId: string, rating: number, comment?: string }`
- **Logic:** Authenticate user, validate input, find `userReadings` record by `readingId` and `userId`, update `feedbackRating` and `feedbackComment`.
- **Response:** `{ success: boolean, message?: string }`
- **Data Fetching Examples:**
- **`app/page.tsx` (Landing/Auth):** Server component, fetches minimal data or renders UI directly.
- **`app/dashboard/page.tsx`:** Server component. Fetches user's recent readings list (`SELECT * FROM userReadings WHERE userId = ? ORDER BY createdAt DESC LIMIT 5`). Renders UI with components expecting this data.
- **`app/readings/[scenarioId]/page.tsx`:** Server component. Fetches `deploymentScenarios` and associated `deploymentCards` (`SELECT * FROM deploymentScenarios WHERE id = ?; SELECT * FROM deploymentCards WHERE scenarioId = ?`). Generates a random reading (client-side or server-side logic), saves `userReadings`, and renders the reading details.
- **`app/readings/[readingId]/page.tsx`:** Server component. Fetches a specific `userReadings` record and its associated cards (`SELECT * FROM userReadings ur JOIN deploymentScenarios ds ON ur.scenarioId = ds.id JOIN deploymentCards dc ON dc.id = ANY(ur.selectedCardIds) WHERE ur.id = ?`). Renders detailed reading view with feedback form.
**UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** Mystical, Minimalist, with subtle dark/gradient themes. Think 'cosmic library meets modern dashboard'.
- **Color Palette:** Primary: Deep Navy (#0A192F), Secondary: Dark Charcoal (#1E2A3A), Accent: Mystic Purple (#6B46C1) and Celestial Gold (#DAA520), Text: Off-white (#E2E8F0). Use subtle gradients for backgrounds and card elements.
- **Typography:** Use a clean, modern sans-serif font like 'Inter' for body text and UI elements. For headings and titles, consider a slightly more stylized but still readable font like 'Playfair Display' or 'Merriweather' for a touch of elegance.
- **Layout:** Responsive grid system for scenarios and cards. Clear separation of concerns: navigation, main content area, and interactive elements. Use cards for displaying individual pieces of information (scenarios, readings, advice).
- **Visual Elements:** Subtle background animations (e.g., slowly moving starry sky, faint nebula effects). Card designs should be abstract and evocative, not literal Tarot imagery. Use icons from Lucide React for clarity.
- **Responsive Rules:** Mobile-first approach. Ensure usability on screens as small as 360px width. Utilize Tailwind's responsive modifiers (sm:, md:, lg:) extensively. Navigation should collapse into a hamburger menu on smaller screens.
**COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/layout.tsx`:** Root layout. Includes `<html>`, `<body>`, global providers (e.g., ThemeProvider, AuthSessionProvider), Tailwind CSS setup, global styles, and navigation.
- **`app/page.tsx`:** Landing page. Includes hero section, feature highlights, call to action (Sign Up/In), possibly links to public readings or scenarios. Uses Server Components primarily.
- **`app/auth/signin/page.tsx`:** Dedicated sign-in page (or modal implemented within `layout.tsx`). Uses Client Components for forms.
- **`app/dashboard/page.tsx`:** User dashboard after login. Displays summary of recent readings, quick access to 'New Reading'. Server Component fetching user data and reading history.
- **`app/readings/new/page.tsx`:** Page to select a deployment scenario. Displays grid of `deploymentScenarios`. Client Component for interaction, Server Component for data fetching.
- **`app/readings/[scenarioId]/page.tsx`:** Displays the 'reading' for a selected scenario. Fetches scenario details and associated cards. Generates and displays the drawn cards, interpretations, and advice. Might include a 'Save Reading' or 'Provide Feedback' button. Primarily Server Component with Client Components for interaction.
- **`app/readings/history/page.tsx`:** Lists all past `userReadings` for the logged-in user. Server Component fetching data.
- **`app/readings/history/[readingId]/page.tsx`:** Displays the full details of a specific past reading, including user notes and feedback. Server Component fetching data, Client Component for feedback form.
- **`app/settings/page.tsx`:** User profile and settings page (future expansion).
- **Shared Components (`components/ui/` via shadcn/ui):** Button, Card, Input, Label, Modal, Tabs, Sheet, Tooltip, Avatar, etc.
- **Custom Components (`components/`):**
- `AuthButton`: Handles sign-in/sign-out state.
- `ScenarioCard`: Displays a single deployment scenario option.
- `DeploymentCard`: Displays a single 'deployment card' in a reading.
- `ReadingDisplay`: Renders the layout of multiple cards for a reading.
- `FeedbackForm`: Form for submitting reading feedback.
- `Navbar`: Top navigation bar.
- `Footer`: Page footer.
- `StarRating`: Component for feedback rating.
**ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/slide-in animations for new page content using `AnimatePresence` from `framer-motion` (if needed, otherwise rely on Next.js defaults).
- **Card Flourish:** When cards are 'drawn', use a subtle scale-up and fade-in effect. Maybe a slight rotation. Card reveals can be staggered.
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons and scenario cards.
- **Loading States:** Use Tailwind spinners or shadcn/ui's `Skeleton` component for data loading placeholders. Integrate with Next.js `loading.tsx`.
- **Button Interactions:** Slight press-down effect on click.
**EDGE CASES & VALIDATION:**
- **Authentication:** Handle invalid credentials, email verification status (if implemented), session expiry. Implement protected routes. Redirect unauthenticated users appropriately.
- **Data Validation:** Use Zod with React Hook Form for all user inputs (feedback forms, sign-up/sign-in). Server-side validation in API routes is crucial.
- **Empty States:** Design visually appealing empty states for 'Past Readings' if the user has none yet. Provide clear calls to action.
- **Error Handling:** Implement try-catch blocks in data fetching and API routes. Display user-friendly error messages (e.g., using Toaster notifications from shadcn/ui). Handle 404s gracefully for invalid routes/IDs.
- **Database Errors:** Ensure Drizzle ORM catches and handles potential database connection issues or query errors.
- **API Rate Limiting:** Consider for future public API expansion.
**SAMPLE DATA (for `deploymentScenarios` and `deploymentCards` tables):**
**`deploymentScenarios`:**
1. `{ id: uuid(), name: 'API Release', description: 'Shipping a new version of your public API.', iconName: 'cloud-upload' }`
2. `{ id: uuid(), name: 'DB Migration', description: 'Altering the structure of your production database.', iconName: 'database' }`
3. `{ id: uuid(), name: 'Hotfix in Production', description: 'Urgent fix deployed directly to the live environment.', iconName: 'flame' }`
4. `{ id: uuid(), name: 'Feature Flag Rollout', description: 'Enabling a new feature via a feature flag.', iconName: 'flag' }`
5. `{ id: uuid(), name: 'Dependency Update', description: 'Updating libraries or packages in your stack.', iconName: 'package' }`
**`deploymentCards` (Example for 'API Release' Scenario, scenarioId = ID of 'API Release'):**
1. `{ id: uuid(), scenarioId: API_ID, title: 'The Contract Changes', interpretation: 'The API contract has evolved. Clients may not be aware of the breaking changes, leading to unexpected integration failures.', advice: 'Communicate changes clearly. Use versioning. Provide client SDK updates.', orderInScenario: 1 }`
2. `{ id: uuid(), scenarioId: API_ID, title: 'The Load Balancer Wobbles', interpretation: 'Increased traffic or unforeseen request patterns might strain your API servers behind the load balancer.', advice: 'Monitor server metrics closely. Consider scaling up resources proactively. Implement rate limiting.', orderInScenario: 2 }`
3. `{ id: uuid(), scenarioId: API_ID, title: 'Documentation Lag', interpretation: 'Your API documentation has not kept pace with the latest changes, confusing consumers.', advice: 'Update documentation simultaneously with the release. Use tools for automatic documentation generation.', orderInScenario: 3 }`
4. `{ id: uuid(), scenarioId: API_ID, title: 'The Silent Endpoint', interpretation: 'A critical endpoint is returning unexpected results or errors silently, masked by other successes.', advice: 'Implement comprehensive smoke tests and synthetic monitoring for key endpoints.', orderInScenario: 4 }`
5. `{ id: uuid(), scenarioId: API_ID, title: 'Client Cache Invalidation', interpretation: 'Clients relying on cached responses may be using stale data, causing inconsistencies.', advice: 'Implement robust cache invalidation strategies. Consider short TTLs for critical data.', orderInScenario: 5 }`
**`deploymentCards` (Example for 'DB Migration' Scenario, scenarioId = ID of 'DB Migration'):**
1. `{ id: uuid(), scenarioId: DB_ID, title: 'The Data Drift', interpretation: 'The migration alters data in a way that introduces subtle inconsistencies or requires significant data transformation downstream.', advice: 'Perform dry runs. Validate data integrity post-migration. Plan for data rollback.', orderInScenario: 1 }`
2. `{ id: uuid(), scenarioId: DB_ID, title: 'Downtime Horizon', interpretation: 'The migration process requires a significant downtime window, impacting service availability.', advice: 'Schedule during low-traffic periods. Explore zero-downtime migration strategies (e.g., blue-green).', orderInScenario: 2 }`
3. `{ id: uuid(), scenarioId: DB_ID, title: 'The Unexpected Constraint', interpretation: 'A newly applied database constraint prevents valid data from being inserted or updated post-migration.', advice: 'Thoroughly review all constraints and data validation rules before applying.', orderInScenario: 3 }`
This comprehensive prompt should enable an AI assistant to generate a robust and visually appealing MVP for DeployWhisper.