PROJECT OVERVIEW:
You are tasked with creating a single-page React application for 'Zihin Uzantısı: Uzun Vadeli Görev Yöneticisi' (Mind Extension: Long-Horizon Task Manager). This application aims to solve the problem of managing complex, long-horizon tasks by leveraging advanced AI language models to break them down into manageable sub-tasks, prioritize them, and track progress. The core value proposition is to provide users with an intelligent assistant that simplifies project management, enhances focus, and boosts productivity for ambitious goals. The application will act as a smart layer on top of traditional to-do lists, understanding context and providing actionable steps for long-term objectives.
TECH STACK:
- Frontend Framework: React.js (using functional components and hooks)
- Styling: Tailwind CSS for rapid UI development and utility-first styling.
- State Management: Zustand for lightweight and efficient global state management.
- Routing: React Router DOM for potential future expansion to multiple pages, though MVP is single-page.
- AI Integration: Placeholder for a future API call to a hypothetical AI backend. For MVP, simulate AI responses with mock data.
- Icons: Heroicons for a clean and consistent icon set.
- Build Tool: Vite for fast development server and build times.
CORE FEATURES:
1. **AI-Powered Task Decomposition:**
* User Flow: The user enters a long-term goal or project description (e.g., "Launch a new SaaS product in 6 months") into a prominent input field. Upon submission, the application simulates an AI processing this input.
* AI Simulation: The mock AI response will return a structured list of primary phases and actionable sub-tasks. Each sub-task should include a title, a brief description, and a suggested difficulty/time estimate.
* UI Display: These decomposed tasks are presented in a clear, hierarchical, and editable list format.
2. **Contextual Task Prioritization & Management:**
* User Flow: After task decomposition, users can review, edit, reorder, and mark tasks as complete. The system should allow users to add notes, set manual deadlines, and assign priorities (e.g., High, Medium, Low).
* AI Assistance (Simulated): The 'AI' can suggest task orderings based on logical dependencies or user-defined project timelines. The UI should reflect these suggestions subtly, allowing user override.
* Task Display: Tasks will be displayed in a primary list view, filterable by status (To Do, In Progress, Done) and priority. Completed tasks should be visually distinct (e.g., strikethrough, greyed out).
3. **Project Progress Visualization:**
* User Flow: As users mark sub-tasks as complete, the overall project progress should update automatically.
* UI Display: A clear progress bar or a simple percentage indicator at the top of the application will show the completion status of the main goal/project. This provides immediate visual feedback on advancement.
4. **User Feedback and Learning (Simulated):**
* User Flow: Users can edit any AI-generated task (title, description, sub-tasks). They can also 'approve' or 'reject' AI suggestions.
* System Behavior (Simulated): The application will store these edits. While a real AI would learn, here we focus on the user's ability to refine the AI's output, ensuring the final plan is user-driven. A simple 'Edit' button will be available on each task.
UI/UX DESIGN:
- **Layout:** Single-page application layout. A clean, minimalist design. A main content area for task input and lists. A persistent header for the app title and overall progress. A sidebar (optional for MVP, could be a modal) for settings or future features.
- **Color Palette:** Primary: A calming deep blue (#1E3A8A). Secondary: A vibrant accent color for buttons and highlights (e.g., Teal #14B8A6). Neutrals: Grays for text and backgrounds (e.g., #F3F4F6, #6B7280, #1F2937).
- **Typography:** Sans-serif font (e.g., Inter or system default) for readability. Clear hierarchy using font weights and sizes. Headings: Bold, larger sizes. Body text: Regular weight, comfortable reading size.
- **Responsive Design:** Mobile-first approach. The layout should adapt fluidly to various screen sizes. On small screens, elements will stack vertically. On larger screens, a two-column layout might be considered for task details vs. list.
- **Interactivity:** Clear hover states for buttons and actionable elements. Smooth transitions for opening/closing modals or expanding task details.
COMPONENT BREAKDOWN:
1. `App.jsx`:
* Props: None.
* Responsibility: Main application component. Sets up layout, state management provider (Zustand store), and renders child components. Manages the overall structure.
2. `Header.jsx`:
* Props: `projectName` (string), `progress` (number).
* Responsibility: Displays the application title ('Zihin Uzantısı') and the main project's progress bar.
3. `GoalInputForm.jsx`:
* Props: `onSubmitGoal` (function).
* Responsibility: Contains the input field and button for the user to enter their long-term goal. Calls `onSubmitGoal` when the form is submitted.
4. `TaskList.jsx`:
* Props: `tasks` (array of task objects), `onUpdateTask` (function), `onDeleteTask` (function).
* Responsibility: Renders the list of decomposed tasks. Manages task display, filtering, and sorting. Passes down update/delete functions to individual `TaskItem` components.
5. `TaskItem.jsx`:
* Props: `task` (object), `onUpdate` (function), `onDelete` (function).
* Responsibility: Renders a single task item. Includes task title, description, priority, deadline, and completion checkbox. Handles inline editing and triggers update/delete actions.
6. `EditTaskModal.jsx`:
* Props: `task` (object), `isOpen` (boolean), `onClose` (function), `onSave` (function).
* Responsibility: Modal dialog for editing task details (title, description, priority, deadline). Handles form inputs within the modal.
7. `ProgressBar.jsx`:
* Props: `progress` (number).
* Responsibility: Visual representation of the project completion percentage.
DATA MODEL:
- **`Task` Object Structure:**
```javascript
{
id: string; // Unique identifier
title: string;
description: string;
priority: 'High' | 'Medium' | 'Low';
deadline: string | null; // ISO date string or null
isCompleted: boolean;
subTasks?: Task[]; // Optional, for hierarchical breakdown
createdAt: string; // ISO date string
}
```
- **`Project` State Structure:**
```javascript
{
projectName: string;
goal: string;
tasks: Task[];
overallProgress: number;
}
```
- **State Management (Zustand Store):**
* `useStore` hook will manage the `Project` state.
* Actions: `setProjectName`, `setGoal`, `addTask`, `updateTask`, `deleteTask`, `setTasks` (for AI decomposition result).
* Selectors for derived state like `overallProgress`.
- **Local Storage:** MVP will use Zustand's persistence middleware to save state to `localStorage`, ensuring data persistence between sessions.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on buttons and task list items when hovered.
- **Transitions:** Smooth transitions for the `EditTaskModal` appearing/disappearing. Smooth animation for the `ProgressBar` updating.
- **Loading States:** When simulating the AI task decomposition, display a loading indicator (e.g., spinner or pulsating dots) for 1-2 seconds.
- **Micro-interactions:** Checkbox animation when marking a task complete. Visual feedback on form submission success/error.
EDGE CASES:
- **Empty State:** When no goal is set, display a welcoming message and the `GoalInputForm`. When tasks are generated but none are completed, the progress bar shows 0%. If a goal is set but no tasks are generated (error simulation), display an appropriate message.
- **Error Handling:** Simulate API errors during AI task generation (e.g., display a toast notification: "AI service temporarily unavailable. Please try again later."). Basic input validation for the goal input (e.g., not empty).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary (e.g., for modal dialogs). Keyboard navigability for all interactive elements. Sufficient color contrast.
SAMPLE DATA:
1. **Initial Goal Input:**
`goal: "Develop a personal finance tracking mobile app"`
2. **Mock AI Response (Tasks Array):**
```javascript
[
{
id: 't1', title: 'Define Core Features', description: 'Identify essential features for the MVP.', priority: 'High', deadline: '2023-11-10', isCompleted: false,
subTasks: [
{ id: 't1.1', title: 'Budgeting', description: 'Allow users to set budgets for categories.', priority: 'High', deadline: '2023-11-05', isCompleted: false },
{ id: 't1.2', title: 'Expense Tracking', description: 'Enable manual entry of expenses.', priority: 'High', deadline: '2023-11-07', isCompleted: false },
{ id: 't1.3', title: 'Reporting', description: 'Basic monthly spending summary.', priority: 'Medium', deadline: '2023-11-09', isCompleted: false }
]
},
{
id: 't2', title: 'Design UI/UX', description: 'Create wireframes and mockups.', priority: 'High', deadline: '2023-11-20', isCompleted: false,
subTasks: [
{ id: 't2.1', title: 'Wireframing', description: 'Sketch initial screen layouts.', priority: 'High', deadline: '2023-11-15', isCompleted: false },
{ id: 't2.2', title: 'Mockups', description: 'Develop high-fidelity visual designs.', priority: 'Medium', deadline: '2023-11-18', isCompleted: false }
]
},
{
id: 't3', title: 'Set up Backend', description: 'Choose database and set up API endpoints.', priority: 'Medium', deadline: '2023-11-25', isCompleted: false
},
{
id: 't4', title: 'Develop Frontend', description: 'Implement UI based on mockups.', priority: 'High', deadline: '2023-12-15', isCompleted: false
},
{
id: 't5', title: 'Testing', description: 'Perform unit, integration, and user testing.', priority: 'Medium', deadline: '2023-12-20', isCompleted: false
},
{
id: 't6', title: 'Deployment', description: 'Prepare for app store launch.', priority: 'Low', deadline: '2023-12-22', isCompleted: false
}
]
```
DEPLOYMENT NOTES:
- **Build Command:** `npm run build` or `yarn build` (using Vite).
- **Environment Variables:** Use `.env` files for future API keys or configurations (e.g., `VITE_API_ENDPOINT`). Ensure `NODE_ENV` is set correctly.
- **Performance Optimizations:** Vite provides built-in optimizations. Code splitting is handled automatically. Ensure efficient state updates in Zustand. Optimize image loading if any are added. Lazy load components if the app grows.
- **Hosting:** Can be deployed on static hosting platforms like Vercel, Netlify, or GitHub Pages.