You are an expert full-stack developer tasked with creating a single-page application (SPA) called 'Gerçeklik Doğrulayıcı' (Reality Verifier). This application aims to combat the growing issue of misinformation and 'lying' AI-generated content. Users are increasingly skeptical about the authenticity and reliability of information, especially with the rapid advancement of Large Language Models (LLMs). This tool will provide a crucial layer of verification, helping users discern between genuine and potentially fabricated content.
**1. PROJECT OVERVIEW:**
Gerçeklik Doğrulayıcı is a SaaS application designed to analyze and assess the authenticity and reliability of digital content, particularly content suspected of being AI-generated. The core problem it solves is the increasing difficulty for users to trust online information due to the proliferation of sophisticated AI-generated text that can be misleading or outright false. The primary value proposition is to empower users with a tool that provides objective analysis, assigns a reliability score, identifies potential AI generation, and offers suggestions for further verification, thereby fostering a more informed and trustworthy digital ecosystem.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development)
- **Styling:** Tailwind CSS (for rapid and utility-first styling)
- **State Management:** Zustand (lightweight and performant for global state)
- **Routing:** React Router DOM (for SPA navigation)
- **HTTP Client:** Axios (for API requests)
- **Utility Libraries:** Lodash (for utility functions), date-fns (for date formatting)
- **AI/Analysis Backend (Conceptual):** While the frontend will be built, assume an external API exists for the core AI analysis. This prompt will focus on the frontend implementation and mock data handling.
**3. CORE FEATURES & USER FLOWS:**
* **Feature 1: URL Analysis**
* **User Flow:**
1. User navigates to the 'Analyze URL' tab/section.
2. User inputs a URL into a designated input field.
3. User clicks the 'Analyze' button.
4. A loading indicator is displayed.
5. The application fetches the content from the URL (or simulates fetching and analysis).
6. The analysis results (AI probability, reliability score, potential issues) are displayed.
* **Details:** The frontend will send the URL to a (mocked) backend API. The API response will contain structured data about the content's analysis.
* **Feature 2: Text Input Analysis**
* **User Flow:**
1. User navigates to the 'Analyze Text' tab/section.
2. User pastes text into a large textarea.
3. User clicks the 'Analyze' button.
4. A loading indicator is displayed.
5. The application sends the text to a (mocked) backend API.
6. The analysis results are displayed.
* **Details:** Similar to URL analysis, but the input is direct text.
* **Feature 3: Display Analysis Results**
* **User Flow:** After analysis (either URL or text), the results section populates.
* **Details:** This section will visually represent:
* **AI Generation Probability:** A prominent gauge or percentage display.
* **Reliability Score:** A numerical score (e.g., 1.1-9.9) with a clear visual indicator (color-coding: red for low, green for high).
* **Key Findings/Issues:** A list of potential problems identified (e.g., 'High AI probability', 'Lack of verifiable sources', 'Potentially misleading statements').
* **Source Verification Suggestions:** Actionable tips for the user to verify the information independently.
* **Feature 4: User Feedback**
* **User Flow:** Within the results display, users can provide feedback on the accuracy of the analysis.
* **Details:** A simple 'Is this analysis accurate?' prompt with 'Yes'/'No' buttons. This data would ideally be sent to the backend for model improvement.
**4. UI/UX DESIGN:**
* **Layout:** Single Page Application (SPA) layout. A clear header with the app title and navigation (e.g., 'Analyze URL', 'Analyze Text'). A main content area that dynamically displays the input forms or the analysis results. A footer with copyright and links.
* **Color Palette:** Primary: A deep, trustworthy blue (#1a202c). Secondary: A calming, neutral gray (#4a5568). Accent: A bright, cautionary orange/yellow for alerts/warnings (#f6ad55) and a vibrant green for positive indicators (#48bb78). White and light grays for backgrounds and text. The palette should convey seriousness, trustworthiness, and clarity.
* **Typography:** Use a clean, readable sans-serif font like Inter or Roboto. Headings should be distinct (e.g., font-weight: 700, size: 2rem). Body text should be legible (e.g., font-weight: 400, size: 1rem). Ensure good line height and spacing.
* **Responsive Design:** Mobile-first approach. Use Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:). Ensure inputs, buttons, and results are usable on all screen sizes. On mobile, forms might stack vertically; results might be presented in cards or accordions.
* **Components:** Forms (Input fields, Textareas, Buttons), Result Display (Cards, Gauges, Progress Bars, Lists), Navigation (Tabs/Links), Loading Spinners, Feedback Modals/Toasts.
**5. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component. Sets up routing, global layout, and theme provider.
* **`Header.jsx`:** Displays the application title and navigation links. Manages active link state.
* Props: `navItems` (array of objects: { name: string, path: string })
* **`MainContent.jsx`:** Wrapper component that displays the content based on the current route.
* **`UrlAnalysisForm.jsx`:** Contains the URL input field and the 'Analyze' button. Handles form submission and state for the input URL.
* Props: `onSubmit` (function)
* **`TextInputForm.jsx`:** Contains the textarea and the 'Analyze' button. Handles form submission and state for the input text.
* Props: `onSubmit` (function)
* **`AnalysisResults.jsx`:** Displays the comprehensive analysis results.
* Props: `results` (object: { aiProbability: number, reliabilityScore: number, findings: string[], suggestions: string[] }), `isLoading` (boolean), `error` (string | null)
* Children Components:
* `GaugeChart.jsx`: Visualizes AI Probability.
* `ScoreIndicator.jsx`: Displays the Reliability Score with color coding.
* `FindingsList.jsx`: Renders the list of issues.
* `SuggestionsList.jsx`: Renders verification suggestions.
* **`LoadingSpinner.jsx`:** A simple, animated spinner to indicate loading states.
* **`FeedbackComponent.jsx`:** Provides the 'Is this accurate?' prompt and feedback submission buttons.
* Props: `onFeedback` (function)
* **`Footer.jsx`:** Standard footer with copyright and links.
**6. DATA MODEL & STATE MANAGEMENT (Zustand Store):**
* **`analysisStore.js`:**
* `state`: {
`analysisType`: 'url' | 'text' | null,
`inputValue`: string,
`results`: object | null,
`isLoading`: boolean,
`error`: string | null
}
* `actions`: {
`startAnalysis`: (type: 'url' | 'text', value: string) => void,
`setResults`: (data: object) => void,
`setError`: (message: string) => void,
`clearAnalysis`: () => void,
`submitFeedback`: (feedbackData: object) => void // Mocked action
}
* **Mock Data Structure (for API response):**
```json
{
"url": "https://example.com", // or "text_input"
"aiProbability": 75.5, // Percentage (0-100)
"reliabilityScore": 6.3, // Score (1.1-9.9)
"findings": [
"Content exhibits characteristics common in AI-generated text.",
"Limited citation of primary sources.",
"Potential for factual inaccuracies in specific claims."
],
"suggestions": [
"Cross-reference claims with reputable news sources.",
"Look for original research papers or official statements.",
"Check the author's credentials and publication history."
],
"analysisTimestamp": "2023-10-27T10:30:00Z"
}
```
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Subtle fade-in/fade-out between different sections/routes using `react-transition-group` or CSS transitions.
* **Button Hover Effects:** Slight scale-up or background color change on button hover using Tailwind CSS.
* **Loading States:** `LoadingSpinner.jsx` component displayed when `isLoading` is true. Prevent user interaction with input fields during loading.
* **Gauge/Score Animation:** Animate the `GaugeChart` and `ScoreIndicator` to visually fill up or update to the result value when new results are loaded.
* **Feedback Confirmation:** A brief toast notification or subtle animation on the feedback buttons confirming submission.
* **Input Field Focus:** Tailwind's focus ring utility for visual feedback when an input field is active.
**8. EDGE CASES:**
* **Invalid URL:** Handle cases where the entered URL is malformed or unreachable. Display a user-friendly error message.
* **API Errors:** Gracefully handle network errors or backend API failures. Display a generic but informative error message.
* **Empty Input:** Disable the 'Analyze' button if the URL or text input is empty. Provide validation messages.
* **Empty Results:** If the analysis returns no specific findings or suggestions (unlikely but possible), display a message like 'No significant issues detected.'
* **Content Fetching Errors:** For URL analysis, handle cases where the content cannot be fetched (e.g., 404, server error, robots.txt blocking).
* **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary (e.g., for dynamic content updates). All interactive elements should be keyboard-navigable. Ensure sufficient color contrast.
* **Rate Limiting:** (Consideration for real implementation) Implement UI feedback if API rate limits are hit.
**9. SAMPLE DATA (Mock Data Array):**
```javascript
const mockAnalysisResults = [
{
id: 1,
input: "https://www.example-news.com/article1",
type: "url",
results: {
aiProbability: 85.2,
reliabilityScore: 4.1,
findings: [
"High probability of AI generation detected based on linguistic patterns.",
"Claims made about the recent election lack verifiable sources.",
"The tone is overly sensationalized."
],
suggestions: [
"Verify election results with official government sources.",
"Search for reports from established, non-partisan news organizations.",
"Be skeptical of anonymous sources cited."
]
}
},
{
id: 2,
input: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...", // Truncated for brevity
type: "text",
results: {
aiProbability: 15.0,
reliabilityScore: 8.9,
findings: [
"Text appears to be human-written.",
"Sources cited are reputable academic journals."
],
suggestions: [
"The content seems reliable, but always maintain critical thinking."
]
}
},
{
id: 3,
input: "https://www.verified-source.org/report",
type: "url",
results: {
aiProbability: 5.5,
reliabilityScore: 9.2,
findings: [
"Content is factual and well-sourced.",
"Clear attribution to primary data."
],
suggestions: [
"Excellent source. Cross-reference is likely unnecessary for core facts."
]
}
},
{
id: 4,
input: "In a shocking turn of events, scientists have discovered...", // Fictional controversial claim
type: "text",
results: {
aiProbability: 65.7,
reliabilityScore: 5.5,
findings: [
"Linguistic style matches advanced AI models.",
"The central claim is not corroborated by any major scientific body.",
"Uses vague language to describe the 'discovery'."
],
suggestions: [
"Await confirmation from peer-reviewed scientific publications.",
"Check statements from leading universities or research institutions.",
"Be wary of claims that contradict established scientific consensus."
]
}
},
{
id: 5,
input: "https://arxiv.org/abs/1706.03762", // Transformer Paper
type: "url",
results: {
aiProbability: 10.1,
reliabilityScore: 9.5,
findings: [
"Content is a seminal academic paper, historically significant.",
"Authorship and origin are well-documented."
],
suggestions: [
"Highly reliable source for the topic discussed."
]
}
}
];
// Example of a single result object structure (as used in state/API response)
const singleMockResult = {
url: "https://example.com",
aiProbability: 75.5,
reliabilityScore: 6.3,
findings: [
"Content exhibits characteristics common in AI-generated text."
],
suggestions: [
"Cross-reference claims with reputable news sources."
],
analysisTimestamp: "2023-10-27T10:30:00Z"
};
```
**10. DEPLOYMENT NOTES:**
* **Build Tool:** Vite (`npm run build` or `yarn build`). Generates optimized static assets in the `dist` folder.
* **Environment Variables:** Use `.env` files for managing API keys or endpoints if connecting to a real backend. Example: `VITE_API_ENDPOINT='https://api.gerceklikdogrulayici.com/v1'`. Ensure these are prefixed with `VITE_` for Vite.
* **Performance Optimizations:**
* Code Splitting: Vite handles this automatically for route-based splitting.
* Lazy Loading: Implement lazy loading for components not immediately needed (e.g., complex charts).
* Image Optimization: Use optimized image formats and consider a CDN for static assets.
* Memoization: Use `React.memo` or `useMemo` where performance bottlenecks are identified, especially in `AnalysisResults` and its sub-components.
* **Hosting:** Deploy the static build to platforms like Vercel, Netlify, or AWS S3/CloudFront for optimal performance and scalability.
* **HTTPS:** Ensure the application is served over HTTPS.
* **Error Monitoring:** Integrate a service like Sentry for real-time error tracking during production.