Drew Galbraith
c337161576
Week by week plan for claude. Update CLAUDE.md Create backend. Task API. Initial frontend.
141 lines
4.6 KiB
Markdown
141 lines
4.6 KiB
Markdown
# Phase 1: Core MVP - Task Management Only
|
|
|
|
## Feature 1: Task Management
|
|
|
|
### Overview
|
|
Implement the foundational task management system with basic CRUD operations and essential properties.
|
|
|
|
### Task Properties (from PRD)
|
|
- Title (required)
|
|
- Description (optional, markdown supported)
|
|
- Priority (High/Medium/Low)
|
|
- Due date (optional)
|
|
- Status (Todo/In Progress/Done/Someday)
|
|
|
|
### Technical Architecture
|
|
|
|
#### Backend: Rust + Axum + SQLx
|
|
- RESTful API for task operations
|
|
- SQLite for development database
|
|
- Type-safe database queries
|
|
|
|
#### Database Schema
|
|
```sql
|
|
CREATE TABLE tasks (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
title VARCHAR NOT NULL,
|
|
description TEXT,
|
|
priority VARCHAR(10) DEFAULT 'medium', -- high, medium, low
|
|
due_date DATE,
|
|
status VARCHAR(20) DEFAULT 'todo', -- todo, in_progress, done, someday
|
|
created_at TIMESTAMP DEFAULT NOW(),
|
|
updated_at TIMESTAMP DEFAULT NOW(),
|
|
completed_at TIMESTAMP
|
|
);
|
|
```
|
|
|
|
#### Frontend: Vite + React + Tailwind
|
|
- Single-page task management interface with React Router
|
|
- Quick capture form with React hooks
|
|
- Task list with inline editing using React components
|
|
- Mobile-responsive design
|
|
|
|
### Testing Strategy
|
|
|
|
#### Backend Testing
|
|
- **Unit Tests**: Test individual functions and models using `cargo test`
|
|
- **Integration Tests**: Test API endpoints with test database
|
|
- **Database Tests**: Test SQLx queries and migrations
|
|
- **Test Coverage**: Aim for >80% code coverage using `cargo tarpaulin`
|
|
|
|
#### Frontend Testing
|
|
- **Unit Tests**: Component testing with Vitest and React Testing Library
|
|
- **Integration Tests**: User interaction flows with Playwright
|
|
- **Accessibility Tests**: Screen reader compatibility and keyboard navigation
|
|
- **Mobile Testing**: Responsive design validation on various screen sizes
|
|
|
|
#### Test Database
|
|
- Separate SQLite test database that's reset between test runs
|
|
- Test fixtures for common task scenarios
|
|
- Database migration testing
|
|
|
|
### Implementation Plan
|
|
|
|
#### Week 1: Backend Foundation
|
|
1. **Project Setup**
|
|
- Initialize Rust project with Axum
|
|
- Setup SQLx with SQLite
|
|
- Create database migration for tasks table
|
|
- Basic server with health check endpoint
|
|
- **Testing**: Setup test framework and test database
|
|
|
|
2. **Task API Endpoints**
|
|
- `POST /api/tasks` - Create new task
|
|
- `GET /api/tasks` - List all tasks
|
|
- `GET /api/tasks/{id}` - Get single task
|
|
- `PUT /api/tasks/{id}` - Update task
|
|
- `DELETE /api/tasks/{id}` - Delete task
|
|
- `PATCH /api/tasks/{id}/status` - Update task status
|
|
- **Testing**: Integration tests for all endpoints
|
|
|
|
#### Week 2: Frontend Foundation
|
|
1. **Vite + React Setup**
|
|
- Initialize Vite project with React template
|
|
- Configure Tailwind CSS
|
|
- Setup React Router for navigation
|
|
- Setup API client utilities
|
|
- **Testing**: Setup Vitest, React Testing Library, and Playwright
|
|
|
|
2. **Core React Components**
|
|
- TaskCard component with React hooks
|
|
- TaskForm component (create/edit) with form handling
|
|
- TaskList component with state management
|
|
- Quick capture input component
|
|
- **Testing**: Unit tests for each component using React Testing Library
|
|
|
|
#### Week 3: Integration & Polish
|
|
1. **Task Management Interface**
|
|
- Task creation form with all properties
|
|
- Task list with status filtering
|
|
- Inline task editing
|
|
- Task deletion with confirmation
|
|
- **Testing**: End-to-end user workflow tests
|
|
|
|
2. **Mobile Responsiveness**
|
|
- Touch-friendly controls
|
|
- Responsive layout
|
|
- Mobile-optimized forms
|
|
- **Testing**: Mobile browser testing and accessibility validation
|
|
|
|
### Success Criteria
|
|
- [ ] Users can create tasks with all properties
|
|
- [ ] Tasks display in a clean, scannable list
|
|
- [ ] Users can edit task properties inline
|
|
- [ ] Users can update task status (todo → in_progress → done)
|
|
- [ ] Users can delete tasks
|
|
- [ ] Interface works well on mobile devices
|
|
- [ ] Quick capture allows rapid task entry
|
|
- [ ] **Testing**: All tests pass and maintain >80% backend coverage
|
|
- [ ] **Testing**: E2E tests cover core user workflows
|
|
- [ ] **Testing**: Accessibility tests pass
|
|
|
|
### Definition of Done
|
|
- Working backend API with proper error handling
|
|
- Responsive frontend with mobile support
|
|
- All task CRUD operations functional
|
|
- Basic form validation
|
|
- **Comprehensive test suite with good coverage**
|
|
- **Automated testing pipeline setup**
|
|
- Manual testing completed on desktop and mobile
|
|
|
|
### Test Commands
|
|
```bash
|
|
# Backend tests
|
|
cargo test
|
|
cargo tarpaulin --out Html # Coverage report
|
|
|
|
# Frontend tests
|
|
npm test # Unit tests with Vitest
|
|
npm run test:e2e # End-to-end tests with Playwright
|
|
npm run test:coverage # Coverage report
|
|
```
|