You are an expert AI application developer tasked with building a single-page, server-rendered React application using Next.js and Tailwind CSS. The application, named 'AI Güvenlik Zinciri' (AI Security Chain), aims to address the growing concerns about the trustworthiness and ethical leadership within major AI development organizations. The core problem stems from events like the internal turmoil at OpenAI, where key figures questioned the leadership's decisions and transparency regarding advanced AI development. This platform will provide a transparent, community-driven evaluation of AI leaders and their organizations.
PROJECT OVERVIEW:
AI Güvenlik Zinciri's primary goal is to create a trusted platform for assessing the ethical leadership and decision-making processes of prominent figures in the Artificial Intelligence field. It will tackle the problem of opaque governance and potential biases in AI development by offering a space for transparent evaluation, evidence sharing, and community discussion. The core value proposition is to empower users with verifiable information and community insights to make informed judgments about the trustworthiness of AI leaders and, by extension, the future direction of AI.
TECH STACK:
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: Zustand (for global state) and React Context API (for local/theme state)
- UI Components: Radix UI for accessible and unstyled components, shadcn/ui for pre-built components.
- Form Handling: React Hook Form with Zod for validation
- Data Fetching: Next.js data fetching utilities, SWR for client-side caching
- Authentication: NextAuth.js (if user accounts are implemented in later stages, not MVP)
- Deployment: Vercel
CORE FEATURES (MVP):
1. **Leader Profiles & Incident Summaries:**
* **User Flow:** Users can navigate to a 'Leaders' page, view a list of AI leaders (e.g., Sam Altman, Ilya Sutskever), and click on a leader to see their profile page. The profile page displays a summary of key incidents, their role, and associated organizations. Initially, this data will be hardcoded or fetched from a mock API.
* **Details:** Each profile includes a brief bio, current role, organization, and a timeline of significant events related to AI ethics, transparency, and leadership decisions. The MVP will focus on pre-defined, well-documented incidents.
2. **Trustworthiness Index:**
* **User Flow:** On each leader's profile page, a prominent 'Trustworthiness Index' score is displayed. Below the score, users can see a breakdown of factors contributing to the score. A button allows logged-in users (future feature) or community members (MVP - anonymous voting) to vote up or down on the leader's trustworthiness based on specific incidents.
* **Details:** The index is a calculated score (e.g., 1-10) dynamically updated based on community sentiment (votes). Each incident listed on the profile can be upvoted/downvoted independently, influencing the overall index. The MVP will simulate this with initial scores and allow for simple up/down voting without complex weighting.
3. **Evidence Submission & Analysis Portal:**
* **User Flow:** A dedicated 'Submit Evidence' page allows users to anonymously submit information related to AI leadership incidents. This includes uploading text documents, Slack message excerpts (as text or screenshots), or links. The submission is processed, categorized, and potentially linked to existing leader profiles. A moderation queue will be implied for future versions.
* **Details:** The MVP form will include fields for incident title, description, leader(s) involved, organization, evidence type (document, message, link), and an upload field (initially disabled or simplified, focusing on text input). Submissions are stored locally or in a mock database. The 'analysis' part is rudimentary in MVP, mainly focusing on categorization and linking.
4. **Community Discussion Forum:**
* **User Flow:** A 'Discussions' page hosts threads related to specific leaders, incidents, or general AI ethics topics. Users can view existing discussions, read replies, and post new comments or replies (anonymously in MVP).
* **Details:** Basic forum structure: Threads are categorized. Each thread shows the title, author (anonymous), date, and number of replies. Clicking a thread shows posts chronologically. Users can create new threads and reply to existing posts.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) feel using Next.js. Main navigation sidebar (collapsible on mobile) with links to Leaders, Discussions, Submit Evidence. Main content area displays the selected section. Clean, professional, and modern aesthetic.
- **Color Palette:** Primary: Deep Teal (`#008080`), Secondary: Dark Slate Gray (`#2F4F4F`), Accent: Muted Gold (`#B8860B`), Background: Off-White (`#F8F8F8`), Text: Near Black (`#333333`). Focus on readability and a sense of seriousness.
- **Typography:** Headings: 'Inter' or 'Manrope' (sans-serif, modern, readable). Body Text: 'Roboto' or 'Open Sans' (highly legible). Ensure good contrast ratios.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Use Tailwind CSS's responsive modifiers (sm:, md:, lg:, xl:).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for route changes and element reveals. Clear loading states (spinners, skeleton screens).
COMPONENT BREAKDOWN:
- `Layout.tsx`: Main application shell, includes header, footer, and navigation sidebar. Manages overall page structure and responsiveness.
- Props: `children` (page content)
- `Navbar.tsx`: Collapsible navigation menu. Handles mobile menu toggle.
- Props: `navItems` (array of navigation link objects)
- `LeaderList.tsx`: Displays a list of AI leaders with brief info and links to their profiles.
- Props: `leaders` (array of leader objects)
- `LeaderProfile.tsx`: Displays detailed information for a single leader, including bio, incidents, and trustworthiness index.
- Props: `leader` (leader object), `onVote` (function)
- `TrustworthinessIndex.tsx`: Visual component displaying the index score and voting buttons.
- Props: `score` (number), `onVoteUp` (function), `onVoteDown` (function)
- `IncidentTimeline.tsx`: Displays a list of incidents related to a leader.
- Props: `incidents` (array of incident objects)
- `EvidenceForm.tsx`: Form for submitting evidence. Uses React Hook Form.
- Props: `onSubmit` (function), `initialData` (object, optional)
- `DiscussionList.tsx`: Displays a list of discussion threads.
- Props: `threads` (array of thread objects)
- `ThreadView.tsx`: Displays a single discussion thread and its replies.
- Props: `thread` (thread object), `posts` (array of post objects), `onReply` (function)
- `Avatar.tsx`: Reusable component for user avatars (placeholder in MVP).
- Props: `name` (string), `imageUrl` (string, optional)
- `Button.tsx`: Custom styled button component.
- Props: `children`, `onClick`, `variant`, `size`
- `Card.tsx`: Wrapper for content blocks.
- Props: `children`, `className`
DATA MODEL:
- **Leader:**
```json
{
"id": "uuid",
"name": "Sam Altman",
"title": "CEO",
"organization": "OpenAI",
"bio": "Brief biography...",
"imageUrl": "/path/to/image.jpg",
"trustworthinessScore": 7.5,
"incidents": ["incident_id_1", "incident_id_2"]
}
```
- **Incident:**
```json
{
"id": "uuid",
"title": "Alleged misrepresentation to board",
"description": "Details about the incident...",
"date": "YYYY-MM-DD",
"relatedLeaders": ["leader_id_1", "leader_id_2"],
"evidenceIds": ["evidence_id_1"],
"upvotes": 150,
"downvotes": 30
}
```
- **EvidenceSubmission:**
```json
{
"id": "uuid",
"title": "Submission title",
"description": "User provided details",
"leaderInvolved": "OpenAI Board Conflict",
"organization": "OpenAI",
"evidenceType": "Slack Excerpt",
"submittedAt": "timestamp",
"content": "User pasted text or link",
"status": "pending" // MVP: pending/approved
}
```
- **DiscussionThread:**
```json
{
"id": "uuid",
"title": "Discussion topic",
"author": "Anonymous",
"createdAt": "timestamp",
"replyCount": 5
}
```
- **DiscussionPost:**
```json
{
"id": "uuid",
"threadId": "uuid",
"author": "Anonymous",
"content": "Reply content",
"createdAt": "timestamp"
}
```
- **State Management:** Zustand store for managing global states like user authentication (future), fetched data lists, and UI states (e.g., theme, sidebar visibility). Context API for simpler, localized state if needed.
- **Data Fetching:** Mock API endpoints will be simulated using Next.js API routes or static JSON files for MVP. Later, this will transition to a real backend API.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Use Next.js's built-in features or a library like Framer Motion for smooth fade/slide transitions between pages.
- **Button Hovers:** Subtle background color change or slight scaling effect on interactive elements.
- **Loading States:** Implement spinners (e.g., using a library like `react-loader-spinner`) or skeleton loaders for data fetching operations. Indicate loading with disabled buttons and visual cues.
- **Form Feedback:** Visual feedback on form submission (e.g., success message, error highlighting).
- **Sidebar Toggle:** Smooth slide animation for the navigation sidebar.
EDGE CASES:
- **Empty States:** Display user-friendly messages when leader lists, incident timelines, or discussion forums are empty (e.g., "No incidents found for this leader.").
- **Error Handling:** Gracefully handle API errors during data fetching or submission. Display informative error messages to the user. Implement try-catch blocks around data fetching.
- **Validation:** Use Zod with React Hook Form for robust form validation (required fields, URL format, text length limits).
- **Accessibility (a11y):** Ensure semantic HTML, proper ARIA attributes, keyboard navigability, and sufficient color contrast. Use accessible component libraries like Radix UI.
- **Anonymous Submission/Posting:** Ensure no user-identifying information is stored by default for evidence submissions and forum posts in the MVP.
SAMPLE DATA:
- **Leaders:**
```json
[
{
"id": "altman-001",
"name": "Sam Altman",
"title": "CEO",
"organization": "OpenAI",
"bio": "CEO of OpenAI, co-founder of Loopt. Known for his role in the development and public perception of advanced AI models.",
"imageUrl": "/images/sam_altman.jpg",
"trustworthinessScore": 6.8,
"incidents": ["incident-oa-001", "incident-oa-003"]
},
{
"id": "sutskever-001",
"name": "Ilya Sutskever",
"title": "Chief Scientist (Former)",
"organization": "OpenAI",
"bio": "Co-founder and former Chief Scientist at OpenAI. A key figure in deep learning research prior to his departure.",
"imageUrl": "/images/ilya_sutskever.jpg",
"trustworthinessScore": 7.2,
"incidents": ["incident-oa-001"]
}
]
```
- **Incidents:**
```json
[
{
"id": "incident-oa-001",
"title": "2023 OpenAI Board Controversy",
"description": "Internal dispute regarding leadership, safety protocols, and the pace of AI development, leading to temporary ousting of Sam Altman.",
"date": "2023-11-17",
"relatedLeaders": ["altman-001", "sutskever-001"],
"evidenceIds": ["evidence-txt-001"],
"upvotes": 280,
"downvotes": 75
},
{
"id": "incident-oa-003",
"title": "Allegations of Misrepresentation",
"description": "Concerns raised by internal memos about Sam Altman allegedly misrepresenting facts to the board and executives regarding safety and progress.",
"date": "2023-10-01",
"relatedLeaders": ["altman-001"],
"evidenceIds": ["evidence-txt-002", "evidence-img-001"],
"upvotes": 190,
"downvotes": 55
}
]
```
- **Evidence Submissions (Mock API):** Simulate responses for POST requests to `/api/evidence`.
- **Discussion Threads (Mock API):** Simulate GET requests to `/api/discussions` and POST to `/api/discussions/new`.
DEPLOYMENT NOTES:
- **Environment Variables:** Use `.env.local` for local development. For Vercel deployment, configure `NEXT_PUBLIC_` variables in the Vercel dashboard.
- **Build Process:** Standard Next.js build command: `npm run build`. Ensure environment variables are correctly set.
- **Performance:** Optimize image loading (using Next/image). Code splitting is handled automatically by Next.js. Minimize bundle size. Consider server-side rendering (SSR) or static site generation (SSG) for initial page loads where appropriate.
- **CORS:** If using separate API routes or external APIs, configure CORS appropriately.
- **Monitoring:** Integrate basic analytics and error tracking (e.g., Sentry) post-MVP.