## AI Master Prompt: "Yazarın Sesi" - Orijinal İfade Koruyucu (Single Page SPA)
**PROJECT OVERVIEW:**
The "Yazarın Sesi" (The Writer's Voice) application aims to address the growing concern among writers that AI writing assistants and grammar checkers are homogenizing their unique writing styles, leading to a loss of personal voice and authenticity. The problem stems from the observation that while AI tools enhance grammar and vocabulary, they often strip away the distinctiveness that makes a writer's work individual. This app serves as a sanctuary for writers, providing tools and exercises to analyze, understand, and preserve their original writing style, ensuring their authentic voice remains prominent even amidst the rise of AI. The core value proposition is empowering writers to maintain their individuality and creative expression in an increasingly AI-influenced content landscape.
**TECH STACK:**
- **Frontend Framework:** React.js
- **Styling:** Tailwind CSS (with extensive configuration for a clean, modern aesthetic)
- **State Management:** Zustand (for efficient and scalable global state management)
- **Routing:** React Router DOM (for handling navigation within the SPA)
- **API Calls (if needed later):** Axios
- **Build Tool:** Vite (for fast development server and optimized builds)
- **Deployment Target:** Vercel/Netlify (consideration for seamless deployment)
**CORE FEATURES & USER FLOW:**
1. **Analyze Writing Style (Style Analyzer):**
* **User Flow:** User navigates to the 'Analyze' section. They can either paste text directly into a rich text editor or upload a document (.txt, .md). Upon submission, the tool analyzes the text for key stylistic elements: sentence length variation, vocabulary richness, common phrases, active vs. passive voice usage, use of adverbs/adjectives, and overall tone. Results are presented visually with charts and key metrics.
* **Details:** This feature uses NLP techniques (even if simulated for MVP) to identify patterns. It calculates metrics like average sentence length, unique word count ratio, readability scores (e.g., Flesch-Kincaid), and frequency of certain grammatical structures. It aims to provide an objective baseline of the user's current style.
2. **AI Intervention Detector (Authenticity Meter):**
* **User Flow:** Integrated within the 'Analyze' section or as a separate input. User pastes text. The meter provides a score (e.g., 0-100%) indicating the likelihood that the text has been heavily edited or generated by AI, based on unnatural smoothness, overly perfect grammar, or lack of colloquialisms/idiosyncrasies. It's a qualitative estimation.
* **Details:** This would simulate a heuristic analysis. For MVP, it can be a simplified scoring based on sentence uniformity, lack of common human errors (that AI might 'fix'), and use of predictable vocabulary. The goal is to raise awareness about potential over-reliance on AI correction.
3. **Creative Writing Exercises (Voice Builder):**
* **User Flow:** User navigates to the 'Exercises' section. They can choose from a list of prompts designed to encourage free writing and personal expression (e.g., 'Describe your favorite childhood memory using only sensory details,' 'Write a short story from the perspective of an inanimate object'). The interface provides a distraction-free writing area. A timer can be optionally enabled. After writing, users can save or analyze their work using the Style Analyzer.
* **Details:** Exercises are categorized (e.g., Descriptive, Narrative, Reflective). They focus on encouraging improvisation and reducing self-censorship, crucial for retaining a natural voice. The emphasis is on *process* over *perfection*.
4. **Style Preservation Guide (Tips & Strategies):**
* **User Flow:** A static or dynamically updated section accessible via navigation. It contains articles, tips, and best practices for writers aiming to maintain their voice. Topics include: mindful use of editing tools, identifying personal stylistic 'tics', developing a pre-writing 'voice check' routine, and understanding the difference between editing for clarity and editing for homogeneity.
* **Details:** Content is curated to be practical and actionable, reinforcing the app's core message.
**UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) with a clean, minimalist, and intuitive navigation. A primary sidebar or top navigation bar will lead to the main sections (Analyze, Exercises, Guide). The main content area will display the tools and information.
- **Color Palette:** Calming and focused. Primary colors: a deep, muted blue (#1E3A8A) for navigation/accents, a light grey (#F3F4F6) for backgrounds, and a clean white (#FFFFFF) for text areas and cards. Secondary accent color: a warm, subtle orange (#F97316) for calls to action and highlights.
- **Typography:** Modern and readable sans-serif fonts. Headings: Inter (Bold, SemiBold). Body Text: Inter (Regular). Ensure sufficient line height and spacing for comfortable reading.
- **Responsive Design:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (mobile, tablet, desktop). Navigation might collapse into a hamburger menu on smaller screens. Text areas and controls should be easily usable on touch devices. Use Tailwind CSS's responsive modifiers (sm:, md:, lg:, xl:).
- **Focus:** Emphasis on distraction-free writing environments, clear data visualization, and easy access to information. Loading states and subtle animations should guide the user without being intrusive.
**COMPONENT BREAKDOWN:**
- `App.jsx`: Main application component, sets up routing and global layout.
- `Layout.jsx`: Wrapper component for overall page structure, including navigation and footer.
- `Navbar.jsx` / `Sidebar.jsx`: Handles primary navigation links.
- `HomePage.jsx`: Landing page, introduces the app's purpose.
- `AnalyzerPage.jsx`: Container for the Style Analyzer and Authenticity Meter.
- `TextInputArea.jsx`: Rich text editor component for pasting/writing text. Props: `initialValue`, `onChange`, `placeholder`.
- `FileUpload.jsx`: Component for handling document uploads. Props: `onFileSelect`.
- `StyleAnalysisResults.jsx`: Displays the results from the Style Analyzer. Props: `analysisData` (object containing metrics).
- `AuthenticityMeter.jsx`: Visual meter component showing AI intervention score. Props: `score` (number).
- `ExercisesPage.jsx`: Container for the writing exercises section.
- `ExerciseCard.jsx`: Displays individual exercise prompts. Props: `title`, `description`, `onStart`.
- `WritingPad.jsx`: Distraction-free editor for exercises. Props: `initialText`, `onChange`, `onSubmit`, `isTimerActive`, `duration`.
- `GuidePage.jsx`: Displays articles and tips from the Style Preservation Guide.
- `ArticleViewer.jsx`: Renders individual guide articles. Props: `article` (object containing title, content).
- `Button.jsx`: Reusable custom button component. Props: `onClick`, `variant` (primary/secondary), `children`, `isLoading`.
- `LoadingSpinner.jsx`: Reusable loading indicator.
- `Modal.jsx`: For displaying messages, confirmations, or errors.
**DATA MODEL & STATE MANAGEMENT (Zustand):**
- **`store.js` (Zustand Store):**
* `textToAnalyze`: string
* `analysisResults`: object | null
* `authenticityScore`: number | null
* `currentExercise`: object | null
* `savedExercises`: array (of text entries)
* `isLoading`: boolean
* `error`: string | null
- **Actions:**
* `analyzeText(text)`: Fetches/calculates analysis and authenticity scores.
* `startExercise(exerciseId)`: Sets the current exercise.
* `saveExerciseEntry(entry)`: Saves user's written exercise.
* `clearState()`: Resets relevant parts of the store.
- **Mock Data Format (Example for `analysisResults`):**
```json
{
"avgSentenceLength": 15.2,
"readabilityScore": 65.5, // Flesch Reading Ease
"vocabularyRichness": 0.75, // Unique words / Total words
"passiveVoiceRatio": 0.10,
"tone": "Informative", // e.g., Formal, Informal, Analytical, Creative
"stylisticPatterns": ["use of semicolons", "complex sentence structures"]
}
```
- **Mock Data Format (Example for `authenticityScore`):**
```json
{
"score": 85, // 85% likely AI-assisted/edited
"confidence": "High", // or Medium, Low
"reasoning": "Consistent sentence length, overly formal vocabulary, lack of colloquialisms."
}
```
- **Mock Data Format (Example for `currentExercise`):
```json
{
"id": "ex001",
"title": "Sensory Memory Recall",
"description": "Describe your favorite childhood memory using only sensory details (sight, sound, smell, taste, touch). Aim for vivid imagery."
}
```
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out animations between sections using `Framer Motion` or CSS transitions for a smooth SPA experience.
- **Button Hovers:** Slight scale-up or background color change on hover for interactive elements.
- **Loading States:** Use `LoadingSpinner` component. When data is being fetched or processed (e.g., during text analysis), the relevant UI elements (buttons, result areas) should show a loading state (spinner overlay or disabled state with text). Examples: Button `isLoading` prop, disabling input fields.
- **Meter Animation:** The `AuthenticityMeter` should have a smooth transition animation as the score updates.
- **Micro-interactions:** Subtle feedback on actions like saving an exercise (e.g., a brief confirmation message). Input field focus states with distinct borders.
**EDGE CASES:**
- **Empty State:** When no text is entered for analysis, display a clear message prompting the user to input text. For exercises, show a welcome message and available exercises. For results, show placeholders until analysis is complete.
- **Error Handling:** Implement try-catch blocks for API calls or complex processing. Display user-friendly error messages in a `Modal` or toast notification (e.g., 'Analysis failed. Please try again later.'). Handle file upload errors (unsupported format, size limit).
- **Validation:** Basic client-side validation for file uploads (e.g., check file type). Ensure text input limits are handled gracefully.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. Keyboard navigation should be fully supported. Color contrast ratios must meet WCAG AA standards. Provide alt text for any meaningful images.
**SAMPLE DATA (for UI/Testing):
```json
// Sample for Style Analysis Results
{
"avgSentenceLength": 18.5,
"readabilityScore": 58.2,
"vocabularyRichness": 0.68,
"passiveVoiceRatio": 0.15,
"tone": "Analytical",
"stylisticPatterns": ["use of parenthetical phrases", "varied conjunctions"]
}
// Sample for Authenticity Meter
{
"score": 65,
"confidence": "Medium",
"reasoning": "Slightly uniform sentence structure, vocabulary could be more varied."
}
// Sample User Written Exercise Entry
{
"id": "entry001",
"exerciseId": "ex001",
"timestamp": "2024-07-27T10:30:00Z",
"text": "The worn wooden swing set creaked a mournful song under the summer sky. Cicadas buzzed, a relentless, shimmering curtain of sound. The air hung thick with the sweet, cloying scent of honeysuckle and the faint metallic tang of rust from the chains."
}
// Sample Exercise Prompt
{
"id": "ex002",
"title": "Object Perspective",
"description": "Write a 300-word piece from the perspective of a forgotten coffee mug on a dusty shelf."
}
// Sample Guide Article Snippet
{
"id": "guide001",
"title": "The 'Edit Once, Edit Well' Principle",
"content": "Instead of relying on AI to catch every nuance, develop a personal editing checklist. Focus on clarity, conciseness, and crucially, your unique voice. Ask yourself: Does this sound like *me*?"
}
// Another Exercise Prompt
{
"id": "ex003",
"title": "Unusual Metaphor Challenge",
"description": "Describe the feeling of 'excitement' using a metaphor that is completely unrelated to common representations (e.g., not about fireworks, electricity, or speed)."
}
```
**DEPLOYMENT NOTES:**
- **Build Configuration:** Configure Vite for production builds (`vite build`). Ensure the `base` path is correctly set if deploying to a subdirectory.
- **Environment Variables:** Use `.env` files for any configuration (e.g., API endpoints if implemented later). Prefix variables with `VITE_` for client-side access.
- **Performance Optimizations:** Code splitting (handled by Vite's build process), lazy loading components, image optimization (if any are added). Minify CSS and JavaScript. Ensure efficient state management to prevent unnecessary re-renders.
- **SEO (Basic):** Use `react-helmet-async` or similar for managing document title and meta tags dynamically, especially for the Guide section if it becomes publicly indexable.
- **PWA:** Consider adding PWA capabilities for offline access to exercises or saved content.