# io8 Code Master Agent - Customized for This Project

## Project-Specific Instructions


### Project Breakdown: Weather App (io8codermaster)

**Date:** 2025-09-26 09:44:40

**Project Goal:** Develop a functional, user-friendly weather application leveraging an existing Angular Clarity boilerplate, capable of displaying current weather conditions and multi-day forecasts for user-specified locations.

**Key Modules & Components:**

1.  **External Weather API Integration (Backend Focus):**
    *   Identify, select, and integrate with a reliable third-party weather data provider (e.g., OpenWeatherMap, WeatherAPI.com).
    *   Handle API key management and secure access.
    *   Implement data fetching, parsing, and basic error handling for API responses.

2.  **Backend Service (Data Proxy & Business Logic):**
    *   Create a dedicated backend service (`backend/` directory) to act as a proxy between the frontend and external weather APIs.
    *   Develop API endpoints for:
        *   Fetching current weather data by location (city name, coordinates).
        *   Fetching multi-day weather forecasts by location.
    *   Implement optional caching strategies to optimize API calls and performance.
    *   Ensure data consistency and transformation for frontend consumption.

3.  **Frontend User Interface (Angular Clarity Boilerplate - `src/app/`):**
    *   **Core Display Components:**
        *   `WeatherCardComponent` (in `src/app/shared/`): Displays current weather details (temperature, conditions, humidity, wind speed) for a selected location.
        *   `ForecastListComponent` (in `src/app/shared/`): Presents a list of daily or hourly forecasts.
    *   **User Interaction Components:**
        *   `SearchBarComponent` (in `src/app/shared/`): Allows users to input city names or utilize geolocation to search for weather.
        *   Location selector/management.
    *   **Main Application Pages/Views:**
        *   `HomePageComponent` (in `src/app/` or new feature module): Orchestrates the weather display and search functionality.
    *   **Styling & Theming:** Apply Clarity design system for a consistent look and feel.

4.  **Data Flow & State Management:**
    *   Define clear communication patterns between frontend and backend.
    *   Determine state management strategy within Angular for weather data.

5.  **Deployment & Infrastructure (io8DevOps Focus):**
    *   Containerize both frontend and backend services using Docker (`Dockerfile.frontend`, `Dockerfile.backend`).
    *   Orchestrate multi-container setup using Docker Compose (`docker-compose.yml`).
    *   Define deployment configurations (`deployment_config.yml`) for target environments (e.g., production, staging).

**Milestones:**

*   **M1: Core Current Weather Display (MVP):** Successfully fetch and display current weather for a hardcoded location on the frontend, integrating with the backend proxy.
*   **M2: Location Search & Dynamic Current Weather:** Implement user input for location search and dynamically update current weather display. Integrate geolocation option.
*   **M3: Multi-Day Forecast Display:** Extend the backend to fetch forecast data and implement frontend components to display this information.
*   **M4: UI Refinements & Error Handling:** Enhance user experience, add loading indicators, implement robust error handling for API failures and invalid inputs.
*   **M5: Containerization & Local Orchestration:** Backend and frontend services are containerized and runnable via Docker Compose locally.
*   **M6: Deployment Readiness:** All necessary configurations and scripts are in place for cloud deployment.

**Key Constraints & Considerations:**

*   **Base Project Adherence:** Strictly adhere to the append-only and preserve-existing-content rules for the `.sureai` directory and overall base project structure.
*   **Existing Framework:** Frontend development must utilize the existing Angular Clarity boilerplate.
*   **API Limits:** Be mindful of external weather API rate limits and consider caching strategies.
*   **Security:** API keys and sensitive information must be handled securely (e.g., environment variables, backend proxy).
*   **Performance:** Optimize data fetching and frontend rendering for a responsive user experience.
*   **Scalability:** Design for potential future scaling of backend services.
*   **Unit & Integration Testing:** Implement tests for both frontend and backend components to ensure reliability.
*   **Documentation:** Maintain updated documentation within the `.sureai/` directory as per io8 workflow.

---



### Implementation Plan: Weather App (io8codermaster)

**Date:** 2025-09-26 09:44:40

This plan outlines the sequence of operations and agent engagement for developing the 'Weather App', building upon the existing Angular Clarity boilerplate. The plan emphasizes iterative development and adheres to the `io8coder` workflow principles.

**Phase 1: Requirements Analysis & High-Level Architecture (io8Analyst & io8Architect Lead)**
*   **Duration:** 1-2 weeks
*   **Objective:** Define detailed functional and non-functional requirements, select primary external weather API, and design the high-level system architecture.
*   **Tasks:**
    1.  **io8Analyst:**
        *   Conduct thorough requirement gathering for current weather, N-day forecast, location search (city name, geolocation), unit conversion (C/F).
        *   Document detailed user stories and acceptance criteria in `requirements_document.md` and `analysis_document.md`.
        *   Identify core data points to be displayed (temperature, humidity, wind, conditions).
    2.  **io8Architect:**
        *   Research and select the most suitable external weather API(s) based on features, reliability, cost, and rate limits. Document choice in `tech_stack_document.md`.
        *   Design the overall system architecture, including data flow between frontend, backend proxy, and external API.
        *   Outline backend API endpoints and data models. Create a preliminary `architecture_document.md`.
        *   Propose frontend component structure within the existing Angular Clarity framework.

**Phase 2: Backend Core Development & API Integration (io8Developer Lead)**
*   **Duration:** 2-3 weeks
*   **Objective:** Implement the backend service to securely fetch and serve weather data from the chosen external API.
*   **Tasks:**
    1.  **io8Developer:**
        *   Set up the `backend/` project structure as defined in `.directory_structure.md` (e.g., Python/Node.js project).
        *   Implement secure handling of external weather API keys (e.g., environment variables).
        *   Develop backend endpoints for `GET /api/current-weather?location={city}` and `GET /api/forecast?location={city}`.
        *   Integrate with the selected external weather API to fetch raw data.
        *   Implement data transformation and sanitization logic to provide a clean API for the frontend.
        *   Add unit tests for backend logic and API integration.
        *   Document backend API specifications (e.g., in a section of `architecture_document.md` or `developer_*.md`).

**Phase 3: Frontend Development & UI Integration (io8Developer Lead)**
*   **Duration:** 3-4 weeks
*   **Objective:** Build the user interface using Angular Clarity to display weather information and handle user interactions.
*   **Tasks:**
    1.  **io8Developer:**
        *   Create Angular components for `SearchBarComponent`, `WeatherCardComponent`, and `ForecastListComponent` within `src/app/shared/` or feature modules.
        *   Develop `HomePageComponent` to orchestrate these components and integrate with the backend service.
        *   Implement client-side logic for making HTTP requests to the `backend/` API.
        *   Design and apply styles consistent with Angular Clarity, possibly extending `styles.scss` or component-specific `.scss` files.
        *   Implement features for location search and display updates.
        *   Add loading states, error messages, and basic input validation to enhance UX.
        *   Implement unit tests for frontend components.
        *   Document component usage and structure (e.g., in `developer_*.md`).

**Phase 4: DevOps, Containerization & Deployment Preparation (io8DevOps Lead)**
*   **Duration:** 1-2 weeks
*   **Objective:** Prepare the application for deployment by containerizing services and defining deployment configurations.
*   **Tasks:**
    1.  **io8DevOps:**
        *   Create `Dockerfile.backend` to containerize the backend service.
        *   Create `Dockerfile.frontend` to containerize the Angular application (e.g., build and serve with Nginx).
        *   Develop `docker-compose.yml` to define and orchestrate both backend and frontend services for local development and testing.
        *   Configure `deployment_config.yml` with environment-specific variables and deployment parameters for a target cloud platform.
        *   Document local setup and deployment procedures (e.g., in `devops_*.md`).

**Cross-Cutting Activities (io8PM & io8ScrumMaster throughout all phases):**

*   **io8PM:** Oversee overall project health, manage risks (e.g., API rate limits, external API changes), ensure alignment with `prd_document.md` (populated by PM).
*   **io8ScrumMaster:** Facilitate agile ceremonies, manage `tasks_list.md` and `sprint_plan.md`, remove impediments, and ensure effective team collaboration.
*   **Documentation:** Ensure all agent-specific output files (`.analyst_*.md`, `.architect_*.md`, etc.) and visible documents (`analysis_document.md`, `architecture_document.md`, etc.) are updated and maintained.
*   **Testing:** Continuous testing throughout development; unit, integration, and potentially end-to-end tests.

---


## 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.
