Create a frontend wireframe. (#7)
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>
This commit is contained in:
parent
7d2b7fc90c
commit
d60d834f38
27 changed files with 3114 additions and 977 deletions
|
|
@ -1,7 +1,7 @@
|
|||
# Frontend MVP Implementation Plan
|
||||
|
||||
## Overview
|
||||
This plan details the concrete implementation steps for the Captain's Log frontend MVP using Vite + React + TypeScript + Tailwind CSS with comprehensive testing infrastructure.
|
||||
This plan details the concrete implementation steps for the Captain's Log frontend MVP using Vite + React + TypeScript with comprehensive testing infrastructure.
|
||||
|
||||
## Project Structure (Planned Implementation)
|
||||
```
|
||||
|
|
@ -15,7 +15,7 @@ captains-log/
|
|||
├── package.json # Node.js project manifest
|
||||
├── vite.config.ts # Vite configuration
|
||||
├── tsconfig.json # TypeScript configuration
|
||||
├── tailwind.config.js # Tailwind CSS configuration
|
||||
├── postcss.config.js # PostCSS configuration
|
||||
├── index.html # Entry HTML file
|
||||
├── src/
|
||||
│ ├── main.tsx # Application entry point
|
||||
|
|
@ -35,7 +35,7 @@ captains-log/
|
|||
│ ├── types/
|
||||
│ │ └── task.ts # TypeScript type definitions
|
||||
│ └── styles/
|
||||
│ └── index.css # Tailwind imports and custom styles
|
||||
│ └── index.css # CSS imports and custom styles
|
||||
└── tests/
|
||||
└── components/ # Component unit tests
|
||||
```
|
||||
|
|
@ -45,16 +45,16 @@ captains-log/
|
|||
### Task 1.1: Initialize Frontend Project
|
||||
- [x] **File**: `frontend/package.json`
|
||||
- Create new Vite + React + TypeScript project
|
||||
- Add dependencies: react, react-dom, react-router-dom, tailwindcss, @types/*
|
||||
- Add dependencies: react, react-dom, react-router-dom, @types/*
|
||||
- Add dev dependencies: vitest, @testing-library/react, @testing-library/jest-dom
|
||||
- Configure scripts for dev, build, test, lint
|
||||
- **Expected outcome**: `npm install` succeeds
|
||||
|
||||
### Task 1.2: Setup Build Tools and Configuration
|
||||
- [x] **Files**: `frontend/vite.config.ts`, `frontend/tsconfig.json`, `frontend/tailwind.config.js`
|
||||
- [x] **Files**: `frontend/vite.config.ts`, `frontend/tsconfig.json`, `frontend/postcss.config.js`
|
||||
- Configure Vite with React plugin and proxy to backend
|
||||
- Setup TypeScript with strict mode and path aliases
|
||||
- Configure Tailwind CSS with custom design tokens
|
||||
- Configure CSS styling framework
|
||||
- Setup Vitest for testing
|
||||
- **Expected outcome**: `npm run dev` starts frontend development server
|
||||
|
||||
|
|
@ -75,14 +75,14 @@ captains-log/
|
|||
## Phase 2: Core API Integration (Days 3-4)
|
||||
|
||||
### Task 2.1: Define TypeScript Types
|
||||
- [ ] **File**: `frontend/src/types/task.ts`
|
||||
- [x] **File**: `frontend/src/types/task.ts`
|
||||
- Create Task interface matching backend TaskModel
|
||||
- Add TaskStatus enum (Todo, Done, Backlog)
|
||||
- Include API response types and error types
|
||||
- **Expected outcome**: Type definitions compile without errors
|
||||
|
||||
### Task 2.2: Backend API Client
|
||||
- [ ] **File**: `frontend/src/services/api.ts`
|
||||
- [x] **File**: `frontend/src/services/api.ts`
|
||||
- Implement API client with fetch wrapper
|
||||
- Add all task endpoints: GET, POST, PUT, DELETE /api/tasks
|
||||
- Include error handling and response parsing
|
||||
|
|
@ -90,7 +90,7 @@ captains-log/
|
|||
- **Expected outcome**: API client can communicate with backend
|
||||
|
||||
### Task 2.3: Custom React Hooks for API
|
||||
- [ ] **Files**: `frontend/src/hooks/useTask.ts`, `frontend/src/hooks/useTasks.ts`
|
||||
- [x] **Files**: `frontend/src/hooks/useTask.ts`, `frontend/src/hooks/useTasks.ts`
|
||||
- Create useTask hook for single task operations (get, update, delete)
|
||||
- Create useTasks hook for task list operations (list, create)
|
||||
- Include loading states, error handling, and optimistic updates
|
||||
|
|
@ -98,7 +98,7 @@ captains-log/
|
|||
- **Expected outcome**: Hooks provide clean API for components
|
||||
|
||||
### Task 2.4: API Integration Tests
|
||||
- [ ] **File**: `frontend/tests/api.test.ts`
|
||||
- [x] **File**: `frontend/tests/api.test.ts`
|
||||
- Test API client with mock responses
|
||||
- Test custom hooks with mock API calls
|
||||
- Test error handling scenarios
|
||||
|
|
@ -107,7 +107,26 @@ captains-log/
|
|||
|
||||
## Phase 3: Core Components (Days 5-6)
|
||||
|
||||
### Task 3.1: Task Card Component
|
||||
**UI Framework**: Use Material-UI (MUI) for consistent design system and components alongside CSS for custom styling.
|
||||
|
||||
### Task 3.1: Main App Component and Routing
|
||||
- [ ] **Files**: `frontend/src/App.tsx`, `frontend/src/main.tsx`
|
||||
- Setup React Router with basic navigation
|
||||
- Create main layout with MUI AppBar/Drawer and task area
|
||||
- Implement responsive design with MUI breakpoints and CSS
|
||||
- Add MUI loading states (CircularProgress) and error boundaries
|
||||
- Configure MUI theme with custom colors
|
||||
- **Expected outcome**: Full application loads and navigates properly with Material Design
|
||||
|
||||
### Task 3.2: Task List Component
|
||||
- [ ] **File**: `frontend/src/components/TaskList.tsx`
|
||||
- Display tasks using MUI List/Grid components
|
||||
- Filter tasks by status using MUI Chip/Select components
|
||||
- Sort tasks with MUI Select dropdown
|
||||
- Implement virtual scrolling with MUI virtualization
|
||||
- **Expected outcome**: TaskList displays tasks efficiently with Material Design
|
||||
|
||||
### Task 3.3: Task Card Component
|
||||
- [ ] **File**: `frontend/src/components/TaskCard.tsx`
|
||||
- Display task with title, description, status, dates
|
||||
- Implement inline editing for title and description
|
||||
|
|
@ -116,15 +135,16 @@ captains-log/
|
|||
- Mobile-friendly touch interactions
|
||||
- **Expected outcome**: TaskCard displays and edits tasks correctly
|
||||
|
||||
### Task 3.2: Task Form Component
|
||||
### Task 3.4: Task Form Component
|
||||
- [ ] **File**: `frontend/src/components/TaskForm.tsx`
|
||||
- Create/edit form with all task properties
|
||||
- Form validation and error display
|
||||
- Handle form submission with API calls
|
||||
- Support both modal and inline modes
|
||||
- **Expected outcome**: TaskForm creates and updates tasks
|
||||
- Create/edit form using Formik for form state management
|
||||
- Use MUI TextField, Select, and Button components
|
||||
- Form validation with Yup schema and error display
|
||||
- Handle form submission with API calls through Formik onSubmit
|
||||
- Support both MUI Dialog modal and inline modes
|
||||
- **Expected outcome**: TaskForm creates and updates tasks with robust form handling
|
||||
|
||||
### Task 3.3: Quick Capture Component
|
||||
### Task 3.5: Quick Capture Component
|
||||
- [ ] **File**: `frontend/src/components/QuickCapture.tsx`
|
||||
- Minimal input for rapid task creation
|
||||
- Auto-focus and keyboard shortcuts
|
||||
|
|
@ -132,14 +152,14 @@ captains-log/
|
|||
- Smart defaults for new tasks
|
||||
- **Expected outcome**: QuickCapture enables fast task entry
|
||||
|
||||
### Task 3.4: Status Badge Component
|
||||
### Task 3.6: Status Badge Component
|
||||
- [ ] **File**: `frontend/src/components/StatusBadge.tsx`
|
||||
- Visual status indicators with colors
|
||||
- Consistent styling across components
|
||||
- Accessible color schemes
|
||||
- **Expected outcome**: StatusBadge provides clear status visualization
|
||||
|
||||
### Task 3.5: Component Unit Tests
|
||||
### Task 3.7: Component Unit Tests
|
||||
- [ ] **Files**: `frontend/tests/components/*.test.tsx`
|
||||
- Test all components with React Testing Library
|
||||
- Test user interactions and state changes
|
||||
|
|
@ -149,22 +169,6 @@ captains-log/
|
|||
|
||||
## Phase 4: Main Application (Days 7-8)
|
||||
|
||||
### Task 4.1: Task List Component
|
||||
- [ ] **File**: `frontend/src/components/TaskList.tsx`
|
||||
- Display tasks in organized list/grid layout
|
||||
- Filter tasks by status (Todo, In Progress, Done, Someday)
|
||||
- Sort tasks by created date, priority, due date
|
||||
- Implement virtual scrolling for performance
|
||||
- **Expected outcome**: TaskList displays tasks efficiently
|
||||
|
||||
### Task 4.2: Main App Component and Routing
|
||||
- [ ] **Files**: `frontend/src/App.tsx`, `frontend/src/main.tsx`
|
||||
- Setup React Router with basic navigation
|
||||
- Create main layout with header and task area
|
||||
- Implement responsive design with Tailwind
|
||||
- Add loading states and error boundaries
|
||||
- **Expected outcome**: Full application loads and navigates properly
|
||||
|
||||
### Task 4.3: State Management and Persistence
|
||||
- [ ] **File**: `frontend/src/hooks/useApi.ts`
|
||||
- Implement localStorage for offline task caching
|
||||
|
|
@ -231,7 +235,6 @@ captains-log/
|
|||
"@vitejs/plugin-react": "^4.3.0",
|
||||
"vite": "^5.4.0",
|
||||
"typescript": "^5.5.0",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"vitest": "^2.0.0",
|
||||
"@testing-library/react": "^16.0.0",
|
||||
"@testing-library/jest-dom": "^6.5.0"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ CREATE TABLE tasks (
|
|||
);
|
||||
```
|
||||
|
||||
#### Frontend: Vite + React + Tailwind
|
||||
#### 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
|
||||
|
|
@ -81,7 +81,7 @@ CREATE TABLE tasks (
|
|||
#### Week 2: Frontend Foundation
|
||||
1. **Vite + React Setup**
|
||||
- Initialize Vite project with React template
|
||||
- Configure Tailwind CSS
|
||||
- Configure CSS styling
|
||||
- Setup React Router for navigation
|
||||
- Setup API client utilities
|
||||
- **Testing**: Setup Vitest, React Testing Library, and Playwright
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue