Task_Reporter/openspec/changes/archive/2025-12-01-add-react-frontend/tasks.md

Implementation Tasks

1. Project Setup

• 1.1 Initialize Vite + React + TypeScript project in frontend/
• 1.2 Install dependencies (react-router, zustand, @tanstack/react-query, axios)
• 1.3 Configure Tailwind CSS
• 1.4 Set up ESLint + Prettier
• 1.5 Create directory structure (components, pages, hooks, stores, services)
• 1.6 Configure Vite proxy for API calls to localhost:8000

2. API Client Layer

• 2.1 Create Axios instance with base URL and interceptors
• 2.2 Implement auth service (login, logout, token refresh)
• 2.3 Implement rooms service (CRUD, members, templates)
• 2.4 Implement messages service (list, create, search)
• 2.5 Implement files service (upload, list, download, delete)
• 2.6 Add TypeScript types matching backend schemas

3. State Management

• 3.1 Create auth store (user, token, login state)
• 3.2 Create chat store (messages, typing users, online users)
• 3.3 Set up React Query provider and default options
• 3.4 Create custom hooks (useAuth, useRooms, useMessages, useFiles)

4. Authentication Pages

• 4.1 Create Login page with form validation
• 4.2 Implement login flow with error handling
• 4.3 Create protected route wrapper
• 4.4 Add logout functionality
• 4.5 Handle token storage and auto-login

5. Room List Page

• 5.1 Create RoomList page layout
• 5.2 Implement room cards with status indicators
• 5.3 Add filtering by status
• 5.4 Add search functionality
• 5.5 Create "New Room" modal
• 5.6 Add pagination with Previous/Next controls

6. Room Detail Page

• 6.1 Create room header (title, status, severity badge)
• 6.2 Implement member sidebar
• 6.3 Create room settings panel (for owners) - status change buttons
• 6.4 Add status change functionality (resolve, archive)
• 6.5 Implement member management (add, remove, change role)

7. Real-time Chat

• 7.1 Create WebSocket connection hook with auto-reconnect
• 7.2 Implement message list component
• 7.3 Create message input with submit handling
• 7.4 Add typing indicator display
• 7.5 Implement message edit functionality
• 7.6 Implement message delete functionality
• 7.7 Add reaction support with quick emoji picker
• 7.8 Show online user indicators

8. File Management

• 8.1 Create file upload button with drag-and-drop
• 8.2 Implement upload progress indicator
• 8.3 Create file list view
• 8.4 Add image preview modal
• 8.5 Implement file download functionality
• 8.6 Add file delete with confirmation

9. Common Components

• 9.1-9.7 Using Tailwind utility classes inline (no separate component library)

10. Routing and Layout

• 10.1 Set up React Router with routes
• 10.2 Create main layout with navigation
• 10.3 Create 404 Not Found page
• 10.4 Add breadcrumb navigation component
• 10.5 Implement responsive sidebar

11. Testing

• 11.1 Set up Vitest for unit testing
• 11.2 Write tests for API services (mocked)
• 11.3 Write tests for Zustand stores
• 11.4 Write tests for custom hooks (useAuth, useRooms)
• 11.5 Add component tests for critical paths (Login, Breadcrumb)

12. Build and Integration

• 12.1 Configure production build settings
• 12.2 Set up FastAPI to serve static files
• 12.3 CORS already configured (allow all in development)
• 12.4 Build script: cd frontend && npm run build
• 12.5 Test full integration with backend

Summary

Completed: All sections 1-12 (all features and tests) Note: Section 9 uses inline Tailwind classes instead of separate component library

Files Created

frontend/
├── src/
│   ├── types/index.ts          # TypeScript types
│   ├── services/
│   │   ├── api.ts              # Axios instance
│   │   ├── auth.ts             # Auth service
│   │   ├── rooms.ts            # Rooms service
│   │   ├── messages.ts         # Messages service
│   │   ├── files.ts            # Files service
│   │   └── index.ts
│   ├── stores/
│   │   ├── authStore.ts        # Zustand auth store
│   │   └── chatStore.ts        # Zustand chat store
│   ├── hooks/
│   │   ├── useAuth.ts          # Auth hook
│   │   ├── useRooms.ts         # Room queries/mutations
│   │   ├── useMessages.ts      # Message queries/mutations
│   │   ├── useFiles.ts         # File queries/mutations
│   │   ├── useWebSocket.ts     # WebSocket hook
│   │   └── index.ts
│   ├── pages/
│   │   ├── Login.tsx           # Login page
│   │   ├── RoomList.tsx        # Room list page
│   │   ├── RoomDetail.tsx      # Room detail with chat
│   │   ├── NotFound.tsx        # 404 page
│   │   └── index.ts
│   ├── App.tsx                 # Root component with routes
│   ├── main.tsx                # Entry point
│   └── index.css               # Tailwind imports
├── vite.config.ts              # Vite configuration
├── tailwind.config.js          # Tailwind configuration
├── tsconfig.json               # TypeScript config
└── package.json                # Dependencies

Backend Integration

• app/main.py updated to serve frontend static files from frontend/dist/
• SPA routing support via catch-all route