## AI Discourse Hub: Next.js MVP Generation Prompt
**1. PROJECT OVERVIEW:**
AI Discourse Hub is a comprehensive SaaS platform designed to foster and centralize discussions around Artificial Intelligence. Following the trend of key acquisitions in the AI space (like OpenAI's acquisition of TBPN), this platform addresses the growing need for a dedicated, structured environment where AI professionals, researchers, developers, policymakers, and enthusiasts can engage in meaningful conversations, share insights, and stay updated on the latest developments. The core value proposition is to provide a high-quality, curated space for constructive dialogue, expert analysis, and community building within the rapidly evolving AI landscape. It aims to be the go-to platform for understanding and shaping the future of AI.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (with PostgreSQL or SQLite)
- **UI Library:** shadcn/ui (for accessible, re-usable components)
- **Authentication:** NextAuth.js (for robust authentication, supporting email/password and OAuth providers like Google, GitHub)
- **State Management:** React Context API and server state management (e.g., React Query or custom hooks)
- **Database:** PostgreSQL (preferred) or SQLite (for simpler setups)
- **Form Handling:** React Hook Form with Zod for validation
- **Deployment:** Vercel (recommended)
- **Other Libraries:** `clsx` for conditional class names, `lucide-react` for icons.
**3. DATABASE SCHEMA:**
**`users` Table:**
- `id`: UUID (Primary Key)
- `name`: VARCHAR(255)
- `email`: VARCHAR(255) UNIQUE NOT NULL
- `emailVerified`: TIMESTAMP WITH TIME ZONE
- `image`: TEXT (URL to profile picture)
- `hashedPassword`: TEXT (for email/password auth)
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
- `updatedAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
**`accounts` Table (for NextAuth.js):**
- `id`: BIGSERIAL PRIMARY KEY
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `type`: VARCHAR(255) NOT NULL // 'oauth' or 'email'
- `provider`: VARCHAR(255) NOT NULL
- `providerAccountId`: VARCHAR(255) NOT NULL
- `refresh_token`: TEXT
- `access_token`: TEXT
- `expires_at`: BIGINT
- `token_type`: VARCHAR(255)
- `scope`: VARCHAR(255)
- `id_token`: TEXT
- `session_state`: VARCHAR(255)
- UNIQUE (`provider`, `providerAccountId`)
**`sessions` Table (for NextAuth.js):**
- `sessionToken`: VARCHAR(255) PRIMARY KEY
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `expires`: TIMESTAMP WITH TIME ZONE NOT NULL
**`verificationTokens` Table (for NextAuth.js):**
- `identifier`: VARCHAR(255) NOT NULL
- `token`: VARCHAR(255) NOT NULL
- `expires`: TIMESTAMP WITH TIME ZONE NOT NULL
- PRIMARY KEY (`identifier`, `token`)
**`topics` Table:**
- `id`: UUID (Primary Key)
- `slug`: VARCHAR(100) UNIQUE NOT NULL (e.g., 'generative-ai', 'ai-ethics')
- `name`: VARCHAR(255) NOT NULL (e.g., 'Generative AI', 'AI Ethics')
- `description`: TEXT
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
**`posts` Table:**
- `id`: UUID (Primary Key)
- `topicId`: UUID REFERENCES `topics`(`id`) ON DELETE CASCADE
- `authorId`: UUID REFERENCES `users`(`id`) ON DELETE SET NULL
- `title`: VARCHAR(255) NOT NULL
- `content`: TEXT NOT NULL
- `slug`: VARCHAR(255) UNIQUE NOT NULL
- `isExpertContent`: BOOLEAN DEFAULT FALSE
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
- `updatedAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
**`comments` Table:**
- `id`: UUID (Primary Key)
- `postId`: UUID REFERENCES `posts`(`id`) ON DELETE CASCADE
- `authorId`: UUID REFERENCES `users`(`id`) ON DELETE SET NULL
- `content`: TEXT NOT NULL
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
- `updatedAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
**`votes` Table (for Posts and Comments):**
- `id`: UUID (Primary Key)
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `postId`: UUID REFERENCES `posts`(`id`) ON DELETE CASCADE
- `commentId`: UUID REFERENCES `comments`(`id`) ON DELETE CASCADE
- `voteType`: INTEGER NOT NULL // 1 for upvote, -1 for downvote
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
- UNIQUE (`userId`, `postId`)
- UNIQUE (`userId`, `commentId`)
**`chatRooms` Table:**
- `id`: UUID (Primary Key)
- `topicId`: UUID REFERENCES `topics`(`id`) ON DELETE CASCADE
- `name`: VARCHAR(255) NOT NULL
- `description`: TEXT
- `scheduledTime`: TIMESTAMP WITH TIME ZONE
- `durationMinutes`: INTEGER
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
**`chatMessages` Table:**
- `id`: UUID (Primary Key)
- `chatRoomId`: UUID REFERENCES `chatRooms`(`id`) ON DELETE CASCADE
- `senderId`: UUID REFERENCES `users`(`id`) ON DELETE SET NULL
- `content`: TEXT NOT NULL
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
**4. CORE FEATURES & USER FLOW:**
**a) Authentication (Sign Up, Sign In, OAuth):**
- **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Sign In'.
- **Sign Up:** Presented with options: Email/Password or OAuth (Google, GitHub).
- Email/Password: Fills email, password, confirm password. On submit, validation runs. If valid, user created in DB, login session initiated, redirected to dashboard. Email verification email sent.
- OAuth: Clicks provider button. Redirected to provider's auth page. Upon successful auth, user is created/found in DB, session initiated, redirected to dashboard.
- **Sign In:** Presented with options: Email/Password or OAuth.
- Email/Password: Fills email, password. On submit, validation runs. If valid, user logged in, session initiated, redirected to dashboard.
- OAuth: Same flow as Sign Up.
- **Edge Cases:** Invalid credentials, existing email, server errors, network issues.
**b) Topic-Based Discussion Forums:**
- **Flow:** Authenticated user navigates to 'Forums' or selects a topic from the homepage/navigation.
- **View Topics:** Displays a list of available topics (e.g., 'Generative AI', 'AI Ethics').
- **View Posts:** User clicks a topic. Displays a list of posts within that topic, sorted by recency or popularity. Each post shows title, author, snippet, vote count, comment count.
- **Create Post:** User clicks 'New Post' button within a topic. A form appears (modal or separate page) asking for title and content. Input is validated. On submit, a new post is created in the DB associated with the topic and the logged-in user. Redirected to the new post's page.
- **View Post Details:** User clicks a post. Displays full post content, author info, creation date. Below, displays comments sorted by recency. 'Add Comment' form is available.
- **Create Comment:** User types comment in the form and submits. Validation runs. Comment saved to DB, associated with the post and author. Page updates to show the new comment.
- **Voting:** Users can upvote/downvote posts and comments. Clicking a vote button updates the vote count in the UI (optimistically) and persists the vote to the DB. Users can only vote once per item.
- **Edge Cases:** Empty topics, no posts, deleted posts/comments, author anonymity (if author deleted).
**c) Expert Content & Articles:**
- **Flow:** A dedicated 'Experts' or 'Articles' section in the navigation.
- **View Articles:** Displays a curated list of articles/posts marked as 'Expert Content'. These might be longer-form, more in-depth analyses.
- **Content Creation (Admin/Moderator Role):** Specific roles will have the ability to create 'Expert Content' via a richer text editor. This content is clearly distinguished in the UI.
- **Edge Cases:** No expert content available, access control for creation.
**d) Live Chat Rooms:**
- **Flow:** User navigates to 'Live Chats'. Sees a list of scheduled or ongoing chat rooms, associated with specific topics.
- **Join Chat:** User clicks 'Join' on a chat room. Enters a real-time chat interface.
- **Real-time Messaging:** Users can send messages. Messages appear in real-time for all participants. Displays sender name and timestamp.
- **Scheduling:** Admins/Moderators can schedule new chat rooms with a topic, name, and time.
- **Edge Cases:** Chat room full, chat ended, network disconnections, message broadcasting failures.
**5. API & DATA FETCHING:**
- **Approach:** Utilize Next.js App Router's Server Components for data fetching where possible to improve performance and reduce client-side load. API Routes (within `app/api/`) will be used for mutations and actions requiring server-side logic (e.g., creating posts, comments, handling votes).
- **Fetching:** Use `fetch` with appropriate caching strategies (ISR, SSG, CSR as needed). For mutations, use `fetch` in API routes or Server Actions.
- **Examples:**
- `GET /api/topics`: Fetch all topics.
- `GET /api/topics/[slug]/posts`: Fetch posts for a specific topic.
- `POST /api/posts`: Create a new post (requires auth).
- `GET /api/posts/[postId]`: Fetch a single post with its comments.
- `POST /api/posts/[postId]/comments`: Add a comment to a post (requires auth).
- `POST /api/posts/[postId]/vote`: Vote on a post (requires auth).
- `POST /api/chat/rooms/{roomId}/messages`: Send a chat message (real-time via WebSockets).
- **Data Structure:** API responses should be well-structured JSON. Server Components will directly return JSX or fetch data and pass it as props.
**6. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern Minimalist Clean with subtle AI-inspired elements.
- **Color Palette:**
- Primary: `#0A0A0A` (Deep Black)
- Secondary: `#FFFFFF` (Pure White)
- Accent: `#3B82F6` (Vibrant Blue - for primary actions, links)
- Subtle Accent: `#60A5FA` (Lighter Blue - for secondary actions, highlights)
- Background: `#F3F4F6` (Light Gray - for content areas)
- Subtle Background: `#E5E7EB` (Slightly Darker Gray - for cards, sections)
- Success: `#10B981` (Green)
- Warning: `#F59E0B` (Amber)
- Danger: `#EF4444` (Red)
- **Typography:**
- Headings: Inter (Bold, SemiBold)
- Body Text: Inter (Regular)
- **Layout:** Clean, spacious layout with clear visual hierarchy. Use a grid system (e.g., 12-column). Sidebar navigation for main sections, content area in the center. Card-based design for posts and topics.
- **Responsiveness:** Mobile-first approach. Fully responsive design adapting seamlessly from mobile to tablet to desktop.
- **Interactivity:** Subtle hover effects on buttons and links. Smooth transitions between pages and states.
**7. COMPONENT BREAKDOWN (Next.js App Router Structure):**
`app/`
`layout.tsx` (Root layout, includes providers, global styles, base structure)
`page.tsx` (Homepage - features, featured topics, latest posts)
`loading.tsx` (Global loading indicator)
`error.tsx` (Global error handler)
`(auth)/` (Route group for auth pages)
`layout.tsx` (Auth layout - centered form)
`login/page.tsx` (Login form)
`signup/page.tsx` (Signup form)
`(app)/` (Authenticated routes)
`layout.tsx` (Authenticated app layout - sidebar, header)
`dashboard/page.tsx` (User dashboard - activity feed, notifications)
`forums/page.tsx` (List of all topics)
`forums/[topicSlug]/page.tsx` (List of posts for a topic)
`forums/[topicSlug]/[postSlug]/page.tsx` (Single post view with comments)
`forums/[topicSlug]/[postSlug]/edit/page.tsx` (Post edit page)
`articles/page.tsx` (List of expert articles)
`articles/[articleSlug]/page.tsx` (Single article view)
`chat/page.tsx` (List of available chat rooms)
`chat/[roomId]/page.tsx` (Live chat interface)
`settings/page.tsx` (User profile and settings)
`api/` (API Routes)
`auth/[...nextauth]/route.ts` (NextAuth.js handler)
`topics/route.ts`
`posts/route.ts`
`comments/route.ts`
`votes/route.ts`
`chat/route.ts`
**Key Components:**
- `Navbar`: Top navigation, user auth status, search.
- `Sidebar`: Main navigation within the app.
- `TopicCard`: Displays a topic summary.
- `PostCard`: Displays a post summary in lists.
- `Comment`: Displays a single comment.
- `CommentForm`: Form to add a new comment.
- `PostForm`: Form to create/edit a post.
- `VoteButtons`: Upvote/downvote component.
- `ChatWindow`: Real-time chat interface.
- `AuthForm`: Reusable form for login/signup.
- `UserProfile`: Displays user profile information.
- `LoadingSpinner`: Centered loading indicator.
- `AlertMessage`: For displaying notifications and errors.
**State Management:** Server Components fetch data directly. Client Components needing interactivity will use `useState`, `useReducer`, and `useContext`. `React Query` or similar can manage server state for client components for caching, refetching etc. Authentication state managed by `NextAuth.js` context.
**8. SAMPLE/MOCK DATA:**
**Topics:**
1. `{ id: 'uuid-gen-ai', slug: 'generative-ai', name: 'Generative AI', description: 'Exploring the capabilities and implications of AI that creates new content.' }
2. `{ id: 'uuid-ai-ethics', slug: 'ai-ethics', name: 'AI Ethics', description: 'Discussions on fairness, accountability, transparency, and societal impact of AI.' }
3. `{ id: 'uuid-ml-ops', slug: 'mlops', name: 'MLOps', description: 'Best practices for deploying and maintaining machine learning models in production.' }`
**Posts (under 'Generative AI'):**
1. `{ id: 'uuid-post-1', topicId: 'uuid-gen-ai', authorId: 'uuid-user-1', title: 'The Future of Content Creation with GenAI', content: '...', isExpertContent: true, createdAt: '...', votes: 15, comments: 3 }
2. `{ id: 'uuid-post-2', topicId: 'uuid-gen-ai', authorId: 'uuid-user-2', title: 'Challenges in Controlling Generative Models', content: '...', isExpertContent: false, createdAt: '...', votes: 8, comments: 2 }
3. `{ id: 'uuid-post-3', topicId: 'uuid-gen-ai', authorId: 'uuid-user-3', title: 'Ethical Considerations for AI-Generated Art', content: '...', isExpertContent: false, createdAt: '...', votes: 12, comments: 5 }`
**Comments (on Post 1):**
1. `{ id: 'uuid-comment-1', postId: 'uuid-post-1', authorId: 'uuid-user-2', content: 'Great insights!', createdAt: '...', votes: 2 }
2. `{ id: 'uuid-comment-2', postId: 'uuid-post-1', authorId: 'uuid-user-4', content: 'I disagree with point X...', createdAt: '...', votes: -1 }`
**Users:**
1. `{ id: 'uuid-user-1', name: 'Dr. Evelyn Reed', email: 'evelyn.reed@example.com', image: 'url-to-image1.jpg' }
2. `{ id: 'uuid-user-2', name: 'Alex Chen', email: 'alex.chen@example.com', image: 'url-to-image2.jpg' }
3. `{ id: 'uuid-user-3', name: 'Samir Khan', email: 'samir.khan@example.com', image: 'url-to-image3.jpg' }
4. `{ id: 'uuid-user-4', name: 'Project Manager AI', email: 'pm@example.com', image: 'url-to-image4.jpg' }`
**Chat Rooms:**
1. `{ id: 'uuid-chat-1', topicId: 'uuid-gen-ai', name: 'GenAI Weekly Sync', scheduledTime: '...', durationMinutes: 60 }
**9. TURKISH TRANSLATIONS:**
- **App Title:** AI Söylem Merkezi
- **Navbar:** Forumlar, Makaleler, Sohbet Odaları, Giriş Yap, Kayıt Ol, Profilim
- **Homepage:** Yapay Zeka Dünyasına Açılan Kapınız, Öne Çıkan Konular, Son Tartışmalar, Uzman Görüşleri
- **Forums:** Konular, Tartışma Başlat
- **Post:** Başlık, İçerik, Yorum Ekle, Gönder, Oyla (Yukarı/Aşağı)
- **Comments:** Yorumlar
- **Chat:** Canlı Sohbet Odaları, Sohbet Odasına Katıl, Mesaj Gönder
- **Buttons:** Gönder, İptal Et, Düzenle, Sil, Kaydet, Giriş Yap, Kayıt Ol, Oturumu Kapat
- **Placeholders:** Konu başlığını girin..., Tartışmanızı buraya yazın...
- **Labels:** E-posta, Şifre, Konu Adı, Açıklama
- **Error Messages:** Geçersiz e-posta/şifre, Bu alan gereklidir, Bir şeyler ters gitti.
**10. ANIMATIONS:**
- **Page Transitions:** Smooth fade-in/fade-out transitions using Next.js `useRouter` and a transition library like `Framer Motion` (optional, but recommended for enhanced UX).
- **Hover Effects:** Subtle scale/background color changes on buttons, links, and cards.
- **Loading States:** Use skeleton loaders or spinners (`LoadingSpinner` component) for data fetching operations. Integrate with `use` hook or React Query's loading states.
- **Form Feedback:** Animate success/error messages.
**11. EDGE CASES:**
- **Empty States:** Design visually appealing empty states for forums, posts, comments, and chat rooms with clear calls to action (e.g., 'Henüz hiç yorum yok. İlk yorumu siz yapın!').
- **Authorization:** Protect routes and actions based on user authentication status. Implement role-based access control for features like creating expert content or managing chat rooms.
- **Error Handling:** Implement robust error handling for API requests and user interactions. Display user-friendly error messages. Use `error.tsx` in Next.js for top-level error boundaries.
- **Validation:** Implement client-side (using libraries like Zod with React Hook Form) and server-side validation for all user inputs to ensure data integrity.
- **Rate Limiting:** Consider implementing rate limiting on API endpoints (especially for voting and posting) to prevent abuse.
- **Data Consistency:** Ensure data consistency across different parts of the application, especially during real-time updates (like chat messages) and concurrent operations.