# io8 Code Master Agent - Customized for This Project

## Project-Specific Instructions



---START_BREAKDOWN_CONTENT---
## Project Breakdown: To-Do App (2025-10-01 03:52:21)

This breakdown outlines the key phases, modules, and functionalities required to build the 'To-Do App', leveraging the existing Angular Clarity boilerplate and the proposed full-stack architecture.

### 1. Discovery & Design Phase
*   **Objective:** Define detailed functional and non-functional requirements, user stories, and high-level architecture.
*   **Milestones:**
    *   `Requirements Document`: Complete user stories for core To-Do features (Add, View, Edit, Delete, Mark Complete, Filter).
    *   `UI/UX Wireframes/Mockups`: Initial design for task list, task detail, and authentication screens, adhering to Clarity UI components.
    *   `API Specification`: Define RESTful endpoints for Task and User management.
    *   `Database Schema Design`: Initial schema for `users` and `tasks` tables/collections.

### 2. Backend Development Phase
*   **Objective:** Implement the server-side logic and database interactions for the To-Do App.
*   **Modules & Tasks:**
    *   **Core Backend Setup:**
        *   Initialize Node.js/Express (or chosen framework) project in `backend/`.
        *   Configure environment variables (`.env.example`).
        *   Set up basic server structure.
    *   **Database Integration:**
        *   Integrate chosen database (e.g., PostgreSQL, MongoDB) with the backend.
        *   Create `Task` and `User` models (`backend/src/models/`).
        *   Implement database connection and ORM/ODM setup.
    *   **User Management:**
        *   Develop `User` authentication (register, login) routes (`backend/src/routes/`).
        *   Implement authentication logic and token generation (`backend/src/services/`).
        *   Create `User` controller (`backend/src/controllers/`).
    *   **Task Management API:**
        *   Develop CRUD (Create, Read, Update, Delete) endpoints for `Task` (`backend/src/routes/`).
        *   Implement business logic for task operations (`backend/src/services/`).
        *   Create `Task` controller (`backend/src/controllers/`).
    *   **Error Handling & Validation:**
        *   Implement robust API error handling.
        *   Add input validation for user and task data.
    *   **Backend Testing:**
        *   Write unit tests for models, services, and controllers (`backend/tests/`).
        *   Implement integration tests for API endpoints.
*   **Milestones:**
    *   `Functional User Authentication API`
    *   `Functional Task Management API`
    *   `Database Schema Implemented and Seeded`
    *   `Basic Backend Test Coverage`

### 3. Frontend Development Phase
*   **Objective:** Build the user interface using Angular and integrate it with the backend API.
*   **Modules & Tasks:**
    *   **Core UI Setup:**
        *   Utilize existing Angular Clarity boilerplate in `frontend/src/app/`.
        *   Configure Angular routing (`app-routing.module.ts`) for authentication and task views.
    *   **Authentication Module:**
        *   Create Login and Register components (`frontend/src/app/pages/`).
        *   Implement authentication service to interact with backend API (`frontend/src/app/services/`).
        *   Develop authentication guards (`frontend/src/app/core/`) to protect routes.
    *   **Task Management Module:**
        *   Create `Task List` component (`frontend/src/app/components/`) to display tasks.
        *   Develop `Add/Edit Task` form component (`frontend/src/app/components/`).
        *   Implement `Task Service` to interact with backend task API (`frontend/src/app/services/`).
        *   Add filtering and sorting functionality for tasks.
    *   **Shared Components:**
        *   Create reusable UI elements (`frontend/src/app/shared/`) if not covered by Clarity.
    *   **Frontend Testing:**
        *   Write unit tests for Angular components and services (`frontend/tests/`).
        *   Implement end-to-end (E2E) tests for key user flows.
*   **Milestones:**
    *   `User Authentication UI Functional`
    *   `Task List Display and Basic CRUD Operations via UI`
    *   `Frontend Routing Implemented`
    *   `Basic Frontend Test Coverage`

### 4. Deployment & DevOps Phase
*   **Objective:** Prepare the application for deployment and set up CI/CD pipelines.
*   **Modules & Tasks:**
    *   **Containerization:**
        *   Create `Dockerfile.backend` for the backend service.
        *   Create `Dockerfile.frontend` for the Angular frontend service.
        *   Configure `docker-compose.yml` to orchestrate backend, frontend, and database.
    *   **Reverse Proxy (Optional but Recommended):**
        *   Configure `nginx.conf` for serving frontend static files and proxying API requests.
    *   **Deployment Configuration:**
        *   Update `deployment_config.yml` with target environment specifics.
    *   **CI/CD Setup:**
        *   Implement basic CI/CD pipeline (e.g., build, test, deploy to staging).
*   **Milestones:**
    *   `Application Containerized (Backend, Frontend, DB)`
    *   `Local Development with Docker Compose Fully Functional`
    *   `Basic CI/CD Pipeline Operational`

### 5. Testing & Refinement Phase
*   **Objective:** Ensure application quality, performance, and user experience.
*   **Modules & Tasks:**
    *   **Comprehensive Testing:**
        *   Conduct thorough unit, integration, and end-to-end testing.
        *   Perform user acceptance testing (UAT).
    *   **Bug Fixing & Iteration:**
        *   Address identified bugs and issues.
        *   Refine UI/UX based on feedback.
    *   **Performance Optimization:**
        *   Identify and resolve performance bottlenecks.
    *   **Security Audit (Basic):**
        *   Review authentication and data handling for common vulnerabilities.
*   **Milestones:**
    *   `All Critical Bugs Resolved`
    *   `User Acceptance Testing (UAT) Completed`
    *   `Performance Metrics Meet Basic Requirements`

### Constraints
*   **Time:** Fast-track development for MVP; iterative approach for advanced features.
*   **Resources:** Leverage existing Angular Clarity boilerplate; focus on open-source, easily deployable technologies.
*   **Scope:** Initial MVP focuses on single-user basic CRUD operations for tasks, without advanced features like collaboration or rich text editing.
*   **Platform:** Web-based application; responsive design for mobile is a consideration but not an initial hard requirement for MVP.
*   **Security:** Basic user authentication and data privacy; no advanced security features initially.
---END_BREAKDOWN_CONTENT---



---START_PLAN_CONTENT---
## Implementation Plan: To-Do App (2025-10-01 03:52:21)

This plan outlines the high-level timeline, technology stack, and resource allocation for the 'To-Do App' project, based on the approved project breakdown. The approach will be iterative, focusing on delivering a functional MVP first.

### 1. High-Level Timeline (Phased Approach)
*   **Phase 1: Discovery & Design (1 week)**
    *   Detailed requirements gathering.
    *   UI/UX wireframing and mockups.
    *   High-level architecture design.
    *   API specification & database schema draft.
*   **Phase 2: Backend Development (2-3 weeks)**
    *   Database setup and model implementation.
    *   User authentication & authorization API.
    *   Task management CRUD API.
    *   Unit and integration testing.
*   **Phase 3: Frontend Development (2-3 weeks)**
    *   Angular project setup (using boilerplate).
    *   Implement authentication UI components.
    *   Develop task listing and form components.
    *   Integrate with backend API.
    *   Unit and E2E testing.
*   **Phase 4: Deployment & DevOps (1 week)**
    *   Dockerization for frontend, backend, and database.
    *   `docker-compose` setup for local development and staging.
    *   Basic CI/CD pipeline configuration.
*   **Phase 5: Testing & Refinement (1 week)**
    *   Comprehensive testing (functional, integration, UAT).
    *   Bug fixing and minor UI/UX adjustments.
    *   Performance tuning.

### 2. Technology Stack
*   **Frontend:** Angular (based on `frontend/` boilerplate), Clarity Design System.
*   **Backend:** Node.js with Express.js (or similar lightweight framework).
*   **Database:** PostgreSQL (relational, robust, and widely supported) or MongoDB (NoSQL, flexible schema).
*   **Containerization:** Docker, Docker Compose.
*   **Deployment:** Nginx (for reverse proxy/static serving), generic cloud VM or container orchestration (e.g., Kubernetes for future scale).
*   **Version Control:** Git.
*   **Project Management:** Integrated io8 framework, using generated planning documents.

### 3. Key Resources & Roles
*   **io8codermaster:** Oversees the entire project workflow, ensures adherence to plan, and orchestrates agent interactions.
*   **io8analyst:** Drives requirements gathering, user story definition, and detailed functional specifications.
*   **io8architect:** Designs the system architecture, selects technologies, and defines technical standards for both frontend and backend.
*   **io8pm:** Manages the project timeline, resources, budget, and stakeholder communication.
*   **io8developer (Backend):** Implements backend services, API, and database interactions.
*   **io8developer (Frontend):** Develops UI components, integrates with backend API, and ensures responsive design.
*   **io8devops:** Sets up CI/CD, manages infrastructure, and ensures deployment automation.
*   **Quality Assurance (Implicit):** Testing throughout all phases, ensuring functional correctness and quality.

### 4. Communication & Reporting
*   **Daily Stand-ups:** Brief sync-ups (virtual) to discuss progress, blockers, and next steps.
*   **Weekly Review Meetings:** In-depth review of completed work, upcoming tasks, and any scope changes.
*   **Documentation:** All agent outputs (e.g., `.sureai/*.md` files) serve as living documentation, updated iteratively.
*   **io8codermaster:** Will act as the central communication point, consolidating information and updates.

### 5. Risk Management
*   **Scope Creep:** Enforce strict MVP definition; new features require formal approval and may shift timeline.
*   **Technical Debt:** Prioritize clean code and architectural adherence; allocate time for refactoring in later sprints.
*   **Resource Availability:** Clearly define roles and responsibilities; identify backup resources for critical paths.
*   **Performance Issues:** Implement monitoring early; conduct load testing before production deployment.
*   **Security Vulnerabilities:** Follow best practices for authentication/authorization; conduct basic security reviews.

### Next Steps for io8codermaster
1.  Initiate the `io8analyst` agent to begin detailed requirements gathering and user story creation based on this plan.
2.  Monitor progress against the breakdown and plan, making adjustments as necessary.
3.  Ensure continuous alignment with the `io8architect` for technical design decisions.
---END_PLAN_CONTENT---

## Base Agent Prompt Reference

This agent is based on the standard io8codermaster agent with project-specific customizations above.
Refer to the base io8codermaster agent prompt for general principles and workflow instructions.
