Skip to content

SUBMISSION.md

Latest commit

 

History

History
143 lines (104 loc) · 8.1 KB

SUBMISSION.md

File metadata and controls

143 lines (104 loc) · 8.1 KB

Submission Summary

Track Chosen

  • Backend Only
  • Frontend Only
  • Full-Stack (Both)

GitHub Copilot Usage Summary

Throughout this project, GitHub Copilot was extensively used for:

  1. Initial Project Setup: Used Copilot to scaffold the Angular task management application with proper component structure, services, and routing configuration.

  2. Task Management Implementation: Leveraged Copilot to create CRUD operations, reactive forms with validation, error handling, and loading states. The AI helped implement clean architecture with smart/dumb component patterns.

  3. UI Enhancement: Used Copilot to design a reusable TaskCard component with a modern 4px spacing system, WCAG AA accessibility standards, and responsive design patterns.

  4. Advanced Features: Implemented drag-and-drop task reordering using Angular CDK and offline support with localStorage through Copilot's guidance on architectural patterns and best practices.

  5. API Model Separation: Used Copilot to architect a clean data transformation layer separating API contracts from frontend models, implementing priority and dueDate fields that don't exist in the backend.

  6. Documentation: Generated comprehensive architecture diagrams and documentation explaining the data flow, component relationships, and design decisions.

Key Prompts Used

  1. "Create a task management component, Build forms for creating/editing tasks, Create a service to handle API calls, Implement proper error handling, Add loading states, Display tasks in a user-friendly way"

  2. "Improve the Task Management feature's UI to display tasks in a more user-friendly, clean, and well-spaced layout while maintaining strong component reusability and separation of concerns"

  3. "Enhance the existing Task Management feature with two new capabilities: 1️⃣ Drag-and-Drop Task Reordering using Angular CDK, 2️⃣ Local Storage / Offline Support (Basic Version)"

  4. "The backend API does NOT support a priority field, but the frontend requires priority-based features. Design a clean solution to handle priority on the frontend without breaking architecture principles"

  5. "Create transformation layer with mapper functions to convert API Task to UI Task, implement metadata storage service for frontend-only fields, add high-priority validation logic"

Design Decisions (optional)

  • Decision 1: Separate ApiTask and Task interfaces with transformation layer

    • Reasoning: The backend doesn't support priority/dueDate fields, but frontend needs them. Created TaskMapper utility and TaskMetadataService to cleanly separate API contract from UI model, storing frontend-only data in localStorage while maintaining architecture integrity.

  • Decision 2: Smart/Dumb component pattern (TaskList + TaskCard)

    • Reasoning: TaskList handles state and business logic while TaskCard remains purely presentational with no service dependencies. This ensures reusability, easier testing, and clear separation of concerns.

  • Decision 3: Offline support with localStorage caching

    • Reasoning: Implemented automatic caching after successful API calls with fallback to cache when offline. Added online/offline detection using BehaviorSubject for reactive UI updates showing connection status.

  • Decision 4: Drag-and-drop restricted to "All Tasks" view

    • Reasoning: Reordering only makes sense when viewing all tasks together. Status-filtered views disable drag-drop to prevent confusing UX where order changes aren't visible.

  • Decision 5: High-priority validation with form-level validators

    • Reasoning: High-priority tasks must have a due date within 7 days. Implemented custom form validator that checks both fields together, providing immediate feedback to users about business rules.

Challenges Faced

  1. TypeScript Type Compatibility: Initially encountered type errors when status dropdown returned string instead of TaskStatus enum. Resolved by updating method signatures to accept union types (TaskStatus | string).

  2. Angular CDK Installation: The drag-and-drop feature required @angular/cdk which wasn't initially installed. Documented the dependency requirement and successfully installed it before testing.

  3. API/Frontend Model Separation: The biggest challenge was designing a clean architecture for priority/dueDate fields that don't exist in the backend. Solution involved:

    • Creating separate ApiTask and Task interfaces
    • TaskMapper utility for bidirectional transformation
    • TaskMetadataService for persisting frontend-only fields
    • Updating all service methods to handle the transformation layer

  4. Cache Synchronization: Ensuring localStorage cache stayed synchronized with API responses while handling offline scenarios. Implemented a strategy of caching after every successful operation and merging metadata on retrieval.

Total Time: ~4.5 hours

Optional Challenge

  • Not Attempted
  • Option 1: Request Logging Middleware
  • Option 2: API Pagination
  • Option 3: Advanced Validation
  • Option 4: Task Filtering & Search
  • Option 5: Form Validation & UX (High-priority validation)
  • Option 6: Drag-and-Drop Task Reordering
  • Option 7: Local Storage / Offline Support
  • Option 8: Real-time Updates
  • Option 9: Task Statistics Dashboard

Implemented Challenges:

  • Option 5: Added priority field with custom validation ensuring high-priority tasks have due dates within 7 days
  • Option 6: Full drag-and-drop reordering using Angular CDK with visual feedback and backend persistence
  • Option 7: Complete offline support with localStorage caching, online/offline indicator, and automatic fallback

Additional Notes

Architecture Highlights:

  • Clean separation between API contract and frontend models using transformation layer
  • TaskMetadataService stores frontend-only fields (priority, dueDate) separately from API cache
  • All components remain unaware of API limitations - transformation happens in service layer
  • Comprehensive error handling with user-friendly messages
  • Accessibility-first design with ARIA labels and semantic HTML
  • Responsive design with mobile/tablet/desktop breakpoints

Files Created:

  • task.model.ts: ApiTask and Task interfaces with TaskPriority enum
  • task.mapper.ts: Transformation utility for API ↔ UI conversion
  • task-metadata.service.ts: Storage service for frontend-only fields
  • task.service.ts: Enhanced with transformation layer and offline support
  • task-form.component.*: Updated with priority/dueDate fields and validation
  • task-card.component.*: Updated with priority badges and due date display
  • ARCHITECTURE_DIAGRAMS.md: Visual architecture documentation
  • ENHANCEMENTS_GUIDE.md & ENHANCEMENTS_QUICK_REF.md: Feature documentation

Technical Stack:

  • Angular 17 with TypeScript strict mode
  • Angular CDK for drag-and-drop
  • RxJS for reactive state management
  • json-server for mock API
  • localStorage for offline persistence

Production-Ready Features:

  • Type-safe throughout with interfaces and enums
  • Comprehensive error handling
  • Loading states for async operations
  • Online/offline detection and indicators
  • Form validation with custom validators
  • Accessibility compliance (WCAG AA)
  • Clean architecture with separation of concerns

Submission Checklist

  • Code pushed to public GitHub repository
  • All mandatory requirements completed
  • Code is tested and functional
  • README updated (if needed)
  • This SUBMISSION.md file completed
  • MS Teams recording completed and shared
  • GitHub repository URL provided to RM
  • MS Teams recording link provided to RM