PROJECT OVERVIEW:
The user problem identified from Hacker News revolves around the need to 'Schedule tasks on the web'. Users are looking for ways to automate recurring work, such as code reviews, analysis of failures, documentation syncing, and dependency audits, without necessarily keeping their computers on or writing complex scripts. This SaaS application, 'Görev Otomasyon Platformu' (Task Automation Platform), aims to provide an intuitive, web-based interface for scheduling and managing these automated tasks. The core value proposition is to democratize task automation, making it accessible to users with varying technical skills by abstracting away the complexities of infrastructure management and recurring job scheduling. It enables users to "keep working even when your computer is off" by leveraging Anthropic-managed infrastructure, similar to the inspiration from Claude Code.
TECH STACK:
- Frontend: React.js (using Vite for fast development)
- Styling: Tailwind CSS for rapid UI development and consistent design.
- State Management: Zustand for efficient global state management.
- Routing: React Router DOM for client-side navigation.
- UI Components: Headless UI for accessible and customizable components (Modals, Dropdowns, etc.).
- Icons: Heroicons.
- Fetching: Axios for HTTP requests.
- Form Handling: React Hook Form with Zod for validation.
- Date/Time Handling: date-fns.
CORE FEATURES:
1. **Task Creation:**
* **User Flow:** User navigates to the 'Create Task' page. They are presented with a form. Fields include:
* 'Task Name' (string, required)
* 'Description' (textarea, optional)
* 'Trigger Type' (select: 'Scheduled', 'Webhook')
* If 'Scheduled':
* 'Frequency' (select: 'Daily', 'Weekly', 'Monthly', 'Custom')
* If 'Custom': Date/Time picker inputs for specific execution times.
* 'Timezone' selector.
* If 'Webhook':
* 'Webhook URL' (input, required, validation for URL format).
* 'Action Type' (select: 'Run Prompt', 'Run Script - Basic', 'External API Call')
* If 'Run Prompt':
* 'Prompt Content' (textarea, required, supports basic markdown).
* 'Model Selection' (select: 'Claude-3-Opus', 'Claude-3-Sonnet', 'Claude-3-Haiku' - *mocked initially*).
* 'Save Task' button.
* **Details:** This is the primary entry point for automation. The interface must be clear about the options and their implications.
2. **Task Management Dashboard:**
* **User Flow:** User lands on the dashboard after login. A table/list displays all created tasks. Columns include: Task Name, Last Run Status, Next Run Time, Frequency, Actions.
* **Actions:** Each task row has buttons/icons for 'View Runs', 'Edit Task', 'Pause/Resume Task', 'Delete Task'.
* **Details:** Provides an overview of all automated tasks, their current status, and upcoming schedules. Allows for quick management actions.
3. **Run History & Logs:**
* **User Flow:** From the dashboard, clicking 'View Runs' for a task navigates to a detailed history page. This page lists all past executions (timestamp, status: success/failed/running, duration). Clicking on a specific run shows detailed logs (input prompt, output, errors, etc.).
* **Details:** Essential for debugging and monitoring. Users need to see if their tasks are running correctly and what the output was.
4. **Webhook Configuration (Basic):**
* **User Flow:** When creating or editing a task, selecting 'Webhook' as the trigger type enables the 'Webhook URL' input. Upon saving, the system provides a unique webhook URL for the user to configure in external services (e.g., GitHub, GitLab).
* **Details:** Allows tasks to be triggered by external events, expanding automation possibilities beyond simple scheduling.
5. **Prompt Execution (Simulated/Mocked):**
* **User Flow:** When a scheduled or webhook-triggered task is set to 'Run Prompt', the system conceptually sends the prompt content with the selected model to an (initially mocked) API endpoint. The result is captured and stored.
* **Details:** This is the core automation action. For MVP, the actual execution can be simulated, focusing on the UI/UX and workflow integration. The output/result needs to be displayed in the Run History.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) structure. A persistent sidebar navigation for 'Dashboard', 'Create Task', 'Run History', 'Settings'. Main content area displays the relevant page.
- **Color Palette:** Primary: Deep Blue (#1e3a8a), Secondary: Teal (#14b8a6), Accent: Orange (#f97316) for CTAs. Background: Off-white (#f8fafc), Text: Dark Gray (#334155). Use Tailwind CSS's default color palette as a base and customize.
- **Typography:** Modern sans-serif font like Inter or Inter UI. Clear hierarchy using font weights and sizes. Headings (h1, h2, h3), body text, labels.
- **Component Styling:** Clean, minimalist aesthetic using Tailwind CSS. Focus on usability and clarity. Use subtle shadows and rounded corners. Interactive elements should have clear hover and focus states.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Ensure usability on all device sizes.
- **Dark Mode:** Consider adding a dark mode toggle using `next-themes` or similar, respecting user preferences.
COMPONENT BREAKDOWN:
- **`Layout.jsx`**: Main layout component. Contains sidebar, header, and main content area. Manages responsive sidebar toggling.
* Props: `children` (the page content).
- **`Sidebar.jsx`**: Navigation menu component.
* Props: `isOpen` (boolean), `onClose` (function).
- **`Header.jsx`**: Top bar with app logo, user profile/menu.
- **`TaskDashboard.jsx`**: Displays the list of tasks.
* State: `tasks` (array), `loading` (boolean), `error` (string).
* Components Used: `TaskList.jsx`, `TaskListItem.jsx`, `Button.jsx`, `Spinner.jsx`.
- **`TaskList.jsx`**: Renders the `TaskListItem` components in a table or list format.
* Props: `tasks` (array).
- **`TaskListItem.jsx`**: Represents a single task row in the dashboard.
* Props: `task` (object), `onEdit` (function), `onViewRuns` (function), `onPauseResume` (function), `onDelete` (function).
- **`CreateEditTaskForm.jsx`**: Form for creating or editing tasks.
* State: Form input values, validation errors.
* Props: `initialData` (object, optional), `onSubmit` (function).
* Components Used: `Input.jsx`, `Textarea.jsx`, `Select.jsx`, `DateTimePicker.jsx`, `Button.jsx`, `FormLabel.jsx`, `FormErrorMessage.jsx`.
- **`RunHistory.jsx`**: Displays the execution history for a selected task.
* State: `runs` (array), `loading` (boolean).
* Props: `taskId` (string).
* Components Used: `RunListItem.jsx`, `LogViewer.jsx` (modal or separate view).
- **`RunListItem.jsx`**: Represents a single run in the history list.
* Props: `run` (object), `onClick` (function).
- **`LogViewer.jsx`**: Displays detailed logs for a specific run.
* Props: `logs` (string/object).
* Components Used: `Modal.jsx`.
- **`Button.jsx`**: Reusable button component.
* Props: `onClick`, `children`, `variant`, `isLoading`, `disabled`.
- **`Input.jsx`**: Reusable text input.
* Props: `value`, `onChange`, `label`, `error`, `type`.
- **`Select.jsx`**: Reusable select dropdown.
* Props: `options`, `value`, `onChange`, `label`.
DATA MODEL:
- **`Task` Object:**
```json
{
"id": "uuid_string",
"name": "string",
"description": "string",
"triggerType": "Scheduled" | "Webhook",
"schedule": {
"frequency": "Daily" | "Weekly" | "Monthly" | "Custom",
"cronExpression": "string" // e.g., '0 9 * * 1-5' for Mon-Fri 9 AM
"specificTime": "ISO_DateTime_String" // For Custom
"timezone": "string" // e.g., 'America/New_York'
},
"action": {
"type": "Run Prompt" | "Run Script" | "External API Call",
"promptContent": "string", // If type is 'Run Prompt'
"model": "string", // e.g., 'claude-3-sonnet-20240229'
"scriptPath": "string", // If type is 'Run Script'
"apiUrl": "string", // If type is 'External API Call'
"apiMethod": "GET" | "POST" | ...
},
"webhookUrl": "string", // If triggerType is 'Webhook'
"createdAt": "ISO_DateTime_String",
"updatedAt": "ISO_DateTime_String",
"isActive": true | false
}
```
- **`Run` Object:**
```json
{
"id": "uuid_string",
"taskId": "uuid_string",
"startTime": "ISO_DateTime_String",
"endTime": "ISO_DateTime_String",
"status": "Success" | "Failed" | "Running" | "Cancelled",
"output": "string", // Summary or actual output
"logs": "string", // Detailed execution logs
"durationMs": number
}
```
- **State Management (Zustand):**
* `useTaskStore`: (`tasks: Task[]`, `runs: Run[]`, `fetchTasks`, `createTask`, `updateTask`, `deleteTask`, `fetchRunsForTask`)
* `useAuthStore`: (`user`, `login`, `logout`)
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on buttons and interactive list items.
- **Transitions:** Smooth fade-in/out for modals and dropdowns. Smooth transitions between page routes (e.g., using `Framer Motion`).
- **Loading States:** Use `Spinner` components or skeleton loaders while fetching data. Button `isLoading` states.
- **Micro-interactions:** Visual feedback on form submission (e.g., success message animation), input validation feedback.
- **Layout Animations:** Smooth sidebar collapse/expand.
EDGE CASES:
- **Empty States:** Display user-friendly messages and graphics when there are no tasks, no runs, or no search results (e.g., "You haven't created any tasks yet. Get started!").
- **Error Handling:** Gracefully handle API errors (network issues, server errors). Display informative error messages to the user. Implement retry mechanisms where appropriate.
- **Validation:** Use `react-hook-form` and `zod` for robust client-side and server-side (if applicable) validation of all form inputs (e.g., valid URLs, required fields, date formats).
- **Accessibility (a11y):** Use semantic HTML. Ensure proper ARIA attributes for dynamic components (modals, menus). Keyboard navigability for all interactive elements. Sufficient color contrast.
- **Timezones:** Clearly indicate and handle user's selected timezone for scheduling. Ensure backend processing respects the chosen timezone.
- **Long Prompts/Outputs:** Handle potentially large text content in prompts and logs gracefully (e.g., using scrollable areas, truncation with 'read more' options).
SAMPLE DATA:
1. **Task 1 (Scheduled - Daily Report):**
```json
{
"id": "task-001",
"name": "Daily Sales Report",
"description": "Generate a summary of daily sales figures.",
"triggerType": "Scheduled",
"schedule": {
"frequency": "Daily",
"cronExpression": "0 8 * * *",
"timezone": "America/Los_Angeles"
},
"action": {
"type": "Run Prompt",
"promptContent": "Summarize the sales data provided in the last 24 hours.",
"model": "claude-3-sonnet-20240229"
},
"createdAt": "2024-05-10T10:00:00Z",
"updatedAt": "2024-05-10T10:00:00Z",
"isActive": true
}
```
2. **Task 2 (Webhook - PR Merge Sync):**
```json
{
"id": "task-002",
"name": "Sync Docs on Merge",
"description": "Update documentation when a PR is merged.",
"triggerType": "Webhook",
"webhookUrl": "https://api.yourapp.com/webhooks/task-002/xyzabc",
"action": {
"type": "Run Script",
"scriptPath": "/scripts/sync_docs.sh"
},
"createdAt": "2024-05-11T11:30:00Z",
"updatedAt": "2024-05-11T11:30:00Z",
"isActive": true
}
```
3. **Task 3 (Scheduled - Weekly Audit):**
```json
{
"id": "task-003",
"name": "Weekly Dependency Audit",
"description": "Run a security audit on project dependencies.",
"triggerType": "Scheduled",
"schedule": {
"frequency": "Weekly",
"cronExpression": "0 2 * * 0", // Sunday 2 AM
"timezone": "UTC"
},
"action": {
"type": "External API Call",
"apiUrl": "https://api.securityscanner.com/audit",
"apiMethod": "POST",
"payload": {"projectId": "proj-123"} // Example payload structure
},
"createdAt": "2024-05-12T09:00:00Z",
"updatedAt": "2024-05-12T09:00:00Z",
"isActive": false // Paused
}
```
4. **Task 4 (Custom Schedule - Monthly Billing):**
```json
{
"id": "task-004",
"name": "Generate Monthly Invoice",
"description": "Trigger invoice generation process.",
"triggerType": "Scheduled",
"schedule": {
"frequency": "Custom",
"cronExpression": "0 1 1 * *", // 1st of month at 1 AM
"specificTime": "2024-06-01T01:00:00Z",
"timezone": "Europe/London"
},
"action": {
"type": "Run Prompt",
"promptContent": "Prepare the monthly invoice based on user activity logs for May 2024.",
"model": "claude-3-opus-20240229"
},
"createdAt": "2024-05-13T14:00:00Z",
"updatedAt": "2024-05-13T14:00:00Z",
"isActive": true
}
```
5. **Run 1 (Success):**
```json
{
"id": "run-a1b2c3d4",
"taskId": "task-001",
"startTime": "2024-05-15T08:00:00Z",
"endTime": "2024-05-15T08:00:35Z",
"status": "Success",
"output": "Total sales for May 14th: $15,432. Key products: Product A, Product C.",
"logs": "[INFO] Task started.\n[INFO] Prompt sent to model: 'Summarize sales...'.\n[INFO] Model response received.\n[INFO] Output parsed successfully.\n[INFO] Task completed.",
"durationMs": 35000
}
```
6. **Run 2 (Failed):**
```json
{
"id": "run-e5f6g7h8",
"taskId": "task-002",
"startTime": "2024-05-15T09:15:00Z",
"endTime": "2024-05-15T09:15:10Z",
"status": "Failed",
"output": null,
"logs": "[INFO] Task triggered by webhook.\n[ERROR] Script execution failed: exit code 1.\n[ERROR] File not found: /scripts/sync_docs.sh.",
"durationMs": 10000
}
```
DEPLOYMENT NOTES:
- **Build Tool:** Vite (`npm run build`).
- **Environment Variables:** Use `.env` files (e.g., `.env.local`, `.env.development`, `.env.production`). Key variables: `VITE_API_BASE_URL` (for backend API), `VITE_AUTH_PROVIDER` (e.g., 'mock', 'cognito').
- **Hosting:** Deploy the static build to platforms like Vercel, Netlify, AWS S3/CloudFront.
- **Backend:** This prompt focuses on the frontend. A separate backend service would be needed to handle actual task execution, scheduling, and API calls. The frontend would interact with this backend API. For MVP, backend logic can be simulated or use a mock API.
- **Performance:** Code splitting with React.lazy and Suspense. Optimize image loading. Minimize bundle size. Memoization for components and data fetching.
- **CI/CD:** Set up automated builds and deployments using GitHub Actions, GitLab CI, or similar.