You are an expert AI assistant tasked with generating a single-page React SPA for a new SaaS application called 'Jargon Analiz: Kurumsal Dil Zehrini Temizle' (Jargon Analysis: Clean Corporate Language Poison). This application aims to combat the negative effects of corporate jargon and meaningless business rhetoric in the workplace by analyzing text and providing clearer alternatives. The goal is to improve communication clarity, focus on practical decision-making, and enhance overall productivity.
**1. PROJECT OVERVIEW**
**Application Goal:** To provide a tool that analyzes text for corporate jargon, buzzwords, and semantically empty phrases, offering insights into their impact and suggesting clearer, more concise alternatives.
**Problem Solved:** Addresses the issue of corporate bullshit that confuses rather than clarifies, potentially hindering practical decision-making and efficiency, as highlighted by research on the Corporate Bullshit Receptivity Scale (CBSR).
**Value Proposition:** Empower organizations and individuals to communicate more effectively by identifying and eliminating meaningless jargon, fostering transparency, and promoting a focus on substance over style.
**2. TECH STACK**
- **Frontend Framework:** React (using Create React App or Vite for setup)
- **Styling:** Tailwind CSS for rapid UI development and a consistent design system.
- **State Management:** React Context API for managing global state (e.g., user authentication, analysis results) and `useState`/`useReducer` for local component state.
- **Routing:** React Router DOM for navigation within the single-page application.
- **API Calls:** `fetch` API or `axios` for potential future backend integration (though MVP will focus on client-side processing or mock data).
- **AI/NLP (Client-side simulation for MVP):** Basic keyword matching and text analysis logic will be implemented directly in React components. For a true AI implementation, a dedicated NLP library or a backend API would be required.
- **Form Handling:** Basic form handling with React state.
- **Utility Library:** Lodash (optional, for utility functions if needed).
**3. CORE FEATURES**
**3.1. Text Input/Upload:**
- **User Flow:** Upon landing on the app, the user is presented with a prominent text area. They can paste their text directly into the area. An alternative 'Upload File' button will allow users to upload .txt or .docx files (MVP might simulate upload or only support direct paste).
- **Functionality:** The text area should have a clear placeholder like 'Paste your corporate text here...'. A character counter might be displayed. The upload functionality will trigger a file selection dialog.
**3.2. Jargon Detection & Analysis:**
- **User Flow:** After inputting text, the user clicks an 'Analyze Text' button. The application processes the text. A loading indicator is displayed. Once processed, the analysis results are shown.
- **Functionality:** The core logic will identify predefined keywords and patterns associated with corporate jargon (e.g., 'synergize', 'paradigm', 'leverage', 'growth-hacking', 'stakeholder engagement', 'best practices', 'low-hanging fruit', 'deep dive', 'circle back', 'bandwidth'). It will also analyze sentence structure for excessive complexity or abstraction. The output should include a list of identified jargon terms and a 'Corporate Bullshit Score' (0-100) indicating the receptivity to jargon.
**3.3. Impact Assessment:**
- **User Flow:** This is displayed alongside the jargon detection results. It provides a qualitative and quantitative assessment.
- **Functionality:** Explains *why* the detected jargon might be problematic (e.g., 'Vague', 'Overused', 'Misleading', 'Jargonistic'). Assigns a clarity score to the overall text.
**3.4. Alternative Suggestions:**
- **User Flow:** For each identified jargon term or problematic phrase, a 'Suggest Alternatives' button or inline suggestion appears. Clicking it reveals clearer options.
- **Functionality:** Provides contextually relevant, simpler alternatives to the jargon. For example, 'synergize' might suggest 'work together' or 'collaborate'. 'Leverage' might suggest 'use' or 'utilize'.
**4. UI/UX DESIGN**
- **Layout:** Single-page application. A clean, modern, and professional interface.
- **Header:** App title ('Jargon Analiz'), possibly a simple navigation if more features are added later (e.g., History, Account).
- **Main Content Area:** Dominant text input/output section.
- **Sidebar (Optional):** Could display analysis score, jargon list, or tips.
- **Footer:** Copyright info, links to privacy policy/terms.
- **Color Palette:** Primarily blues and whites for a professional and trustworthy feel, with accent colors (e.g., a muted orange or green) for calls to action and highlights. Use `bg-blue-50`, `text-gray-800`, `border-blue-200`, `hover:bg-blue-100`, `focus:ring-blue-500` as examples.
- **Typography:** Use a clean, readable sans-serif font like 'Inter' or 'Roboto'. Maintain a clear hierarchy with distinct heading sizes (`text-4xl`, `text-2xl`, `text-lg`) and body text (`text-base`).
- **Responsive Design:** Mobile-first approach. Ensure the layout adapts seamlessly to different screen sizes (smartphones, tablets, desktops). Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`). The main text area should be easily usable on small screens.
- **Key Components:** Text Input Area, Analysis Button, Results Display (Score, Jargon List, Clarity Score), Suggestion Cards, Loading Spinner.
**5. DATA MODEL**
- **State Structure (using Context API or local state):**
```javascript
const [inputText, setInputText] = useState('');
const [analysisResult, setAnalysisResult] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
```
- **`analysisResult` Object Structure:**
```javascript
{
corporateBullshitScore: number, // e.g., 75 (0-100)
clarityScore: number, // e.g., 4 (1-5 scale)
jargonTerms: [
{
term: string, // e.g., 'synergize'
definition: string, // e.g., 'To work together to create a combined effect greater than the sum of separate effects.'
context: string, // e.g., 'We need to synergize our efforts.'
impact: string, // e.g., 'Vague, overuse. Suggest: 'work together', 'collaborate'.'
suggestions: string[] // e.g., ['work together', 'collaborate']
}
],
summary: string // A brief summary of the analysis.
}
```
- **Mock Data:** Use the `analysisResult` structure defined above for mock data. Example provided in Section 9.
**6. COMPONENT BREAKDOWN**
- **`App.js`:** Main application component. Sets up routing (if needed for future expansion), global context providers, and renders the main layout.
- **`Header.js`:** Displays the application title and potentially navigation links.
- **`MainLayout.js`:** Wraps the core content, applying overall layout structure and styling.
- **`TextInput.js`:**
- Props: `value` (string), `onChange` (function), `placeholder` (string)
- Responsbility: Renders the main text input area and handles user input. Manages its local state or receives state from parent.
- **`AnalyzeButton.js`:**
- Props: `onClick` (function), `disabled` (boolean)
- Responsbility: The primary call to action to trigger the analysis. Disables when input is empty or during analysis.
- **`LoadingSpinner.js`:**
- Props: None (or `size`, `color`)
- Responsbility: Displays a visual indicator while the analysis is in progress.
- **`ResultsDisplay.js`:**
- Props: `result` (object, the `analysisResult` structure)
- Responsbility: Renders the analysis outcome, including the jargon score, clarity score, list of jargon terms, and their details.
- **`JargonTermCard.js`:**
- Props: `term` (string), `definition` (string), `context` (string), `impact` (string), `suggestions` (array of strings)
- Responsbility: Displays the details for a single identified jargon term, including its definition, usage context, impact assessment, and suggested alternatives.
- **`SuggestionChip.js`:**
- Props: `suggestion` (string)
- Responsbility: Renders a single suggested alternative phrase.
- **`ScoreIndicator.js`:**
- Props: `score` (number), `label` (string)
- Responsbility: Visualizes a score (e.g., using a progress bar or simple numeric display).
**7. ANIMATIONS & INTERACTIONS**
- **Input Area:** Subtle focus outline using Tailwind's `focus:` utilities.
- **Analyze Button:** Slight hover effect (`hover:scale-105`, `hover:shadow-lg`). Disabled state should have reduced opacity.
- **Loading State:** A smooth, looping CSS animation for the `LoadingSpinner`. The entire results area could fade in upon completion.
- **Results Display:** Components like `JargonTermCard` can fade in as they are rendered. Use `transition` utilities in Tailwind.
- **Suggestion Display:** When alternatives are revealed, they can animate in from the bottom or fade in.
- **Micro-interactions:** Button clicks should provide visual feedback.
**8. EDGE CASES**
- **Empty Input:** Disable the 'Analyze' button if the `inputText` is empty or only contains whitespace. Display a subtle message.
- **Error Handling:** If the (simulated) analysis fails, display a user-friendly error message (e.g., 'Analysis failed. Please try again.'). Use the `error` state.
- **No Jargon Found:** If no jargon is detected, display a positive message (e.g., 'Great! No significant corporate jargon found in your text.').
- **Long Text:** Ensure the application remains performant and responsive with large amounts of text. Consider client-side text processing limits and provide feedback.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. All interactive elements should be focusable via keyboard navigation. Use ARIA attributes where necessary (e.g., for loading states).
- **Input Validation:** Basic check for empty strings. More advanced validation could check for unusual character sets if needed.
**9. SAMPLE DATA**
Mock `analysisResult` objects:
**Sample 1 (High Jargon):**
```json
{
"corporateBullshitScore": 85,
"clarityScore": 2,
"jargonTerms": [
{
"term": "synergize",
"definition": "To work together to create a combined effect greater than the sum of separate effects.",
"context": "We need to synergize our efforts to achieve optimal outcomes.",
"impact": "Vague, jargonistic. Suggests a lack of clear action.",
"suggestions": ["work together", "collaborate", "combine efforts"]
},
{
"term": "paradigm shift",
"definition": "A fundamental change in approach or underlying assumptions.",
"context": "We are experiencing a major paradigm shift in our market.",
"impact": "Overused buzzword. Often used without a clear understanding of the change.",
"suggestions": ["significant change", "major change in approach", "new direction"]
},
{
"term": "leverage",
"definition": "To use (something) to maximum advantage.",
"context": "We will leverage our core competencies to drive growth.",
"impact": "Often replaceable with simpler verbs.",
"suggestions": ["use", "utilize", "take advantage of"]
}
],
"summary": "The text contains a high concentration of corporate jargon, making it difficult to understand the concrete actions being proposed. Clarity is significantly impacted."
}
```
**Sample 2 (Moderate Jargon):
```json
{
"corporateBullshitScore": 55,
"clarityScore": 3,
"jargonTerms": [
{
"term": "growth-hacking",
"definition": "A focus on low-cost and innovative marketing tactics to acquire and retain customers.",
"context": "Our new strategy involves some aggressive growth-hacking.",
"impact": "Buzzword, can be vague. Needs specific tactics explained.",
"suggestions": ["effective marketing strategies", "customer acquisition tactics", "innovative marketing"]
},
{
"term": "stakeholder",
"definition": "A person with an interest or concern in something, especially a business.",
"context": "We need to manage stakeholder expectations carefully.",
"impact": "Generally acceptable, but ensure context is clear.",
"suggestions": ["involved parties", "interested groups", "customers and partners"]
}
],
"summary": "The text includes some common business terms that could be simplified for broader understanding. Overall clarity is moderate."
}
```
**Sample 3 (Low Jargon):**
```json
{
"corporateBullshitScore": 15,
"clarityScore": 5,
"jargonTerms": [],
"summary": "The text is clear, concise, and avoids unnecessary jargon. Excellent communication."
}
```
**10. DEPLOYMENT NOTES**
- **Build Command:** Use the standard build command for your chosen React setup (e.g., `npm run build` or `yarn build`).
- **Environment Variables:** For MVP, minimal environment variables are needed. If integrating with a backend API, use variables like `REACT_APP_API_URL`.
- **Hosting:** Can be deployed as a static site on platforms like Netlify, Vercel, GitHub Pages, or AWS S3/CloudFront.
- **Performance Optimizations:**
- Code Splitting: Use React's `lazy` and `Suspense` for component-level code splitting if the app grows complex.
- Image Optimization: If images are used, ensure they are optimized.
- Memoization: Use `React.memo`, `useMemo`, `useCallback` judiciously to prevent unnecessary re-renders, especially in list components.
- **HTTPS:** Always serve the application over HTTPS in production.
- **Caching:** Configure appropriate browser caching strategies for static assets.