You are a senior full-stack developer and startup consultant tasked with creating a single-page React application (SPA) that analyzes and tracks AI-generated content on social networks, inspired by the acquisition of Moltbook. This tool aims to help users identify and understand the prevalence of AI-generated content, especially in viral contexts.
## PROJECT OVERVIEW
**Project Name:** AI Content Sentinel
**Goal:** To build a web application that allows users to analyze social media content (via URLs or direct text input) for signs of AI generation. It will provide an AI-generated score, source verification insights, and track trending AI-driven viral content. The primary value proposition is to enhance digital literacy and combat misinformation by providing transparency into AI-generated content.
**Problem Solved:** The increasing sophistication and proliferation of AI-generated content on social media platforms make it difficult for users to distinguish between human-created and AI-generated information. This can lead to the spread of misinformation and manipulation. This tool empowers users with the knowledge and tools to critically evaluate the content they consume.
## TECH STACK
* **Frontend Framework:** React (using Create React App or Vite for setup)
* **Styling:** Tailwind CSS for utility-first styling and rapid UI development. Ensure a responsive design.
* **State Management:** React Context API for global state management (e.g., user authentication status, fetched data) and `useState`/`useReducer` for local component state. For more complex state, consider Zustand or Jotai.
* **Routing:** React Router DOM for handling navigation within the SPA.
* **API Calls:** `fetch` API or Axios for making requests to a potential backend or third-party AI analysis services.
* **Libraries:**
* `react-icons` for icons.
* `react-spinners` for loading animations.
* `clsx` for conditional class name manipulation.
* **Deployment:** Netlify or Vercel for easy CI/CD and hosting.
## CORE FEATURES
1. **Content Analysis Input:**
* **User Flow:** The user lands on the homepage. They see an input field for a URL or a textarea for direct text input. Upon submitting, a loading state is displayed while the analysis is performed.
* **Details:** The input area should be prominent. URL validation should be performed client-side. For text input, a character limit might be considered.
2. **AI Content Scoring & Reporting:**
* **User Flow:** After submission, the user is presented with a detailed report. This includes a prominent AI-Generated Score (e.g., a percentage or a scale of 1-100), a confidence level, and a breakdown of the analysis (e.g., linguistic patterns, factual consistency, image analysis if applicable).
* **Details:** The score should be visually represented (e.g., progress bar, gauge chart). Explanations for the score should be clear and concise.
3. **Source Verification & History:**
* **User Flow:** Within the report, a section will attempt to trace the content's origin and identify if it has been previously flagged or fact-checked. It might also show related content or original sources if available.
* **Details:** This feature may rely on external APIs or a curated database. Displaying clear links to original sources or fact-checking articles is crucial.
4. **Trending AI Content Feed:**
* **User Flow:** A separate section or tab displays a feed of currently trending social media posts or topics that are identified as potentially AI-generated. Users can browse this feed.
* **Details:** This feed would ideally be populated by backend analysis or curated data. Each item should link to the original social media post (if possible) and display its AI score.
5. **User Community & Discussion (Optional MVP+):**
* **User Flow:** Users can optionally create accounts to save their analyses, comment on trending content, and discuss findings with other users.
* **Details:** Requires user authentication and a backend infrastructure for storing user data and posts.
## UI/UX DESIGN
* **Layout:** Single-page application. A clean, modern, and intuitive interface.
* **Header:** Logo, Navigation (Analyze, Trends, About).
* **Hero Section (Homepage):** Prominent input field, clear call to action, brief explanation of the tool.
* **Analysis Results Page:** Clear display of score, detailed breakdown, source verification info.
* **Trends Page:** Card-based layout for trending content items.
* **Footer:** Links, copyright.
* **Color Palette:** Primarily dark mode for a sophisticated, tech-focused feel. Use a primary accent color (e.g., electric blue or vibrant purple) for CTAs and key information. Secondary colors for warnings (orange/red) or neutral information (gray).
* Primary: `#1a1a2e` (Dark background)
* Secondary: `#0f3460` (Slightly lighter dark)
* Accent: `#e94560` (Vibrant Red/Orange for CTAs)
* Text: `#ffffff` (Light text)
* Subtle Text: `#a0a0a0`
* **Typography:** Sans-serif fonts for readability. Use a font like 'Inter' or 'Roboto'. Ensure clear hierarchy with font sizes and weights.
* **Responsive Design:** Mobile-first approach. Utilize Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`) to ensure usability across all devices (smartphones, tablets, desktops).
## COMPONENT BREAKDOWN
* **`App.js`:** Main application component, sets up routing.
* **`Header.jsx`:** Displays the site logo and navigation links.
* Props: `navItems` (array of objects { name: string, path: string })
* **`Footer.jsx`:** Displays copyright and footer links.
* **`HomePage.jsx`:** Main landing page component.
* Contains `ContentInputForm`, `FeatureHighlight`.
* **`ContentInputForm.jsx`:** Handles user input for URL or text.
* Props: `onSubmit` (function), `isLoading` (boolean).
* State: `inputValue` (string), `inputType` (string - 'url' or 'text').
* **`AnalysisResultsPage.jsx`:** Displays the detailed analysis report.
* Props: `analysisData` (object).
* Contains `ScoreDisplay`, `AnalysisBreakdown`, `SourceVerification`.
* **`ScoreDisplay.jsx`:** Visually represents the AI-generated score.
* Props: `score` (number), `confidence` (number).
* **`AnalysisBreakdown.jsx`:** Shows detailed metrics and explanations.
* Props: `breakdown` (object).
* **`SourceVerification.jsx`:** Displays information about the content's origin and history.
* Props: `sourceInfo` (object).
* **`TrendsPage.jsx`:** Displays the feed of trending AI content.
* Contains `TrendCard` components.
* **`TrendCard.jsx`:** Represents a single item in the trends feed.
* Props: `item` (object: { title, url, aiScore, thumbnailUrl }).
* **`LoadingSpinner.jsx`:** Reusable component for displaying loading indicators.
* Props: `size` (number), `color` (string).
* **`ErrorMessage.jsx`:** Displays error messages to the user.
* Props: `message` (string).
## DATA MODEL
* **`AnalysisState` (Global or local to `HomePage` / `AnalysisResultsPage`):**
```javascript
{
userInput: "", // URL or text
inputType: "url" | "text",
isLoading: false,
analysisResult: {
id: string, // Unique ID for the analysis
originalInput: string,
aiScore: number, // e.g., 0-100
confidence: number, // e.g., 0-100
analysisDetails: {
linguisticPatterns: { score: number, explanation: string },
factualConsistency: { score: number, explanation: string },
// ... other metrics
},
sourceInfo: {
originalSourceUrl: string | null,
isKnownFake: boolean,
factCheckLinks: string[],
// ... other source data
},
timestamp: string // ISO date string
} | null,
error: string | null
}
```
* **`TrendItem` (For `TrendsPage`):**
```javascript
{
id: string,
title: string,
url: string, // Link to the social media post or article
aiScore: number,
thumbnailUrl: string | null,
sourcePlatform: string // e.g., 'Twitter', 'Reddit', 'NewsArticle'
}
```
* **`Mock Data Formats`:**
* The `analysisResult` and `TrendItem` structures above will serve as mock data formats.
## ANIMATIONS & INTERACTIONS
* **Input Submission:** Subtle button press effect. A smooth transition to the loading state.
* **Loading State:** Use `react-spinners` (e.g., `HashLoader` or `SyncLoader`) with a smooth fade-in/out effect. Skeleton loaders for the results page sections while data is being fetched.
* **Score Display:** Animate the score as it populates, perhaps like a gauge filling up.
* **Hover Effects:** Slight lift (`shadow-md`) or color change on interactive elements like buttons and trend cards.
* **Page Transitions:** If using React Router, implement simple fade transitions between pages using libraries like `react-transition-group`.
* **Micro-interactions:** Subtle visual feedback on form validation errors.
## EDGE CASES
* **Empty State:**
* Analysis Input: Clear placeholder text and instructions.
* Results Page: Display a friendly message like "Enter a URL or text to begin analysis." if no result is available.
* Trends Page: Show a message like "No trending content found" if the feed is empty.
* **Error Handling:**
* Network Errors: Display a user-friendly message (e.g., "Could not connect. Please check your internet connection.").
* API Errors: Handle specific error codes from the AI analysis backend (e.g., "Analysis failed, try again later," "Invalid URL format").
* Invalid Input: Client-side validation for URL format. Server-side validation for text length/content if applicable.
* **Validation:**
* URL Validation: Use regex to check for valid URL structure.
* Text Input: Define maximum character limits if necessary.
* **Accessibility (a11y):**
* Use semantic HTML elements (`<nav>`, `<main>`, `<button>`, etc.).
* Ensure sufficient color contrast ratios.
* Add `aria-labels` and `alt` text where appropriate.
* Ensure keyboard navigability for all interactive elements.
* Manage focus appropriately during loading states and errors.
## SAMPLE DATA
1. **Mock `analysisResult` (High AI Score):**
```json
{
"id": "a1b2c3d4",
"originalInput": "https://example.com/generated-article",
"aiScore": 92.5,
"confidence": 88,
"analysisDetails": {
"linguisticPatterns": {"score": 95, "explanation": "Highly predictable sentence structures, lack of idiomatic expressions."},
"factualConsistency": {"score": 70, "explanation": "Contains some plausible but unverified claims, minor factual inconsistencies detected."}
},
"sourceInfo": {"originalSourceUrl": null, "isKnownFake": false, "factCheckLinks": []},
"timestamp": "2023-10-27T10:00:00Z"
}
```
2. **Mock `analysisResult` (Low AI Score):**
```json
{
"id": "e5f6g7h8",
"originalInput": "https://example.com/news-report",
"aiScore": 15.2,
"confidence": 95,
"analysisDetails": {
"linguisticPatterns": {"score": 10, "explanation": "Varied sentence structure, nuanced vocabulary, natural language flow."},
"factualConsistency": {"score": 90, "explanation": "Claims are verifiable and consistent with known information sources."}
},
"sourceInfo": {"originalSourceUrl": "https://original-source.com/article-123", "isKnownFake": false, "factCheckLinks": ["https://factcheck.org/article-report"]},
"timestamp": "2023-10-27T10:05:00Z"
}
```
3. **Mock `analysisResult` (Text Input):**
```json
{
"id": "i9j0k1l2",
"originalInput": "The event happened yesterday and was very surprising.",
"aiScore": 65.0,
"confidence": 75,
"analysisDetails": {
"linguisticPatterns": {"score": 70, "explanation": "Simple phrasing, lacks unique stylistic elements."},
"factualConsistency": {"score": null, "explanation": "Insufficient context to verify factual consistency."}
},
"sourceInfo": {"originalSourceUrl": null, "isKnownFake": false, "factCheckLinks": []},
"timestamp": "2023-10-27T10:10:00Z"
}
```
4. **Mock `TrendItem` 1:**
```json
{
"id": "t1",
"title": "AI Generates Realistic Photos of Unreleased Products",
"url": "https://twitter.com/ai_news/status/12345",
"aiScore": 85,
"thumbnailUrl": "https://example.com/thumbnails/ai-products.jpg",
"sourcePlatform": "Twitter"
}
```
5. **Mock `TrendItem` 2:**
```json
{
"id": "t2",
"title": "Analysis of Viral AI Art Trends in 2023",
"url": "https://techblog.com/ai-art-trends",
"aiScore": 70,
"thumbnailUrl": "https://example.com/thumbnails/ai-art.jpg",
"sourcePlatform": "Blog"
}
```
6. **Mock `TrendItem` 3 (Potentially Misleading):**
```json
{
"id": "t3",
"title": "'Leaked' Document Causes Stir Online - Experts Skeptical",
"url": "https://news.com/leaked-doc-controversy",
"aiScore": 60,
"thumbnailUrl": "https://example.com/thumbnails/leaked-doc.jpg",
"sourcePlatform": "News Article"
}
```
## DEPLOYMENT NOTES
* **Build Command:** Ensure the build script in `package.json` (e.g., `npm run build` or `vite build`) generates optimized static assets.
* **Environment Variables:** Use environment variables for API keys (if connecting to external AI services) or backend URLs. Prefix them appropriately (e.g., `REACT_APP_` for CRA, `VITE_` for Vite) and configure them in the deployment platform (Netlify/Vercel).
* **Routing:** For SPAs deployed on platforms like Netlify/Vercel, configure redirects to handle client-side routing correctly. For example, Netlify `_redirects` file or Vercel `vercel.json` should have a rule to redirect all non-file requests to `index.html`.
* **Performance Optimizations:**
* Code Splitting: Utilize `React.lazy` and `Suspense` for route-based code splitting.
* Image Optimization: Ensure images are optimized and served in modern formats (e.g., WebP).
* Bundle Analysis: Use tools like `webpack-bundle-analyzer` to identify and reduce bundle size.
* **HTTPS:** Always deploy using HTTPS.
* **CORS:** Be mindful of Cross-Origin Resource Sharing policies if your frontend needs to communicate with a separate backend API.
This detailed prompt provides a comprehensive blueprint for an AI assistant to build the 'AI Content Sentinel' application as a functional SPA.