test-todo-design

As a frontend developer, implement the `HomeHero` section for the Home page. Build the `ParticleField` sub-component using a `<canvas>` element with `useRef` for `canvasRef` and `particlesRef` (28 particles via `generateParticles`). Implement `ResizeObserver`-based canvas resize with DPR scaling. Run a `requestAnimationFrame` draw loop that updates particle positions (`speedX`/`speedY` * 0.05), wraps edges at ±2%, and renders radial gradient glow + core dot per particle using three colors: `primaryColor` (#2C3E50), `accentColor` (#F39C12), `secondaryColor` (#E74C3C). Toggle `velocityMult` (0.2 hover / 1 normal), `opacityMult` (1.6 / 1), and `glowSize` (12 / 6) based on `isHovered` prop via `hoveredRef`. Use Framer Motion `useInView` for scroll-triggered entrance animations and `useMotionValue` for interactive motion. Implement `useMemo` and `useCallback` for performance optimization.

As a frontend developer, implement the `GalaxyViewer` section for the Home page using `@react-three/fiber` Canvas, `@react-three/drei` OrbitControls and Line, and `THREE` from three.js. Render 16 task nodes from the `TASKS` array as 3D star objects with `connections` edges drawn via `<Line>` components. Use `useFrame` for per-frame animation (orbit/pulse), `useThree` for camera/scene access, and `useMemo` for geometry computation. Manage `useState` for selected task node and `useCallback` for click handlers. Wrap the 3D scene in a `<Canvas>` with `<OrbitControls>`. Use Framer Motion `AnimatePresence` for the 2D task detail panel that appears on node selection — showing task `name`, `desc`, `priority`, and `status`. Color-code nodes by `status` (done/active/pending) and `priority` (high/medium/low). Apply `GalaxyViewer.css` for panel/overlay styling.

As a frontend developer, implement the `TaskBrowser` section for the Home page. Render the 6 hardcoded `TASKS` (Design homepage layout, Set up FastAPI backend, Implement task CRUD endpoints, Add WCAG accessibility audit, Build Task Galaxy 3D scene, Optimize mobile performance) as `TaskCard` sub-components using Framer Motion `containerVariants` (staggerChildren: 0.05) and `cardVariants` (opacity 0→1, y 20→0, duration 0.4, cubic-bezier ease). Each `TaskCard` uses `useState` for `hovered`, `whileHover` spring animation (y: -4, boxShadow), and renders `Edit3`/`Trash2`/`Calendar`/`Inbox` icons from `lucide-react`. Apply `STATUS_MAP` badge classes (`tb-card-badge--active`, `tb-card-badge--done`, `tb-card-badge--pending`). Use Framer Motion `useInView` for scroll-triggered entrance and `AnimatePresence` for card transitions. Wire `handleEdit` and `handleDelete` with `e.stopPropagation()`.

As a frontend developer, implement the `TaskForm` section for the Home page. Build the task creation form with `useState` managing form field values, `useRef` for input focus, and `useCallback` for submit/reset handlers. Render `QUICK_SUGGESTIONS` (6 items: Review project requirements, Fix homepage layout bug, Update documentation, Deploy staging build, Write unit tests, Design settings page) as clickable suggestion rows with `clipboard/code/file/rocket/check/palette` SVG icons. Render `QUICK_CHIPS` (Bug fix, Feature, Research, Meeting) as tag chips with `bug/star/search/users` icons. Use Framer Motion `AnimatePresence` for suggestion dropdown/autocomplete panel visibility. Render inline SVG icons for `plus`, `send`, and `x` actions. Implement `useEffect` for outside-click dismissal of suggestion list. Apply `TaskForm.css` for input, chip, suggestion, and submit button styling.

As a frontend developer, implement the `TaskCardModal` section for the Home page. Manage `useState` for `isOpen`, `isEditing`, `title`, `description`, `editTitle`, and `editDescription` initialized from `SAMPLE_TASK` (title: 'Design landing page wireframe'). Implement `handleOpen`, `handleClose`, `handleBackdropClick` (closes on backdrop click via `e.target === e.currentTarget`), `handleEdit`, `handleSave`, `handleCancelEdit`, and `handleDelete` handlers. Render a parallax decorative background layer (`tcm-decor-layer`) with three concentric rings (`tcm-decor-ring--1/2/3`) and a CSS variable `--scroll` translateY effect. Use Framer Motion `AnimatePresence` with `staggerContainer` (staggerChildren: 0.08, delayChildren: 0.12) and `staggerItem` (opacity 0→1, y 12→0, duration 0.3) variants for modal content entrance/exit. Render a `tcm-trigger-btn` that opens the modal and displays inline edit mode with `editTitle`/`editDescription` textarea fields when `isEditing` is true.

As a frontend developer, implement the `Footer` section for the Home page. Render three link groups: `navLinks` ([Home, Task Card, Task Form] → internal hrefs), `docLinks` ([API Documentation, Getting Started, Architecture] → /Home), and `contactItems` ([Mail, Github, ExternalLink] from `lucide-react` with support email, GitHub repo, and API Status links). Build `AnimatedLink` and `BottomLink` sub-components each using `useState` for `hovered` and Framer Motion `motion.div` for the `ftr-link-underline`/`ftr-bottom-underline` scaleX 0→1 animation (duration 0.3, easeOut, transformOrigin: left). Render a parallax decorative layer (`ftr-decor-layer`) with three dot elements (`ftr-decor-dot--1/2/3`) using CSS variable `--scroll` translateY(-0.2px). Animate the `ftr-divider` with scaleX 0→1 (duration 0.6, delay 0.2). Include `ftr-brand` with logo text 'test-todo-design' and tagline. Note: this component may already exist from a previous page — reuse if available.

As a frontend developer, implement the TaskCardHero section for the TaskCard page. This section renders a decorative Three.js particle field using two THREE.Points layers: a primary field of 80 particles (color: 0x2c3e50, additive blending, opacity 0.5) and 12 accent glints (color: 0xe74c3c, opacity 0.35). The DecorativeParticles component mounts a WebGLRenderer with alpha transparency into a ref container, animates both point clouds with counter-rotating Y/X rotation increments (0.0006/0.0002 for primary, -0.0004/0.0003 for accent), and includes a resize handler to update camera aspect and renderer size. Cleanup cancels the animation frame and removes the renderer DOM element. Depends on Home page Header task to establish page chain.

As a frontend developer, implement the TaskCardContent section for the TaskCard page. This section uses @react-three/fiber Canvas with a GalaxyParticles component: 48 spherically distributed particles computed via useMemo (theta/phi/radius math), animated in useFrame with group rotation (Y: t*0.06, X: sin(t*0.15)*0.08) and per-particle scale pulsing (sin wave with individual speed/phase). Particles use three colors (#E74C3C, #F39C12, #F1C40F) with meshBasicMaterial at opacity 0.55. The section also renders two CSS-only glow orbs (tcc-glow-orb--top, tcc-glow-orb--bottom) behind a content card, and imports lucide-react icons (FileText, Clock, Edit3, AlertCircle) for task detail display. Framer Motion animates the content card entrance. Canvas is positioned as an aria-hidden decorative layer.

As a frontend developer, implement the TaskCardActions section for the TaskCard page. This section mounts a Three.js ParticleField via useRef/useEffect: 50 particles with per-particle velocities stored in a Float32Array, animated each frame by mutating geometry.attributes.position.array directly and flipping velocity on boundary (±13 x, ±8 y). The PointsMaterial uses color 0x34495e with additive blending. Action buttons (Pencil, Trash2, ArrowLeft from lucide-react) are animated with Framer Motion. The renderer cleanup cancels the animation frame via cancelAnimationFrame and removes the canvas DOM node. Includes window resize handler updating renderer size and camera aspect.

As a frontend developer, implement the TaskCardMeta section for the TaskCard page. This section mounts a StarFieldCanvas via useRef/useEffect rendering two THREE.Points layers: 60 primary stars (color 0xF39C12, size 0.08, opacity 0.65, additive blending) with per-star size attributes, and 20 secondary deep-blue stars (color 0x2C3E50, size 0.06, opacity 0.55). Animation counter-rotates the two point clouds (primary Y+0.0008/X+0.0003, secondary Y-0.0006/X-0.0002). The animRef stores both rafId and renderer reference for cleanup. Displays task metadata fields (creation date, status, priority, etc.) styled with TaskCardMeta.css warm accent tones.

As a frontend developer, implement the TaskCardRelated section for the TaskCard page. This section renders a connected StarField via @react-three/fiber Canvas: 48 stars generated with useMemo using spherical coordinates (radius 3.5–6.0), plus a connections array computed by iterating all star pairs, filtering by CONNECTION_DISTANCE (2.2) and random threshold (0.28), then rendering each link as a boxGeometry mesh (length × 0.008 × 0.008) with #F39C12 at opacity 0.13 positioned at the midpoint. Star meshes use three hue-mapped colors (#F39C12, #E74C3C, #2C3E50) via meshBasicMaterial. The groupRef animates with useFrame (Y: t*0.06, X: sin(t*0.12)*0.08). useState manages the selected/highlighted related task. Framer Motion animates card list items. CSS is sourced from TaskCardRelated.css.

As a frontend developer, implement the TaskFormHero section for the TaskForm page. This section renders a full-width hero using a Three.js Canvas via @react-three/fiber with a DecorativeOrbit component: 18 randomly positioned sphereGeometry particles (size 0.025–0.07, color #E74C3C, opacity 0.55) orbiting around a torusGeometry ring (args [1.55, 0.018, 16, 80], color #E74C3C, opacity 0.28). The groupRef animates via useFrame with rotation.y += delta * 0.25 and rotation.x += delta * 0.08. Overlay content includes a tfh-accent-dot div, an h1 with className tfh-headline containing a tfh-headline-em span for 'New Task', and a tfh-subheadline paragraph. Canvas is configured with camera position [0, 0.5, 4.2], fov 42, dpr [1, 1.5], alpha true. Apply TaskFormHero.css styles. This section depends on the Home page Header task to establish page-level chain.

As a frontend developer, implement the TaskFormContainer section for the TaskForm page. This section renders the main task creation form with rich interactive state: useState hooks for title, description, priority, dueDate, errors, touched, and submitting. Includes a FormStar 3D accent using a Canvas with OrbitControls (autoRotate, autoRotateSpeed 1.1) rendering a StarShape built from THREE.Shape with 5-point star geometry (outerR 1.3, innerR 0.5) extruded via extrudeGeometry (depth 0.22, bevelEnabled). meshStandardMaterial uses color #F39C12, emissive #F1C40F, emissiveIntensity 0.25. Form fields include title input, description textarea with MAX_DESC_LENGTH 280 character counter, a priority radio/selector group using PRIORITY_OPTIONS array (high #E74C3C, medium #F39C12, low #95A5A6), and a dueDate input. Validation logic triggers on blur via touched state and on submit via setSubmitting. Apply TaskFormContainer.css styles. This section is independent of TaskFormHero and can be built in parallel.

As a frontend developer, implement the FormSuccessMessage section for the TaskForm page. This section renders a post-submission success state with a 3D StarField background: 40 sphereGeometry particles (size 0.03–0.09, color #2C3E50, opacity ~0.3) animated via useFrame where each mesh.position.y oscillates using Math.sin(elapsedTime * star.speed + star.phase) * 0.6 and material.opacity pulses between 0.05–0.45. Canvas uses camera position [0, 0, 5], fov 50, dpr [1, 1.5], alpha true. Foreground fms-card includes a CheckCircle icon (lucide-react, strokeWidth 2.5) in fms-icon-wrapper, an fms-title h2 'Task Created Successfully', fms-subtitle paragraph, a createdTask summary object (title, status 'Pending', createdAt formatted via toLocaleDateString), and CTA buttons using Eye and Plus icons from lucide-react for view and create-another actions. Apply FormSuccessMessage.css styles. This section is independent of TaskFormHero and TaskFormContainer and can be built in parallel.

As a Backend Developer, implement the FastAPI CRUD endpoints for tasks: GET /tasks (list all), POST /tasks (create), GET /tasks/{id} (retrieve), PUT /tasks/{id} (update), DELETE /tasks/{id} (delete). Each task model should include: id (UUID), title (str), description (str, optional), priority (enum: high/medium/low), status (enum: pending/active/done), due_date (date, optional), created_at (datetime), updated_at (datetime). Include request/response Pydantic schemas, proper HTTP status codes, and error handling. Note: frontend tasks TaskBrowser, TaskCardContent, TaskCardMeta, TaskCardActions, TaskCardHero, TaskCardRelated, TaskFormContainer, FormSuccessMessage depend on this API.

As a Frontend Developer, configure the global API client and state management layer for the SPA. Set up an axios (or fetch-based) API client with base URL from environment variables pointing to the FastAPI backend. Implement a global tasks state (React Context or lightweight store such as Zustand) with actions: fetchTasks, createTask, updateTask, deleteTask. Include loading and error states. This shared layer will be consumed by TaskBrowser, TaskFormContainer, TaskCardActions, and FormSuccessMessage to replace hardcoded SAMPLE_TASK and TASKS data with live API data.

As a Tech Lead, verify the end-to-end integration between the TaskForm frontend implementation (TaskFormContainer, FormSuccessMessage) and the POST /tasks backend API. Ensure the form submission sends the correct payload, the API response is handled to display FormSuccessMessage with real created task data (id, title, status, createdAt), and navigation back to the task list works correctly. Confirm error states surface properly in the UI.

As a Tech Lead, verify the end-to-end integration between the TaskBrowser and GalaxyViewer frontend sections and the GET /tasks backend API. Ensure the tasks list is fetched on page load, rendered in both the TaskBrowser card grid and the GalaxyViewer 3D galaxy scene, and that loading/empty/error states are handled gracefully. Confirm the hardcoded TASKS arrays are replaced with live API data.

As a Tech Lead, verify the end-to-end integration between the TaskCard page sections (TaskCardHero, TaskCardContent, TaskCardMeta, TaskCardRelated) and the GET /tasks/{id} backend API. Ensure the task detail page fetches and displays real task data by ID from the URL parameter, metadata fields (status, priority, created_at) are correctly rendered, and the related tasks section is populated. Note: TaskCardHero (99e9d55a), TaskCardContent (fe882d29), TaskCardMeta (6dcdf242), TaskCardRelated (61081cdb) frontend tasks depend on this integration.

As a Tech Lead, verify the end-to-end integration between the TaskCardActions and TaskCardModal frontend sections and the PUT /tasks/{id} and DELETE /tasks/{id} backend API endpoints. Ensure edit saves changes correctly and the UI reflects updated data, delete removes the task and redirects or updates the list, and optimistic UI or loading feedback is handled appropriately. Note: frontend tasks TaskCardActions (a2a38167), TaskCardModal (2405de6c) should depend on this integration path.