SCRUM-91: Build a Taskmanagement Site with html js and css

[muhil0304]

Ticket: SCRUM-91
Summary: Build a Taskmanagement Site with html js and css

Automated by workflow run. See the Files changed tab for the diff.

[muhil0304]

Security, Architecture & Code Quality Review: Kanban Task Management Site

PR Number: #5
Repository: muhil0304/TaskManagement
Branch: scrum-91-taskmanagement
Reviewer: Jordan, Principal System Architect (Cloud-Native & Security-First Design)

---

Summary

Thank you for the contribution! This PR builds a clean, modern, and well-structured Kanban task management application using HTML, CSS, and JS. The code is highly readable, and the inclusion of a quick-move dropdown for mobile accessibility is a thoughtful touch.

However, from an architectural and security standpoint, the application is currently a local-only prototype. To transition this into a production-grade, secure, and scalable SaaS application, we must address several critical security vulnerabilities (such as supply chain risks and DOM-based XSS), application stability risks (such as unhandled exceptions in storage parsing), and establish a path toward a cloud-native, zero-trust architecture.

---

🚨 Required Changes

1. Stability & Correctness (JavaScript)

• Safe LocalStorage Parsing: If localStorage gets corrupted or contains invalid JSON, JSON.parse at the top level of app.js will throw an unhandled exception and crash the entire application. Wrap this in a try/catch block with a fallback to [].

  let tasks = [];
  try {
      const storedTasks = localStorage.getItem('kanban-tasks');
      tasks = storedTasks ? JSON.parse(storedTasks) : [];
  } catch (error) {
      console.error("Failed to parse tasks from localStorage. Resetting state to empty.", error);
      tasks = [];
      localStorage.setItem('kanban-tasks', JSON.stringify([]));
  }

• Drag-and-Drop Validation: In handleDrop, validate newStatus against allowed columns (todo, inprogress, done) before updating. If the data-status attribute is missing or misspelled in the HTML, tasks could disappear from the UI.

  const VALID_STATUSES = ['todo', 'inprogress', 'done'];
  function handleDrop(taskId, newStatus) {
      if (!VALID_STATUSES.includes(newStatus)) {
          console.error(`Security/Integrity Warning: Invalid status transition attempted: ${newStatus}`);
          return;
      }
      // ... update task status
  }

2. Security

• Subresource Integrity (SRI): The Font Awesome CDN link in index.html is loaded without an integrity or crossorigin attribute. Please add SRI hashes to protect the application from potential CDN supply-chain compromises.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 
        crossorigin="anonymous" referrerpolicy="no-referrer" />

• DOM-Based XSS Prevention: Ensure you use textContent when setting user-supplied text, or use a safe HTML escaping utility to prevent malicious payloads (e.g., <img src=x onerror=alert(document.cookie)>) from executing.

  function escapeHTML(str) {
      if (!str) return '';
      return str.replace(/[&<>'"]/g, 
          tag => ({
              '&': '&amp;',
              '<': '&lt;',
              '>': '&gt;',
              "'": '&#39;',
              '"': '&quot;'
          }[tag] || tag)
      );
  }

3. Accessibility (a11y)

• Missing Accessible Labels: Visually impaired users using screen readers will struggle to navigate the interactive controls. Please add aria-label attributes to:
  • The search input (#search-input)
  • The priority filter dropdown (#priority-filter)
  • The close modal button (#close-modal-btn)

4. User Experience & CSS

• Text Selection: The .task-card has user-select: none; applied. This prevents users from copying task titles or descriptions, which is frustrating and hurts accessibility. Please remove this restriction.
• Mobile Column Layout: Stacking Kanban columns vertically on screens <= 1024px makes drag-and-drop interactions extremely difficult due to the long vertical scroll distances. Consider keeping a horizontal layout with overflow-x: auto on the board container.

---

⚠️ Warnings & Suggestions

• Performance (DOM Reconstruction): Currently, renderTasks clears and rebuilds the entire DOM for all columns on every single state change. While fine for a few tasks, this will cause layout thrashing and loss of focus as the board grows. Consider updating only the affected DOM nodes directly.
• Performance (CSS Transitions): Avoid using transition: all 0.2s ease;. Transitioning all forces layout recalculations. Specify only the properties that change (e.g., background-color, transform, box-shadow).
• ID Generation: Using Date.now() for task IDs can occasionally cause duplicates if tasks are created in rapid succession. Consider using crypto.randomUUID() for robust unique identifiers.
• Formatting: Add a trailing newline to the end of style.css and index.html to comply with POSIX standards.

---

🌟 What Looks Good

• Excellent use of CSS custom properties for clean, maintainable styling.
• The mobile quick-move dropdown is a fantastic alternative to drag-and-drop on touch devices.
• Highly readable and modular JavaScript code structure.

---

🚀 Target Cloud-Native Zero-Trust Architecture (The Path to Production)

To scale this application to support multiple users, secure data persistence, and high availability, we must transition to a cloud-native, zero-trust architecture.

graph TB
    subgraph Client Side
        User[User Browser] -->|HTTPS / TLS 1.3| CF[Amazon CloudFront CDN]
    end

    subgraph Edge & Frontend Hosting
        CF -->|Serves Static Assets| S3[Amazon S3 Bucket]
        CF -->|Security Headers: CSP, HSTS, CORS| User
    end

    subgraph Identity & Access Management
        Cognito[Amazon Cognito User Pool] <-->|OAuth 2.0 / OIDC PKCE| User
    end

    subgraph API Gateway & Compute
        User -->|API Requests with JWT| APIGW[Amazon API Gateway]
        APIGW -->|Authorizes via JWT| Cognito
        APIGW -->|Triggers| Lambda[AWS Lambda - Node.js/TS]
    end

    subgraph Database & Storage
        Lambda -->|IAM Auth / KMS Encryption| DynamoDB[(Amazon DynamoDB)]
    end

    subgraph Observability & Security
        Lambda -->|Structured JSON Logs| CW[Amazon CloudWatch]
        Lambda -->|Distributed Tracing| XRay[AWS X-Ray]
        KMS[AWS KMS] -->|Manages Keys| DynamoDB
    end

    style Client Side fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
    style Edge & Frontend Hosting fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
    style API Gateway & Compute fill:#fff3e0,stroke:#ef6c00,stroke-width:2px
    style Database & Storage fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px

Loading

Architectural Recommendations:

1. Frontend Hosting & CDN (S3 + CloudFront): Host static assets in S3 and serve them via CloudFront with Origin Access Control (OAC) and secure headers (CSP, HSTS, X-Frame-Options).
2. Identity & Access Management (Cognito): Authenticate users using OAuth 2.0 with Authorization Code Flow + PKCE.
3. API Gateway & Serverless Compute (Lambda): Validate Cognito JWTs at API Gateway and run Lambda functions with the Principle of Least Privilege.
4. Database (DynamoDB Single-Table Design): Store tasks securely with KMS encryption at rest.

---

Recommendation

Please address the stability, security, and accessibility issues outlined above. Once these are resolved, this will be an excellent addition to the codebase! Let me know if you have any questions or need help implementing these changes.