suhail
spoecs
9eafd9f
metadata
description: Task list for Task CRUD Operations feature implementation

Tasks: Task CRUD Operations

Input: Design documents from /specs/001-task-crud/ Prerequisites: plan.md (required), spec.md (required for user stories), data-model.md, contracts/

Tests: Not requested in specification - implementation only

Organization: Tasks are grouped by user story to enable independent implementation and testing of each story.

Format: [ID] [P?] [Story] Description

  • [P]: Can run in parallel (different files, no dependencies)
  • [Story]: Which user story this task belongs to (e.g., US1, US2, US3, US4)
  • Include exact file paths in descriptions

Path Conventions

  • Backend: backend/src/ for source code, backend/tests/ for tests
  • Frontend: frontend/src/ for source code
  • Paths shown below follow monorepo structure from plan.md

Phase 1: Setup (Shared Infrastructure)

Purpose: Project initialization and basic structure

  • T001 Create backend directory structure with src/, tests/, alembic/ folders
  • T002 Create frontend directory structure with src/app/, src/components/, src/lib/ folders
  • T003 [P] Initialize Python project with requirements.txt (FastAPI, SQLModel, Pydantic, uvicorn, alembic, psycopg2-binary, python-dotenv)
  • T004 [P] Initialize Node.js project with package.json (Next.js 16+, React 18+, TypeScript, Tailwind CSS)
  • T005 [P] Configure Tailwind CSS in frontend/tailwind.config.ts and frontend/src/styles/globals.css
  • T006 [P] Create backend/.env.example with DATABASE_URL, APP_NAME, DEBUG, CORS_ORIGINS placeholders
  • T007 [P] Create frontend/.env.local.example with NEXT_PUBLIC_API_URL placeholder

Phase 2: Foundational (Blocking Prerequisites)

Purpose: Core infrastructure that MUST be complete before ANY user story can be implemented

⚠️ CRITICAL: No user story work can begin until this phase is complete

  • T008 Create database configuration in backend/src/core/config.py with Settings class
  • T009 Create database connection setup in backend/src/core/database.py with engine and session
  • T010 [P] Create User model stub in backend/src/models/user.py (id, email, name, timestamps)
  • T011 [P] Create Task model in backend/src/models/task.py (id, user_id, title, description, completed, timestamps)
  • T012 Initialize Alembic in backend/alembic/ and configure env.py with SQLModel metadata
  • T013 Generate initial migration for users and tasks tables with indexes
  • T014 Create FastAPI application entry point in backend/src/main.py with CORS middleware
  • T015 [P] Create API dependencies in backend/src/api/deps.py (get_db session, get_current_user stub)
  • T016 [P] Create TypeScript types in frontend/src/lib/types.ts (Task, TaskCreate, TaskUpdate interfaces)
  • T017 [P] Create API client base in frontend/src/lib/api.ts with fetch wrapper and error handling

Checkpoint: Foundation ready - user story implementation can now begin in parallel


Phase 3: User Story 1 - View and Create Tasks (Priority: P1) 🎯 MVP

Goal: Users can view their task list and create new tasks

Independent Test: Log in, view empty task list, create task with title, see it appear in list

Implementation for User Story 1

  • T018 [P] [US1] Create TaskCreate Pydantic schema in backend/src/schemas/task.py
  • T019 [P] [US1] Create TaskResponse Pydantic schema in backend/src/schemas/task.py
  • T020 [P] [US1] Create TaskListResponse Pydantic schema in backend/src/schemas/task.py
  • T021 [US1] Create TaskService with get_tasks() and create_task() methods in backend/src/services/task_service.py
  • T022 [US1] Implement GET /api/tasks endpoint in backend/src/api/routes/tasks.py
  • T023 [US1] Implement POST /api/tasks endpoint in backend/src/api/routes/tasks.py
  • T024 [US1] Register task routes in backend/src/main.py
  • T025 [P] [US1] Create TaskList server component in frontend/src/components/tasks/TaskList.tsx
  • T026 [P] [US1] Create TaskForm client component in frontend/src/components/tasks/TaskForm.tsx
  • T027 [P] [US1] Create TaskItem client component in frontend/src/components/tasks/TaskItem.tsx
  • T028 [US1] Implement getTasks() API function in frontend/src/lib/api.ts
  • T029 [US1] Implement createTask() API function in frontend/src/lib/api.ts
  • T030 [US1] Create home page in frontend/src/app/page.tsx integrating TaskList and TaskForm

Checkpoint: At this point, User Story 1 should be fully functional and testable independently


Phase 4: User Story 2 - Update and Complete Tasks (Priority: P2)

Goal: Users can edit tasks and mark them as complete

Independent Test: Create task (from P1), edit title/description, toggle completion status

Implementation for User Story 2

  • T031 [P] [US2] Create TaskUpdate Pydantic schema in backend/src/schemas/task.py
  • T032 [P] [US2] Create TaskPatch Pydantic schema in backend/src/schemas/task.py
  • T033 [US2] Add get_task(), update_task(), and patch_task() methods to TaskService in backend/src/services/task_service.py
  • T034 [US2] Implement GET /api/tasks/{task_id} endpoint in backend/src/api/routes/tasks.py
  • T035 [US2] Implement PUT /api/tasks/{task_id} endpoint in backend/src/api/routes/tasks.py
  • T036 [US2] Implement PATCH /api/tasks/{task_id} endpoint in backend/src/api/routes/tasks.py
  • T037 [US2] Add edit mode state and handlers to TaskItem component in frontend/src/components/tasks/TaskItem.tsx
  • T038 [US2] Add completion toggle handler to TaskItem component in frontend/src/components/tasks/TaskItem.tsx
  • T039 [US2] Implement updateTask() API function in frontend/src/lib/api.ts
  • T040 [US2] Implement patchTask() API function in frontend/src/lib/api.ts

Checkpoint: At this point, User Stories 1 AND 2 should both work independently


Phase 5: User Story 3 - Delete Tasks (Priority: P3)

Goal: Users can delete tasks they no longer need

Independent Test: Create task (from P1), delete it, verify it no longer appears

Implementation for User Story 3

  • T041 [US3] Add delete_task() method to TaskService in backend/src/services/task_service.py
  • T042 [US3] Implement DELETE /api/tasks/{task_id} endpoint in backend/src/api/routes/tasks.py
  • T043 [US3] Add delete button and confirmation dialog to TaskItem component in frontend/src/components/tasks/TaskItem.tsx
  • T044 [US3] Implement deleteTask() API function in frontend/src/lib/api.ts

Checkpoint: All user stories 1, 2, and 3 should now be independently functional


Phase 6: User Story 4 - Filter and Sort Tasks (Priority: P4)

Goal: Users can filter by completion status and sort by date

Independent Test: Create multiple tasks, apply filters (all/active/completed), verify correct subset displayed

Implementation for User Story 4

  • T045 [US4] Add filtering and sorting logic to get_tasks() in TaskService (backend/src/services/task_service.py)
  • T046 [US4] Update GET /api/tasks endpoint to accept query parameters (completed, sort, limit, offset) in backend/src/api/routes/tasks.py
  • T047 [P] [US4] Create TaskFilters client component in frontend/src/components/tasks/TaskFilters.tsx
  • T048 [US4] Update getTasks() API function to accept filter/sort parameters in frontend/src/lib/api.ts
  • T049 [US4] Integrate TaskFilters component into home page in frontend/src/app/page.tsx

Checkpoint: All user stories should now be independently functional


Phase 7: Polish & Cross-Cutting Concerns

Purpose: Improvements that affect multiple user stories

  • T050 [P] Add error handling and user-friendly error messages across all API endpoints in backend/src/api/routes/tasks.py
  • T051 [P] Add loading states and error displays to frontend components in frontend/src/components/tasks/
  • T052 [P] Add input validation and error messages to TaskForm component in frontend/src/components/tasks/TaskForm.tsx
  • T053 [P] Create reusable UI components (Button, Input, Checkbox) in frontend/src/components/ui/
  • T054 [P] Add responsive design styles with Tailwind CSS breakpoints to all task components
  • T055 [P] Add visual distinction for completed vs incomplete tasks in TaskItem component
  • T056 Create backend README.md with setup instructions
  • T057 Create frontend README.md with setup instructions

Dependencies & Execution Order

Phase Dependencies

  • Setup (Phase 1): No dependencies - can start immediately
  • Foundational (Phase 2): Depends on Setup completion - BLOCKS all user stories
  • User Stories (Phase 3-6): All depend on Foundational phase completion
    • User stories can then proceed in parallel (if staffed)
    • Or sequentially in priority order (P1 → P2 → P3 → P4)
  • Polish (Phase 7): Depends on all desired user stories being complete

User Story Dependencies

  • User Story 1 (P1): Can start after Foundational (Phase 2) - No dependencies on other stories
  • User Story 2 (P2): Can start after Foundational (Phase 2) - Builds on US1 but independently testable
  • User Story 3 (P3): Can start after Foundational (Phase 2) - Builds on US1 but independently testable
  • User Story 4 (P4): Can start after Foundational (Phase 2) - Enhances US1 but independently testable

Within Each User Story

  • Pydantic schemas before service methods
  • Service methods before API endpoints
  • API endpoints before frontend components
  • API client functions alongside frontend components
  • Core implementation before integration

Parallel Opportunities

  • All Setup tasks marked [P] can run in parallel
  • All Foundational tasks marked [P] can run in parallel (within Phase 2)
  • Once Foundational phase completes, all user stories can start in parallel (if team capacity allows)
  • Tasks within a user story marked [P] can run in parallel
  • Different user stories can be worked on in parallel by different team members

Parallel Example: User Story 1

# Launch Pydantic schemas together:
Task: "Create TaskCreate schema in backend/src/schemas/task.py"
Task: "Create TaskResponse schema in backend/src/schemas/task.py"
Task: "Create TaskListResponse schema in backend/src/schemas/task.py"

# Launch frontend components together (after API is ready):
Task: "Create TaskList component in frontend/src/components/tasks/TaskList.tsx"
Task: "Create TaskForm component in frontend/src/components/tasks/TaskForm.tsx"
Task: "Create TaskItem component in frontend/src/components/tasks/TaskItem.tsx"

Implementation Strategy

MVP First (User Story 1 Only)

  1. Complete Phase 1: Setup
  2. Complete Phase 2: Foundational (CRITICAL - blocks all stories)
  3. Complete Phase 3: User Story 1
  4. STOP and VALIDATE: Test User Story 1 independently
  5. Deploy/demo if ready

Incremental Delivery

  1. Complete Setup + Foundational → Foundation ready
  2. Add User Story 1 → Test independently → Deploy/Demo (MVP!)
  3. Add User Story 2 → Test independently → Deploy/Demo
  4. Add User Story 3 → Test independently → Deploy/Demo
  5. Add User Story 4 → Test independently → Deploy/Demo
  6. Each story adds value without breaking previous stories

Parallel Team Strategy

With multiple developers:

  1. Team completes Setup + Foundational together
  2. Once Foundational is done:
    • Developer A: User Story 1
    • Developer B: User Story 2
    • Developer C: User Story 3
  3. Stories complete and integrate independently

Notes

  • [P] tasks = different files, no dependencies
  • [Story] label maps task to specific user story for traceability
  • Each user story should be independently completable and testable
  • Commit after each task or logical group
  • Stop at any checkpoint to validate story independently
  • Avoid: vague tasks, same file conflicts, cross-story dependencies that break independence

Task Summary

Total Tasks: 57

  • Phase 1 (Setup): 7 tasks
  • Phase 2 (Foundational): 10 tasks
  • Phase 3 (User Story 1 - P1): 13 tasks
  • Phase 4 (User Story 2 - P2): 10 tasks
  • Phase 5 (User Story 3 - P3): 4 tasks
  • Phase 6 (User Story 4 - P4): 5 tasks
  • Phase 7 (Polish): 8 tasks

Parallel Opportunities: 23 tasks marked [P] can run in parallel within their phase

MVP Scope: Phases 1-3 (30 tasks) deliver User Story 1 - View and Create Tasks

Independent Test Criteria:

  • US1: Create and view tasks in list
  • US2: Edit task and toggle completion
  • US3: Delete task from list
  • US4: Filter and sort task list