You are an expert full-stack developer tasked with creating a single-page, responsive web application using React and Tailwind CSS. The application, named 'Öz Dil: İletişim Doğallığı Platformu' (which translates to 'Authentic Language: Communication Naturalness Platform'), aims to address the problem of communication nuances being lost when text is processed by AI tools. Users often feel that AI-generated or 'cleaned-up' text loses the sender's unique voice, tone, and personality, leading to a disconnect.
**1. PROJECT OVERVIEW:**
This application will serve as a tool for individuals to analyze and understand how their communication style might be altered by AI text processing tools. It will highlight the loss of personal nuance, tone, and implicit meaning, and provide suggestions to help users maintain their authentic voice. The core value proposition is empowering users to communicate more genuinely and effectively, preserving the 'human element' in digital interactions, especially when AI assistance is involved in drafting or refining messages.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and hooks)
- **Styling:** Tailwind CSS (with PostCSS for customization)
- **State Management:** React Context API for global state (e.g., user authentication, global settings) and `useState`/`useReducer` for local component state. For more complex state, consider Zustand or Jotai if Context becomes too verbose.
- **Routing:** React Router DOM for navigation within the single-page application.
- **Form Handling:** React Hook Form for efficient and declarative form management.
- **HTTP Client (if API needed later):** Axios or native `fetch` API.
- **Build Tool:** Vite (for speed and modern features)
**3. CORE FEATURES:**
- **Input Area:** A primary text area where the user can input their message.
- **Analysis Button:** A button to trigger the analysis of the input text.
- **AI Simulation / Original Text Comparison:**
- **User Flow:** After clicking 'Analyze', the system processes the input. The application will display the original text side-by-side with a simulated 'AI-processed' version. This simulation won't use a real LLM for MVP but will mimic common AI text alteration patterns (e.g., replacing unique idioms with generic phrases, altering sentence structure for perceived clarity, removing contractions, standardizing tone).
- **Visualization:** The comparison view should highlight differences, possibly using color-coding or annotations to show what was changed and why it might impact the tone or personal meaning.
- **Authenticity Score/Feedback:** A qualitative feedback mechanism. Based on the detected changes and potential loss of nuance, the app provides a score or descriptive feedback (e.g., "High authenticity loss", "Slightly generic tone", "Personal voice maintained").
- **Rephrasing Suggestions:** Based on the analysis, the app suggests alternative phrasings that retain the original intent and tone while potentially sounding more natural or less 'AI-like'. These suggestions should be context-aware.
- **User Profile/History (Optional for MVP, but good to consider):** Allow users to save analyzed texts and track their 'authenticity score' over time.
**4. UI/UX DESIGN:**
- **Layout:** A clean, modern, single-column layout for the main analysis view on desktop, adapting to a two-column or stacked view on mobile. A persistent header for navigation/logo and a footer.
- **Color Palette:** A calming and professional palette. Primary: a deep, trustworthy blue (#1E3A8A). Secondary: a soft, light gray (#E5E7EB) for backgrounds. Accent: a muted teal (#14B8A6) for interactive elements and highlights. Error/Warning: a subtle red (#EF4444). Text: dark gray (#374151).
- **Typography:** Use a sans-serif font family like Inter or Poppins for readability. Headings should be clear and distinct from body text. Ensure good line height and spacing for comfortable reading.
- **Responsive Design:** Mobile-first approach. Ensure usability across all device sizes. Use Tailwind's responsive modifiers (e.g., `sm:`, `md:`, `lg:`) extensively. The comparison view needs careful design for smaller screens.
- **Key Components:** A prominent text input area, clearly labeled buttons, distinct sections for original text, simulated text, feedback, and suggestions. Use cards or distinct visual containers for different content blocks.
**5. DATA MODEL & STATE MANAGEMENT:**
- **Input Text:** String. Stored in local component state (`useState`).
- **Analysis Results:** An object containing:
- `originalText`: String
- `simulatedText`: String (For MVP, generated based on predefined rules, not a real LLM call)
- `differences`: Array of objects, each detailing a change (e.g., `{ type: 'replacement', original: 'gotta', simulated: 'have to', reason: 'Formalization' }`)
- `authenticityScore`: Number (e.g., 0-100)
- `feedbackMessage`: String
- `suggestions`: Array of strings
- **State Structure (Context API example):**
```javascript
// AnalysisContext.js
const AnalysisState = {
inputText: '',
analysisResult: null, // Will hold the analysis results object
isLoading: false,
error: null
};
// Actions: setInputText, analyzeText, setLoading, setError
```
- **Mock Data Format:**
```json
{
"originalText": "Hey man, gotta finish this report by Friday, alright? It's gonna be tough.",
"simulatedText": "Hello, I must complete this report by Friday. It is going to be challenging.",
"differences": [
{"original": "Hey man", "simulated": "Hello", "type": "Greeting Formalization"},
{"original": "gotta", "simulated": "must complete", "type": "Verb Formalization"},
{"original": "by Friday, alright?", "simulated": "by Friday.", "type": "Informal Element Removal"},
{"original": "It's gonna be tough.", "simulated": "It is going to be challenging.", "type": "Contraction & Word Choice Formalization"}
],
"authenticityScore": 35,
"feedbackMessage": "Your original message's informal tone and unique phrasing were largely replaced, leading to a significant loss of personal voice. The simulated text is more formal and generic.",
"suggestions": [
"Consider keeping phrases like 'Hey man' if appropriate for the recipient.",
"Use contractions like 'gotta' or 'gonna' in informal contexts.",
"Phrases like 'alright?' add personality; retain them if suitable."
]
}
```
**6. COMPONENT BREAKDOWN:**
- **`App.js`:** Main component, sets up routing and global layout.
- **`Header.js`:** Displays the app title/logo and basic navigation.
- **`AnalysisPage.js`:** Main container for the analysis feature. Manages page-level state and fetches data.
- **`TextInputArea.js`:** Large textarea for user input. Receives `value` and `onChange` props.
- **`AnalyzeButton.js`:** Button component. Receives `onClick` handler and `isLoading` prop for state indication.
- **`ComparisonView.js`:** Displays original and simulated text side-by-side. Receives `originalText` and `simulatedText` props. Internally uses `DifferenceHighlighter.js`.
- **`DifferenceHighlighter.js`:** Component to visually mark differences between two text strings (e.g., using `<span>` with specific classes).
- **`FeedbackSection.js`:** Displays the `authenticityScore` and `feedbackMessage`. Receives props.
- **`SuggestionsList.js`:** Renders the list of rephrasing suggestions. Receives `suggestions` array prop.
- **`LoadingSpinner.js`:** Simple visual indicator for loading states.
- **`ErrorMessage.js`:** Displays error messages to the user.
**7. ANIMATIONS & INTERACTIONS:**
- **Button Hover:** Subtle background color change or slight scaling on hover for `AnalyzeButton`.
- **Loading State:** When `isLoading` is true, the `AnalyzeButton` should be disabled and show a `LoadingSpinner`. The entire `ComparisonView` and `FeedbackSection` could fade in or slide up upon successful analysis.
- **Text Area Focus:** Slight border highlight or shadow on focus for `TextInputArea`.
- **Transitions:** Smooth transitions for appearance/disappearance of feedback, suggestions, and loading states using Tailwind's transition utilities.
- **Micro-interactions:** Maybe a subtle pulse animation on the 'Analyze' button when text is entered.
**8. EDGE CASES:**
- **Empty Input:** If the user clicks 'Analyze' with no text, display a clear message prompting them to enter text. Disable the button.
- **Error Handling:** If the analysis process fails (simulated or real API), display a user-friendly `ErrorMessage` component. Log the error to the console.
- **Long Text:** Ensure the layout handles very long input texts gracefully, using scrollbars where necessary without breaking the UI.
- **No Differences Found:** If the simulated text is identical to the original, display a positive message indicating high authenticity.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where needed (e.g., for loading indicators). Ensure sufficient color contrast. All interactive elements must be keyboard navigable.
- **Browser Compatibility:** Test on the latest versions of major browsers (Chrome, Firefox, Safari, Edge).
**9. SAMPLE DATA (for demonstration and initial testing):**
1. **High Authenticity:**
`{"originalText": "Let's grab lunch tomorrow, maybe around noon?", "simulatedText": "Let's grab lunch tomorrow, maybe around noon?", "differences": [], "authenticityScore": 98, "feedbackMessage": "Your text maintained its natural tone and phrasing.", "suggestions": []}`
2. **Formalization:**
`{"originalText": "Hey boss, need that report ASAP.", "simulatedText": "Dear Manager, I require the report urgently.", "differences": [...], "authenticityScore": 25, "feedbackMessage": "Significant loss of informal tone and urgency. Replaced common abbreviations and directness with formal language.", "suggestions": ["Use 'Hey' or 'Hi' if appropriate.", "'ASAP' is understood in many contexts; consider if formal 'urgently' is necessary."]}`
3. **Generic Phrasing:**
`{"originalText": "I'm kinda bummed about the project delay.", "simulatedText": "I am somewhat disappointed regarding the project delay.", "differences": [...], "authenticityScore": 40, "feedbackMessage": "Informal expressions like 'kinda bummed' were replaced with more standard vocabulary, reducing the personal impact.", "suggestions": ["'Kinda bummed' conveys a specific, relatable emotion. Consider if the formal version loses that nuance."]}`
4. **Complex Sentence Structure Change:**
`{"originalText": "If you could just send over the files when you have a sec, that'd be great.", "simulatedText": "Please send the files at your earliest convenience.", "differences": [...], "authenticityScore": 30, "feedbackMessage": "The original's polite, slightly informal request structure was simplified into a more direct, formal statement.", "suggestions": ["The original phrasing implies flexibility ('when you have a sec'). Retain this if possible."]}`
5. **Minimal Change (Positive Example):**
`{"originalText": "Great job on the presentation! Really clear.", "simulatedText": "Excellent work on the presentation. It was very clear.", "differences": [...], "authenticityScore": 85, "feedbackMessage": "Minor adjustments were made, but the core message and positive tone are well-preserved.", "suggestions": []}`
**10. DEPLOYMENT NOTES:**
- **Build Command:** Use `npm run build` (or `yarn build`) via Vite.
- **Environment Variables:** Use `.env` files for managing variables (e.g., API endpoints if external services are used later). Vite uses `VITE_` prefix by default. Ensure `NODE_ENV` is set correctly.
- **Hosting:** Suitable for static site hosting platforms like Vercel, Netlify, or GitHub Pages.
- **Performance:** Optimize bundle size by code-splitting components if the app grows. Use React.memo for preventing unnecessary re-renders. Lazy-load components.
- **SEO:** Implement basic SEO tags in `index.html` and consider a `sitemap.xml` for future growth. For a true SPA, initial SEO might be limited without SSR/SSG, but good meta tags are still crucial.