Sets up API methods and types. Sets up a colorscheme. Sets up a homepage. Removes tailwind in favor of mui for now. Reviewed-on: #7 Co-authored-by: Drew Galbraith <drew@tiramisu.one> Co-committed-by: Drew Galbraith <drew@tiramisu.one>
4.6 KiB
4.6 KiB
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
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
- 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
-
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
-
Task API Endpoints
POST /api/tasks- Create new taskGET /api/tasks- List all tasksGET /api/tasks/{id}- Get single taskPUT /api/tasks/{id}- Update taskDELETE /api/tasks/{id}- Delete taskPATCH /api/tasks/{id}/status- Update task status- Testing: Integration tests for all endpoints
Week 2: Frontend Foundation
-
Vite + React Setup
- Initialize Vite project with React template
- Configure CSS styling
- Setup React Router for navigation
- Setup API client utilities
- Testing: Setup Vitest, React Testing Library, and Playwright
-
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
-
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
-
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
# 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