You are an expert AI development assistant tasked with creating a single-page web application (SPA) using React and Tailwind CSS. The application, named 'MarkdownFlow', aims to streamline the process of converting and managing documents between Markdown and LibreOffice ODT formats, leveraging the new Markdown support in LibreOffice Writer.
**PROJECT OVERVIEW:**
MarkdownFlow is a SaaS application designed to bridge the gap between lightweight Markdown writing and the professional features of LibreOffice. It solves the problem of users needing to frequently convert documents between these formats for different purposes (e.g., writing notes in Markdown, creating formal reports in LibreOffice). The core value proposition is to provide a seamless, efficient, and user-friendly interface for format conversion, basic editing, and document management, enhancing productivity for technical writers, developers, and academics.
**TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **Styling:** Tailwind CSS for rapid UI development and consistent design.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for handling different views/sections within the SPA.
- **API Interaction:** `fetch` API or Axios for potential future backend integration (though MVP will use local processing).
- **UI Components:** React Icons for icons.
**CORE FEATURES (MVP):**
1. **Markdown to ODT Conversion:**
* **User Flow:** User lands on the main page. They see an upload area or a text input for Markdown content. They can either paste Markdown text directly into a textarea or upload a `.md` file. Upon action (button click), the application processes the Markdown, converts it to ODT format, and provides a download link for the `.odt` file.
* **Functionality:** Utilizes a client-side Markdown parsing library (like `marked` or `markdown-it`) and a library capable of generating ODT files from parsed content (this might involve a more complex library or a simulated ODT structure based on common formats. For MVP, we can focus on basic Markdown elements like headings, lists, bold, italic, and links).
2. **ODT to Markdown Conversion:**
* **User Flow:** User selects the ODT to Markdown conversion option. They are presented with an upload area for `.odt` files. After uploading, the application processes the file, extracts the content, attempts to convert it into Markdown syntax, and provides a download link for the generated `.md` file.
* **Functionality:** This is more complex due to ODT's rich structure. A robust library for ODT parsing (like `mammoth.js` for Word docs which can be adapted, or a dedicated ODT parser if available for JS) will be needed to extract text, headings, lists, tables, etc., and map them to Markdown syntax. The MVP will focus on basic text, headings, and lists.
3. **Basic Text Editing (in Markdown):**
* **User Flow:** When Markdown content is pasted or generated, it appears in an editable textarea. Users can directly modify the Markdown text. Simple toolbar buttons (Bold, Italic, Heading 1, List) are available above the editor to quickly apply Markdown syntax without manual typing.
* **Functionality:** Integrates with the Markdown editor textarea. Toolbar buttons will insert the corresponding Markdown syntax (e.g., `**text**`, `# Heading`, `- list item`) at the cursor position or apply it to selected text.
4. **File Download:**
* **User Flow:** After conversion, a clear download button appears for the generated file (either `.odt` or `.md`). Clicking the button initiates the file download.
* **Functionality:** Uses JavaScript to trigger a file download based on the converted content and specified file type.
5. **User Accounts & Basic Project Management (Optional for MVP, but good for scope):**
* **User Flow:** Users can sign up/log in. They can save their converted or original documents to their account, organizing them into simple projects. A dashboard view lists saved documents/projects.
* **Functionality:** Requires a simple backend or local storage solution for persistence. For MVP, local storage can be used to simulate this.
**UI/UX DESIGN:**
- **Layout:** A clean, single-page interface. A prominent central area for conversion actions (upload/paste/output). A simple navigation (if multiple sections are needed, e.g., Dashboard, Converter). Responsive design adapting to desktop, tablet, and mobile screen sizes.
- **Color Palette:** Primary: `#4CAF50` (Green - for trust, action), Secondary: `#333333` (Dark Gray - for text), Accent: `#FFC107` (Amber - for attention, warnings), Background: `#FFFFFF` (White) / `#F5F5F5` (Light Gray).
- **Typography:** Use a clean, readable sans-serif font like 'Inter' or 'Roboto'. Headings should be distinct. Body text should have comfortable line spacing.
- **Responsive Rules:** Mobile-first approach. Navigation collapses into a hamburger menu. Input/output areas stack vertically on smaller screens. Ensure touch targets are adequately sized.
**COMPONENT BREAKDOWN:**
- **`App.js`:** Main application component, sets up routing and global layout.
- **`Header.js`:** Contains the application title, logo, and navigation links. Includes user authentication status/buttons.
- **`Converter.js`:** The core component. Manages the state for input/output, handles file uploads, and orchestrates conversion logic. Contains `InputArea` and `OutputArea`.
- **`InputArea.js`:** Props: `onContentChange`, `onFileDrop`, `inputType` (text/file). Renders a textarea or a file drop zone. Includes buttons for format selection (MD to ODT / ODT to MD).
- **`EditorToolbar.js`:** Props: `onButtonClick`. Renders buttons for Markdown formatting (Bold, Italic, H1, List).
- **`OutputArea.js`:** Props: `convertedContent`, `downloadFilename`, `isLoading`.
- **`DownloadButton.js`:** Props: `content`, `filename`, `mimeType`. Renders the download button.
- **`Footer.js`:** Contains copyright information and links.
- **`Auth.js` (Optional for MVP):** Components for Login/Signup forms.
- **`Dashboard.js` (Optional for MVP):** Displays saved documents/projects.
**DATA MODEL:**
- **State:** Managed using Zustand or React Context.
- `currentInput`: String (holds Markdown text or placeholder).
- `outputContent`: String (holds converted content).
- `outputFilename`: String (suggested filename for download).
- `conversionType`: String ('md-to-odt' or 'odt-to-md').
- `isLoading`: Boolean (indicates if conversion is in progress).
- `error`: String | null (stores any error messages).
- `currentUser`: Object | null (for authentication).
- `userDocuments`: Array (for dashboard/saved files).
- **Mock Data:**
- **Markdown Input Example:**
```markdown
# Sample Document
This is a paragraph with **bold** and *italic* text.
- List item 1
- List item 2
[Visit Hacker News](https://news.ycombinator.com)
```
- **ODT Structure (Conceptual - for ODT to MD):** The parser needs to interpret ODT's XML structure (like `<text:h text:style-name="Heading_2">` or `<text:list-item>`) and map it to Markdown.
- **User Document Example (for Dashboard):**
```json
{
"id": "doc123",
"name": "My First Report",
"createdAt": "2023-10-27T10:00:00Z",
"type": "odt",
"preview": "# My First Report..."
}
```
**ANIMATIONS & INTERACTIONS:**
- **File Drop Zone:** Subtle background color change and border highlight on drag-over.
- **Buttons:** Smooth hover effect (slight scale or background color change).
- **Loading State:** Display a spinner or progress indicator within the output area while `isLoading` is true. Button might be disabled.
- **Transitions:** Smooth transitions for showing/hiding elements (e.g., error messages, download links).
- **Input/Output Area:** Smooth scrolling. Potential subtle animation when new content appears.
**EDGE CASES:**
- **Empty Input:** Handle cases where the user tries to convert empty input. Display a user-friendly message.
- **Unsupported File Types:** If file upload is implemented, reject non-`.md` or non-`.odt` files with an error message.
- **Conversion Errors:** Gracefully handle errors during conversion (e.g., malformed ODT file, library failures). Display clear error messages to the user.
- **Large Files:** Implement basic handling for potentially large files (e.g., display a warning, use streaming if possible, though client-side JS has limitations).
- **Accessibility (a11y):** Ensure all interactive elements have proper ARIA attributes, keyboard navigation is supported, and sufficient color contrast is maintained. Use semantic HTML elements.
- **Browser Compatibility:** Test basic functionality across modern browsers (Chrome, Firefox, Safari, Edge).
**SAMPLE DATA:**
1. **Markdown Input (Simple):**
```markdown
# Welcome to MarkdownFlow
Convert your **documents** easily!
```
2. **Markdown Input (Lists & Links):**
```markdown
## Features
- Easy conversion
- Basic editing
- Downloadable files
Learn more at [LibreOffice](https://www.libreoffice.org/)
```
3. **Markdown Input (Code Block - Basic Support):**
```markdown
```javascript
console.log('Hello, Markdown!');
```
```
4. **Expected ODT Output (Conceptual for Sample 1):** A `.odt` file containing "Welcome to MarkdownFlow" as Heading 1 and "Convert your **documents** easily!" as a paragraph with bold text.
5. **Expected Markdown Output (Conceptual for a simple ODT):** An `.md` file containing the equivalent Markdown syntax for the ODT's content.
6. **Error Message Example:** "Failed to convert ODT file. Please ensure it is a valid LibreOffice document."
7. **Loading State Indicator:** A visual cue (spinner/text) indicating "Converting...".
8. **Empty State Message:** "Paste your Markdown text or upload a file to start."
**DEPLOYMENT NOTES:**
- **Build:** Use `create-react-app` with TypeScript template or Vite for a fast build process. Configure `tailwind.config.js` for purging unused styles.
- **Environment Variables:** Use `.env` files for API keys or configuration if a backend is added later. For MVP, minimal environment variables needed.
- **Performance:** Optimize bundle size by code-splitting features if the app grows. Lazy-load components. Ensure efficient state management to prevent unnecessary re-renders. Optimize image loading if any are used.
- **Hosting:** Can be deployed on static hosting platforms like Netlify, Vercel, GitHub Pages.