T3 Stack Application

Build a production-ready full-stack application using the T3 Stack (Next.js, tRPC, Prisma, NextAuth, Tailwind) with the following specifications:

Application Overview

• App Name: [e.g., TaskManager, BlogPlatform, SocialHub]
• App Purpose: [What does this application do?]
• Target Users: [Who will use this app?]
• Deployment Target: [Vercel / Railway / Docker / Self-hosted]

Core Features

Define 4-8 main features with their data requirements:

Feature 1: [Feature Name]

• Description: [What this feature does]
• User Access: [Public / Protected / Admin only]
• CRUD Operations: [Create / Read / Update / Delete - which ones?]
• Real-time Updates: [Yes / No]
• Pagination Required: [Yes / No]

Feature 2: [Feature Name]

• Description: [What this feature does]
• User Access: [Public / Protected / Admin only]
• CRUD Operations: [Which operations?]
• Real-time Updates: [Yes / No]
• Pagination Required: [Yes / No]

[Continue for 4-8 features]

Database Schema (Prisma)

Define your data models and relationships:

Model 1: [ModelName]

• Fields:
  • id: [String (cuid) / Int (autoincrement) / UUID]
  • [field1]: [String / Int / Boolean / DateTime / Json / Enum]
  • [field2]: [Type with constraints: @unique, @default(), etc.]
  • createdAt: DateTime @default(now())
  • updatedAt: DateTime @updatedAt
• Relations: [List related models: User, Post, Comment, etc.]
• Indexes: [Fields to index for performance]

Model 2: [ModelName]

• Fields: [List all fields with types]
• Relations: [Related models]
• Indexes: [Performance indexes]

[Define 3-6 models total]

Authentication & Authorization

• Auth Provider: [GitHub / Google / Discord / Email/Password / Multiple]
• User Roles: [None / Basic roles: user, admin / Custom roles]
• Protected Routes: [List routes requiring authentication]
• Session Strategy: [JWT / Database sessions]
• Redirect Behavior: [Where to redirect after login/logout]

tRPC API Routes

For each feature, define the tRPC procedures:

Router 1: [RouterName] (e.g., post, user, comment)

• Public Procedures:

  • getAll - [Description, filters, sorting, pagination]
  • getById - [What data to include/exclude]
  • [customQuery] - [Purpose and parameters]

• Protected Procedures:

  • create - [Input validation schema with Zod]
  • update - [Input schema, authorization checks]
  • delete - [Authorization logic]
  • [customMutation] - [Purpose and validation]

Router 2: [RouterName]

[Define procedures following same pattern]

Frontend Pages & Components

Define the page structure:

Page 1: / (Home)

• Purpose: [Landing page / Dashboard / List view]
• Data Fetched: [Which tRPC queries]
• Components: [List main components: Header, List, Card, etc.]
• Interactivity: [Search, filter, sort, pagination, etc.]

Page 2: /[route]

• Purpose: [What this page shows]
• Data Fetched: [tRPC queries used]
• Components: [Component breakdown]
• Interactivity: [User interactions]

Page 3: /[dynamic]/[id]

• Purpose: [Detail view / Edit form / etc.]
• Data Fetched: [Queries with params]
• Components: [Component list]
• Forms: [If applicable, form fields and validation]

[Define 5-10 pages total]

UI/UX Requirements

• Design Style: [Modern / Minimal / Corporate / Playful]
• Color Scheme: [Specific colors or "use Tailwind defaults"]
• Layout: [Sidebar / Top nav / Dashboard / Custom]
• Responsive Design: [Mobile-first / Desktop-first / Both]
• Loading States: [Skeleton screens / Spinners / Progress bars]
• Error Handling: [Toast notifications / Inline errors / Error pages]
• Empty States: [Custom messages and CTAs]

State Management

• Client State: [React Query (tRPC) only / Additional Zustand / Context API]
• Form Handling: [React Hook Form / Formik / Native]
• Optimistic Updates: [Yes for: [SPECIFY] / No]
• Cache Invalidation: [Automatic / Manual / Specific patterns]

Additional Features

• File Uploads: [Yes with: [Uploadthing / S3 / Cloudinary] / No]
• Image Optimization: [Next.js Image / Custom / None]
• SEO: [Metadata for all pages / Basic / None]
• Analytics: [Google Analytics / Vercel Analytics / None]
• Error Tracking: [Sentry / LogRocket / None]
• Email Notifications: [Resend / SendGrid / None]
• Search Functionality: [Full-text search / Simple filter / None]
• Dark Mode: [Yes / No]

Environment Variables

List all required environment variables:

DATABASE_URL="postgresql://..."
NEXTAUTH_SECRET="..."
NEXTAUTH_URL="http://localhost:3000"
[AUTH_PROVIDER]_CLIENT_ID="..."
[AUTH_PROVIDER]_CLIENT_SECRET="..."
[ADDITIONAL_VARS]="..."

Project Structure Preferences

• App Router: [Use Next.js 14 App Router]
• Component Organization: [Feature-based / Type-based / Flat]
• Styling Approach: [Tailwind utilities / Component classes / CSS modules]
• Type Safety: [Strict mode / Standard / Relaxed]

Code Generation Requirements

Generate a complete T3 Stack application including:

1. Project Initialization:

   • T3 app setup command with selected options
   • All necessary dependencies in package.json
   • Environment variable template (.env.example)

2. Database Layer:

   • Complete Prisma schema with all models, relations, and indexes
   • Seed script with sample data
   • Migration setup instructions

3. tRPC API:

   • All router files with procedures (queries and mutations)
   • Input validation schemas using Zod
   • Error handling with TRPCError
   • Proper authorization checks
   • Type-safe context usage

4. Authentication:

   • NextAuth configuration with specified providers
   • Protected procedure middleware
   • Session handling utilities
   • Sign-in/sign-out pages

5. Frontend Pages:

   • All page components using App Router
   • Server and client components appropriately
   • Data fetching with tRPC React hooks
   • Loading and error states
   • Responsive layouts

6. UI Components:

   • Reusable components (forms, cards, modals, etc.)
   • Tailwind styling following design requirements
   • Type-safe props with TypeScript
   • Accessibility considerations

7. Forms & Validation:

   • Form components with validation
   • Error message display
   • Optimistic updates where specified
   • Success/error feedback

8. Configuration Files:

   • next.config.js with optimizations
   • tailwind.config.ts with custom theme
   • tsconfig.json with strict settings
   • .eslintrc.cjs with recommended rules

Output production-ready, type-safe code following T3 Stack best practices with:

• End-to-end type safety from database to UI
• Proper error handling at all layers
• Optimistic updates for better UX
• Server-side rendering where beneficial
• Client-side interactivity where needed
• Comprehensive TypeScript types
• Clean, maintainable code structure