deep-todo

As a frontend developer, implement the `LandingHero` section using React Three Fiber `Canvas` with a custom `StarField` component. The `StarField` uses `useRef`, `useMemo` to generate 220 particles with randomized `Float32Array` positions, sizes, and phases. Use `useFrame` to animate Y-position with `Math.sin(time * 0.3 + phases[i]) * 0.15` and twinkle via per-particle size modulation. Apply a custom `shaderMaterial` with GLSL vertex/fragment shaders: vertex shader computes `gl_PointSize = aSize * (300.0 / -mvPos.z)`, fragment shader uses `smoothstep` for soft circular particles colored `#6da3ef`. Include kinetic scramble typography animation using a `SCRAMBLE_CHARS` string and split-letter reveal logic. Import `LandingHero.css`. Requires `@react-three/fiber` and `three` packages.

As a frontend developer, implement the `TaskGalaxyShowcase` section using React Three Fiber `Canvas` with `OrbitControls` and `Html` from `@react-three/drei`. Manage a `TASKS` array of 20+ sample task objects with `id`, `title`, `category`, `priority`, `rating`, and `desc` fields. Use `useState` for selected task state and `useRef`/`useMemo`/`useCallback` for 3D scene management. Use `useThree` to access camera/renderer. Render task nodes as 3D spheres orbiting in a galaxy layout — each node colored by category (work, health, learning, creative, personal). On node click/hover, show an `Html` overlay card with task details. Import `TaskGalaxyShowcase.css`. Requires `@react-three/fiber`, `@react-three/drei`, and `three`.

As a frontend developer, implement the `LandingFeatures` section with three `TiltCard` components, one for each feature: Log Books (`BookOpen` icon), Rate & Review (`Star` icon), and Track Reading Journey (`TrendingUp` icon) — all from `lucide-react`. Each `TiltCard` uses `useRef` for DOM access, `useState` for `glowPos`, and `framer-motion` `useSpring` (stiffness 260, damping 24) with `useTransform` for `rotateX`/`rotateY` 3D CSS tilt on `mousemove`. A `lf-card-glow` radial gradient follows the cursor. The section includes a `lf-parallax-bg` layer with two blob divs animated via a CSS `--scroll` custom property. Import `LandingFeatures.css`. Requires `framer-motion` and `lucide-react`.

As a frontend developer, implement the `HowItWorks` section with a 4-step animated timeline. Define `STEPS` array with step objects containing `num`, `title`, `desc`, and `Icon` (UserPlus, BookPlus, Star, Library from `lucide-react`). Use `useRef` for `sectionRef` and `timelineRef`, `useState` for `revealed`, `stepsVisible` (array of 4 booleans), and `dotProgress` (0–1 float). Use `IntersectionObserver` at 0.2 threshold to trigger reveal and stagger step visibility with 250ms delays via `setTimeout`. After reveal, use `requestAnimationFrame` with a 2400ms duration to animate `dotProgress` for a traveling dot along an SVG path. Implement `getDotPosition` callback for horizontal/vertical path interpolation with a sine wave. Import `HowItWorks.css`.

As a frontend developer, implement the `ValueProposition` section with a two-column layout: left bullet list and right animated dashboard mockup. Define `BULLETS` array (Library, BarChart3, BookOpen icons from lucide-react) and `TASKS` mock data (4 tasks with `name`, `cat`, `done`, `priority` fields) and `CHART_DATA` (7 day bar chart entries with `label`, `height`, `color`). Use `useState` for `isVisible` and `chartAnimated`, `useRef` for `sectionRef`, `mockupRef`, and `tiltRef`/`rafRef` for cursor-reactive 3D tilt via `requestAnimationFrame`. `IntersectionObserver` at 0.15 threshold triggers visibility and delays chart animation by 600ms. The dashboard mockup tilts up to ±8 degrees on `mousemove` using `deltaX/deltaY` normalized to rect bounds. Render animated bar chart columns using `chartAnimated` height transitions. Import `ValueProposition.css`.

As a frontend developer, implement the `CallToAction` section with a React Three Fiber `Canvas` background featuring a `StarField` component (120 particles, `Float32Array` positions/sizes/phases, `useFrame` Y-animation with `Math.sin(t * 0.3 + phases[i]) * 0.15`, `pointsMaterial` with `THREE.AdditiveBlending`). Implement a `useTextScramble` custom hook that takes `text` and `isVisible` params — uses `useRef` for `resolvedRef`, `frameRef`, `startTimeRef`, `hasRunRef`, and `useState` for `displayed`. The scramble runs once on visibility: `requestAnimationFrame` ticks over 1200ms duration, resolving characters progressively from a `SCRAMBLE_CHARS` string. Use `IntersectionObserver` to trigger `isVisible`. Render a centered CTA card with scrambled headline, subtitle, and a `/Dashboard` CTA button. Import `CallToAction.css`. Requires `@react-three/fiber` and `three`.

As a frontend developer, implement the `Footer` section with a Canvas-based animated starfield background. Use `useRef` for `canvasRef` and `animFrameRef`. In `useEffect`, initialize 80 stars (`STAR_COUNT`) with randomized `x`, `y`, `r` (0.3–1.8), `alpha` (0.2–0.8), `speed`, and `phase`. The `draw(time)` function uses `Math.sin(time * s.speed * 2 + s.phase)` for twinkle and fills circles with `rgba(200, 214, 229, alpha)`. Use `ResizeObserver` to handle canvas DPR-aware resizing. Render four link columns: Product (Dashboard, Task Manager, Categories, Create Task), Company, Resources, Legal — each with `href` values. Render social icons: `Github`, `Twitter`, `Linkedin`, `Mail` from `lucide-react`. Include copyright line. Note: this component may already exist from a previous page — reuse if available. Import `Footer.css`.

As a frontend developer, implement the Navbar section for the Dashboard page. This component (shared with Landing page — may already exist) uses useState for menuOpen and scrolled states, a useEffect scroll listener that adds the 'nb-scrolled' class when window.scrollY > 12, and renders a NAV_LINKS array with 6 routes (Landing, Dashboard, TaskList, TaskForm, TaskDetail, Categories). Includes an SVG constellation logo linking to /Landing, desktop nav links with active state detection via window.location.pathname, a 'Get Started' CTA button linking to /Dashboard, and a mobile hamburger button toggling the mobile menu. Import Navbar.css for styling.

Implement FastAPI backend endpoints for the Categories resource. Required routes: GET /api/categories (list all categories with task counts), POST /api/categories (create new category with name, color), GET /api/categories/{id} (retrieve with task stats), PUT /api/categories/{id} (update name, color), DELETE /api/categories/{id} (delete, optionally reassign tasks). Category model: id, name, color (hex), created_at, updated_at. Used by: Categories page sections (CategoriesGrid, CategoriesFilter, CategoriesStats), TaskForm TaskCategorySection, Dashboard DashboardSidebar. Note: frontend tasks CategoriesGrid, CategoriesFilter, CategoriesStats, CategoriesActions, TaskCategorySection, DashboardSidebar should depend on this task once linked.

Implement a centralized API client service layer in the React frontend to replace hardcoded mock data across all page sections. Create src/services/api.js (or api.ts) with: a configured axios instance (baseURL from VITE_API_URL env var, default Content-Type headers, response/error interceptors for unified error handling). Export grouped service modules: tasksApi (getAll, getById, create, update, delete with query param support for filtering/pagination/search), categoriesApi (getAll, getById, create, update, delete), dashboardApi (getStats). This layer will be consumed by frontend section components once mock data is replaced with real API calls. Depends on backend API tasks being defined so contracts are known.

Set up a GitHub Actions CI/CD pipeline for the deep-todo project. Workflow file (.github/workflows/ci.yml): on push/PR to main — (1) lint and test backend (Python: ruff/flake8, pytest with test database), (2) lint and build frontend (ESLint, Vite build), (3) build and push Docker images to registry on merge to main. Separate deploy workflow (.github/workflows/deploy.yml): apply Kubernetes manifests via kubectl using cluster credentials stored in GitHub Secrets. Environment variables and secrets management: DATABASE_URL, SECRET_KEY, VITE_API_URL documented in .env.example files for both frontend and backend.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This is a static header component that renders a breadcrumb trail using a BREADCRUMBS array ([Home → /Landing, Dashboard → /Dashboard]) with ChevronIcon SVG separators and an 'Overview' current-page label. Includes a title row with an h1 tag featuring 'My' in a dh-title-accent span and a 'Live' badge with an animated dh-title-badge-dot, a subtitle paragraph, and two action buttons: an outline 'All Tasks' button (ListIcon, links to /TaskList) and a primary 'New Task' button (PlusIcon, links to /TaskForm). Renders a dh-underline decorative divider. Import DashboardHeader.css.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for isOpen (mobile collapse toggle) and detects currentPath via window.location.pathname. Renders three grouped sections: (1) Quick Links using QUICK_LINKS array with lucide-react icons (LayoutDashboard, ListTodo, PlusCircle, Tag, FileText) and active state highlighting; (2) Status filters using STATUS_FILTERS array (All Tasks, In Progress, Completed, Not Started, Overdue) with lucide icons (Clock, CheckCircle2, Circle, AlertCircle) and count badges including a ds-badge-accent variant for Overdue; (3) Categories section using CATEGORIES array with inline progress bars showing per-category completion percentages and custom hex colors. Mobile toggle button uses ChevronDown icon with rotation animation. Import DashboardSidebar.css and lucide-react.

As a frontend developer, implement the WelcomeBanner section for the Dashboard page. Uses useState to store currentDate, currentDay, and a randomly selected messageIdx (initialized once via useState lazy initializer). A useEffect on mount calls toLocaleDateString with 'long' weekday and date options to populate the date state. Renders a MOTIVATIONAL_MESSAGES array (4 entries with prefix/highlight/suffix structure) using wb-motivational-accent span for highlighted text. Includes decorative wb-accent-bar, wb-bg-orb, and wb-bg-orb-2 elements, a greeting h1 with wb-greeting-name span ('Alex!'), a date badge with calendar SVG icon showing wb-date-day and wb-date-full spans, and a wb-status-row with animated status dot indicating workspace readiness. Import WelcomeBanner.css.

As a frontend developer, implement the TaskStats section for the Dashboard page. Uses useState for mounted and a useEffect with an 80ms setTimeout to trigger a CSS width animation on mount. Renders a STATS array of 3 cards (Total Tasks/24, Completed/17 at 71%, In Progress/7 at 29%) each with variant classes (ts-card--primary, ts-card--secondary, ts-card--accent), decorative ts-card-bar and ts-card-blob elements, an SVG icon, label, large number display, and an animated progress bar whose width transitions from '0%' to the stat's progressPct value only after mounted becomes true. Import TaskStats.css.

As a frontend developer, implement the QuickAddTask section for the Dashboard page. Uses useState for value, submitted, and lastAdded; uses useRef for inputRef and successTimer. handleSubmit trims input, sets lastAdded, clears value, sets submitted=true, and auto-resets submitted after 2800ms via successTimer ref (cleaned up on unmount). handleKeyDown triggers submit on Enter. handleSuggestion fills the input from SUGGESTIONS chips (4 items: 'Review project plan' 📋, 'Send weekly update' 📧, 'Schedule team sync' 📅, 'Update task priorities' 🎯). Renders a controlled text input with aria-label, maxLength=200, and a disabled-when-empty 'Add Task' button with arrow SVG. Shows a qat-success status message with aria-live='polite' when submitted is true. Import QuickAddTask.css.

As a frontend developer, implement the TaskListContainer section for the Dashboard page. Uses useState for tasks (INITIAL_TASKS array of 10 items across Work/Health/Personal/Learning/Finance categories) and manages toggle-complete, inline edit, and delete interactions. Implements isOverdue(due, completed) comparing against TODAY constant '2026-05-12', formatDue() for month-day display, and groupByCategory() to bucket tasks. Each task card renders: a custom CheckboxIcon SVG checkbox, priority badge (high/medium/low), category chip, due date with overdue styling, PencilIcon edit button, and TrashIcon delete button. Supports an inline edit mode with a controlled input and save/cancel actions. Groups tasks by category with collapsible group headers showing category task counts. Import TaskListContainer.css.

As a frontend developer, implement the TaskFilters section for the Dashboard page. Uses useState for activeFilter (default 'all'), activeSort (default 'date'), and sortDesc (boolean). Renders FILTER_PILLS array (All/24, Completed/9, In Progress/11, Overdue/4) as toggle buttons with variant classes (tf-pill-all, tf-pill-completed, tf-pill-inprogress, tf-pill-overdue) and active state styling. Renders SORT_OPTIONS array (A–Z with text SVG, Date with calendar SVG, Priority with star SVG) as sort toggle buttons; clicking the already-active sort flips sortDesc to toggle ascending/descending, otherwise switches sort key. Shows a result count derived from the active filter's count value. AscIcon SVG indicates sort direction. Import TaskFilters.css.

As a frontend developer, implement the Footer section for the Dashboard page. This component (shared with Landing page — may already exist) uses useRef for canvasRef and animFrameRef. A useEffect initializes an HTML5 canvas animation with 80 twinkling stars: each star has randomized x/y position, radius (0.3–1.8), alpha (0.2–0.8), speed, and phase; the draw loop uses requestAnimationFrame and Math.sin for twinkle effect with rgba fill. Handles DPR scaling and ResizeObserver for responsive canvas resizing with cleanup. Renders four link columns (Product, Company, Resources, Legal) each with 4 href entries, lucide-react social icons (Github, Twitter, Linkedin, Mail), and a copyright line. Import Footer.css and lucide-react.

As a frontend developer, implement the Navbar section for the TaskForm page. Reuse the Navbar component already built for the Dashboard page. The Navbar includes: scroll-aware state via useEffect (nb-scrolled class applied when window.scrollY > 12), a deep-todo SVG constellation logo linking to /Landing, desktop nav links mapping NAV_LINKS array (Landing, Dashboard, TaskList, TaskForm, TaskDetail, Categories) with active state detection via window.location.pathname, a desktop CTA button linking to /Dashboard with arrow SVG, and a mobile hamburger menu with animated open/close state. Styles are in Navbar.css with nb-root, nb-inner, nb-logo-link, nb-nav, nb-nav-link, nb-active, nb-cta class structure.

As a frontend developer, implement the Navbar section for the TaskList page. This component (Navbar.css imported) uses useState for menuOpen and scrolled states, useEffect to attach a passive scroll listener that toggles nb-scrolled class when window.scrollY > 12, and reads window.location.pathname to apply nb-active class to the current nav link. Renders a logo with an inline SVG constellation icon, desktop NAV_LINKS mapping to anchor tags for Landing/Dashboard/TaskList/TaskForm/TaskDetail/Categories, a 'Get Started' CTA button linking to /Dashboard, and a mobile hamburger button. Note: this component likely already exists from the Dashboard page (task fe290c50-3004-4cd1-a658-2770a6a88a48) — reuse or verify it matches.

Implement FastAPI backend endpoints for the Tasks resource. Required routes: GET /api/tasks (list with filtering by status, category, search query, pagination), POST /api/tasks (create), GET /api/tasks/{id} (retrieve), PUT /api/tasks/{id} (update title, description, priority, status, due_date, category_id, tags), DELETE /api/tasks/{id} (delete). Each task model includes: id, title, description, priority (low/medium/high), status (todo/inprogress/done), due_date, category_id (FK), tags (JSON array), created_at, updated_at. Used by: TaskList, TaskDetail, TaskForm, Dashboard frontend sections. Note: frontend tasks TaskListContent, TaskDetailSidebar, TaskDetailContent, TaskDetailActions, TaskDetailHeader, TaskFormInputSection, TaskPrioritySection, TaskDescriptionSection, TaskActionsSection, QuickAddTask, TaskListContainer should depend on this task once created.

As a frontend developer, implement the TaskFormHeader section for the TaskForm page. The component uses useState for activeTab ('details' | 'priority' | 'description') and saveStateIndex (0-2), and useEffect to cycle save states every 6 seconds (unsaved → saving → saved with setTimeout transitions at 1200ms and 2600ms). Renders a breadcrumb trail using BREADCRUMBS array (Dashboard → Tasks → New Task) with ChevronRight SVG separators. Displays a page icon with title 'Create New Task' and an animated save status badge using SAVE_STATES array with className switching (tfh-status-unsaved, tfh-status-saving, tfh-status-saved). Tab navigation renders TABS array (Task Details, Priority & Category, Description) each with unique SVG icons, applying tfh-tab-active on the selected tab. Styles in TaskFormHeader.css with tfh-root, tfh-inner, tfh-breadcrumb, tfh-tabs structure.

As a frontend developer, implement the Footer section for the TaskForm page. Reuse or reference the Footer component already built for the Dashboard page. The Footer features an animated HTML5 canvas starfield background (canvasRef, animFrameRef) rendering 80 twinkling stars using requestAnimationFrame — each star has random position, radius (0.3–1.8), alpha, speed, and phase for sinusoidal twinkle via Math.sin(time * s.speed * 2 + s.phase). ResizeObserver handles canvas resize with DPI scaling (devicePixelRatio). Four link columns: Product (Dashboard, Task Manager, Categories, Create Task), Company (About Us, Careers, Blog, Press Kit), Resources (Documentation, Getting Started, API Reference, Community), Legal (Privacy Policy, Terms of Service, Cookie Policy, Security). Social icons from lucide-react: Github, Twitter, Linkedin, Mail. Styles in Footer.css.

As a frontend developer, implement the TaskListHeader section for the TaskList page. This is a static header component (TaskListHeader.css imported) with a breadcrumb nav showing Dashboard → My Tasks using an SVG chevron separator, a main row containing a title block (icon badge with checklist SVG, h1 'My Tasks', subtitle text) and an actions bar with two anchor buttons: a secondary button linking to /Categories with a grid SVG icon and a primary button linking to /TaskForm with a plus SVG icon and an animated tlh-btn-primary-dot span. No state hooks used; purely presentational.

As a frontend developer, implement the TaskListFilters section for the TaskList page. Uses useState for activeStatus (default 'all') and activeCategories (default []). Renders two filter chip rows: a STATUS_FILTERS row (All/Active/Completed/Overdue with counts) where clicking sets activeStatus and applies tlf-chip--status-active, and a CATEGORY_FILTERS row (Work/Personal/Health/Learning/Finance with color dots and counts) where toggleCategory adds/removes keys from activeCategories array and applies tlf-chip--cat-active. When hasActiveFilters is true, renders a clear-all button and active filter badge pills showing activeStatusLabel and activeCategoryObjs. All chips use aria-pressed for accessibility.

As a frontend developer, implement the TaskListSearch section for the TaskList page. Uses useState for query and useRef for inputRef. handleChange is memoized with useCallback to update query; handleClear (also useCallback) resets query to '' and re-focuses inputRef. Renders a search wrapper with a lucide-react Search icon, a controlled text input with placeholder 'Search tasks by title or description...', a keyboard shortcut hint displaying '/' key, and a lucide-react X clear button that toggles tls-clear-visible class when hasQuery is true and sets tabIndex={-1} when not. A results hint div uses aria-live='polite' to announce search state, showing 'Searching for "query"' text with a dot and 'titles & descriptions' scope tag, all conditionally hidden via tls-hidden class.

As a frontend developer, implement the TaskListStats section for the TaskList page. Defines RADIUS=17 and CIRCUMFERENCE=2*PI*17 for SVG ring animation. Renders four StatCard components from STATS array (Total/Active/Completed/Overdue with counts 24/9/11/4 and percentages 100/37/46/17). Each StatCard uses useRef (fillRef) and useEffect to animate the SVG circle stroke-dashoffset from CIRCUMFERENCE (hidden) to getStrokeDashoffset(pct) via requestAnimationFrame on mount, creating a draw-in ring animation. Cards have variant-based CSS classes (tls-card--total/active/completed/overdue) and tls-icon-wrap variant classes for color theming. Includes inline SVG icons per stat type (calendar, clock, checkmark, warning triangle).

As a frontend developer, implement the TaskListContent section for the TaskList page. Manages a TASKS array of 8 mock tasks with fields: id, title, category, categoryKey, dueDate, priority, completed. Uses useState for tasks list and a dropdown open state tracked per task via useRef. formatDue() computes relative due labels (Overdue/Due today/Due tomorrow/date) with tlc-overdue and tlc-soon CSS classes. Renders task rows with: a checkbox toggle that marks completed (line-through styling), category color dot, task title, CalendarIcon+due date badge, priority badge (high/medium/low), and a DotsIcon menu button. The context menu (useRef for outside-click detection via useEffect) opens a dropdown with EditIcon (links to /TaskForm), DetailIcon (links to /TaskDetail), and DeleteIcon (removes task from state). Includes CalendarIcon, DotsIcon, EditIcon, and detail/delete icon sub-components.

As a frontend developer, implement the TaskListPagination section for the TaskList page. Uses useState for currentPage (default 1), perPage (default 10 from PER_PAGE_OPTIONS [10,20,50]), and jumpValue. TOTAL_TASKS=87. getPageNumbers() generates a smart page array with ellipsis ('...') entries: shows 1-5+ellipsis+total for early pages, 1+ellipsis+last-4 for late pages, or 1+ellipsis+neighbors+ellipsis+total for middle pages. goToPage() clamps to [1, totalPages]. Renders: a 'Showing X–Y of 87 tasks' info label, Prev/Next buttons (disabled at boundaries) with SVG chevrons, page pill buttons with tlp-page-active class and aria-current='page', ellipsis spans, a per-page select dropdown, and a jump-to-page input with Enter key and button handler.

As a frontend developer, implement the TaskListEmptyState section for the TaskList page. Uses Three.js (import * as THREE) with useRef for mountRef, rendererRef, frameRef, sceneRef, groupRef. On mount, creates a WebGLRenderer with alpha:true appended to mountRef container. Builds a 3D scene with: a central SphereGeometry (r=0.55, MeshStandardMaterial color #E8F0FE, opacity 0.7), a TorusGeometry ring (r=1.1, tube=0.03, MeshBasicMaterial #1A73E8, rotated Math.PI/3 on X), a second tilted TorusGeometry ring (r=1.4, tube=0.02, #FF7043, rotated PI/6 X + PI/4 Y), and 60 scattered star Points using BufferGeometry with spherically-distributed positions at r=1.6–2.4. Animation loop rotates the group. Cleanup cancels animationFrame and disposes renderer. Overlaid HTML shows an empty-state message with CTA button linking to /TaskForm.

As a frontend developer, implement the Footer section for the TaskList page. Uses useRef for canvasRef and animFrameRef. Canvas background animation (Footer.css imported): on mount initializes 80 star objects with random x/y/radius/alpha/speed/phase, draws them each frame using requestAnimationFrame with a sinusoidal twinkle effect (0.5+0.5*sin(time*speed*2+phase)) in rgba(200,214,229,alpha), and attaches a ResizeObserver to reinitialize on container resize. Renders four link columns: Product (Dashboard/Task Manager/Categories/Create Task), Company, Resources, Legal — each with anchor tags. Social icons row uses lucide-react Github, Twitter, Linkedin, Mail components. Note: Footer component likely already exists from Dashboard page (task 689cae40-4f88-4032-98b8-4523b51b1a27) — reuse or verify it matches.

As a frontend developer, implement the Navbar section for the Categories page. This component may already exist from previous pages (TaskForm, TaskList). It uses `useState` for `menuOpen` and `scrolled`, and a `useEffect` scroll listener (passive, cleans up on unmount) that toggles class `nb-scrolled` on the `nav.nb-root` when `window.scrollY > 12`. Renders a logo link (`nb-logo-icon` with inline SVG of connected circles/lines, `nb-logo-text` with 'deep-todo'), a desktop nav mapping `NAV_LINKS` array (Landing, Dashboard, TaskList, TaskForm, TaskDetail, Categories) with active class based on `window.location.pathname`, a desktop CTA button linking to `/Dashboard`, and a mobile hamburger button toggling `menuOpen` to show/hide a mobile drawer. Import and apply `Navbar.css`. Depends on TaskList page Navbar task `af0ba2da-f9e5-4e75-b959-c1faf5b8e1ae` to establish page-level chain.

As a frontend developer, implement the Navbar section for the TaskDetail page. This component may already exist from previous pages (TaskList, TaskForm, Categories). It uses `useState` for `menuOpen` and `scrolled`, and a `useEffect` scroll listener that sets `scrolled` when `window.scrollY > 12`, toggling the `nb-scrolled` CSS class on `nav.nb-root`. Renders a logo link with an inline SVG node-graph icon, desktop nav links (NAV_LINKS array with active state based on `window.location.pathname`), a CTA button, and a mobile hamburger toggle. Import and apply `Navbar.css`. Depends on TaskList Navbar task for page-level chaining.

Implement GET /api/dashboard/stats FastAPI endpoint returning aggregated task statistics used by Dashboard page. Response should include: total_tasks, completed_tasks, in_progress_tasks, overdue_tasks (due_date < today AND status != done), completion_percentage, tasks_by_category (array of {category_id, name, color, total, completed}), recent_tasks (last 10 by created_at). This feeds TaskStats, TaskFilters, DashboardSidebar, and WelcomeBanner components. Note: Dashboard frontend tasks should depend on this endpoint.

As a frontend developer, implement the TaskFormInputSection for the TaskForm page. Uses useState for title (max 120 chars via MAX_TITLE_LENGTH), tags array (max 8), tagInput string, titleFocused and tagsFocused booleans, plus useRef for tagInputRef. Title field shows character counter (tfis-char-counter) when title.length > 84 (70% of 120), with live charLeft display. Tags input supports Enter/comma to add tags, Backspace to remove last tag, and click-to-remove on individual tag chips. SUGGESTED_TAGS ('Work', 'Personal', 'Urgent', 'Later', 'Research', 'Meeting') are rendered as suggestion chips filtered to exclude already-added tags, clickable via addSuggestedTag(). Focus state toggles tfis-field-active class. An accent stripe div (tfis-accent-stripe) decorates the section. Styles in TaskFormInputSection.css.

As a frontend developer, implement the TaskCategorySection for the TaskForm page. Uses useState for categories (INITIAL_CATEGORIES array: work, personal, health, learning, finance, home with hex colors), selectedId ('work' default), showAddForm boolean, newCategoryName string, and selectedSwatchId ('blue' default). Renders category chips as buttons with tcs-chip and tcs-chip--selected classes, each displaying a colored dot using inline style from cat.color. A 'Manage Categories' link navigates to /Categories with arrow SVG. The add form (conditionally rendered via showAddForm) includes a text input for category name and SWATCH_COLORS color picker (6 swatches: blue, coral, amber, green, purple, teal). handleConfirm() creates a new category with Date.now() id and appends to categories array. handleKeyDown supports Enter to confirm and Escape to cancel. Styles in TaskCategorySection.css with tcs-root, tcs-chips, tcs-chip structure.

As a frontend developer, implement the TaskDescriptionSection for the TaskForm page. Uses useState for description text (MAX_CHARS: 2000, WARN_THRESHOLD: 1800), preview mode toggle, and useRef for textarea. Rich text toolbar renders three button groups: FORMAT_BUTTONS (bold, italic, underline with Ctrl+B/I/U keyboard shortcuts), LIST_BUTTONS (bullet-list, numbered-list), and EXTRA_BUTTONS (link, code). Each toolbar button uses useCallback for its handler to insert markdown-style syntax at cursor position via textarea selectionStart/selectionEnd manipulation. Character counter changes color/style when approaching WARN_THRESHOLD. A preview toggle button switches between raw textarea and rendered markdown preview pane. The section label shows 'Description' with a decorative line. Styles in TaskDescriptionSection.css with toolbar, textarea, and preview pane layout.

As a frontend developer, implement the TaskPrioritySection for the TaskForm page. Uses useState for priority ('medium' default from PRIORITY_OPTIONS: low/medium/high) and dueDate string. Priority buttons render with modifier classes (tps-priority-btn--low, tps-priority-btn--medium, tps-priority-btn--high) and tps-priority-btn--active on selection, each with a tps-priority-dot span. Active priority description (activePriorityObj.desc) is displayed below the button group. Due date input uses a native date input with calendar SVG icon in tps-date-input-wrapper, and formatDateLabel() formats the selected date as 'Mon DD, YYYY' using en-US locale. A tps-grid layout places priority selector and date picker side by side. Section heading includes a star polygon SVG icon. Styles in TaskPrioritySection.css.

As a frontend developer, implement the CategoriesHeader section for the Categories page. Renders a `<header class='ch-root'>` with a `ch-inner` wrapper containing: (1) a breadcrumb `<nav>` (ch-breadcrumb) with a link to `/Dashboard` labeled 'Dashboard', a chevron SVG separator (`ch-breadcrumb-sep`), and a current page span reading 'Categories'; (2) a title row (`ch-title-row`) with a `ch-icon-badge` wrapping the lucide `<Layers />` icon and a `ch-title-text` `<h1>` reading 'Task <span class="ch-accent">Categories</span>'; (3) a subtitle row (`ch-subtitle-row`) with a `<p>` description and an `ch-info-pill` span containing the lucide `<Info />` icon and tip text 'Tip: assign categories when creating tasks'; (4) a decorative `ch-rule` bottom accent div. Import lucide-react `Info` and `Layers`. Import and apply `CategoriesHeader.css`.

As a frontend developer, implement the CategoriesFilter section for the Categories page. Uses `useState` for `activeId` (init 'all'). Defines a `CATEGORIES` array of 5 objects (all/work/personal/shopping/health) each with id, label, hex color, and count. Renders a `<section class='cf-root'>` with a `cf-inner` containing: (1) a scrollable chip row (`cf-chips-scroll`, role='group') mapping CATEGORIES to `<button>` elements with class `cf-chip` + `cf-chip-active` when active, `aria-pressed`, and for non-'all' entries a `cf-chip-dot` span styled with `backgroundColor` from `cat.color` (or white when active) plus a `cf-chip-count` span; (2) a conditional `cf-active-label` span with `aria-live='polite'` shown when not 'all' active; (3) a `cf-divider`; (4) a clear button (`cf-clear-btn` + `cf-clear-hidden` when 'all' active) with an X SVG and `tabIndex={isAllActive ? -1 : 0}` that calls `handleClear` to reset to 'all'. Import and apply `CategoriesFilter.css`.

As a frontend developer, implement the CategoriesGrid section for the Categories page. This is the most complex section, using `useState` for expanded/selected card state. Defines `CATEGORIES_DATA` array of 6+ category objects each with id, name, description, icon emoji, accentColor, iconBg, badgeBg, badgeColor, totalTasks, completedTasks, and a `recentTasks` array (each with id, name, done bool, priority string). Renders a CSS grid of category cards — each card displays: the emoji icon in a styled badge (`iconBg` background), category name and description, a progress bar derived from `completedTasks/totalTasks`, a task count badge, and a list of up to 3 `recentTasks` each showing a checkbox indicator (done state), task name, and priority badge. Cards likely support click/expand interactions to reveal full task lists. Priority styling maps 'high'/'medium'/'low' to distinct colors. Import and apply `CategoriesGrid.css` (11.6KB CSS indicates rich card styling with hover states and responsive grid layout).

As a frontend developer, implement the CategoriesStats section for the Categories page. Defines `CATEGORY_TASK_DATA` array of 5 items (Work/Personal/Health/Learning/Finance) each with name, count, and hex color. Computes `MAX_COUNT` via `Math.max`. Renders a `<section class='cs-root'>` with `cs-inner` containing: (1) a `cs-heading` row with a `cs-heading-dot` accent and 'Overview' label; (2) a `cs-grid` with 5 stat cards — Card 1 (cs-card): lucide `<Folder />` icon + value '12' in `cs-value-accent` + label 'Total Categories'; Card 2: lucide `<CheckSquare />` + '104' + 'Total Tasks'; Card 3 (cs-chart-card, spans 2 cols on mobile): lucide `<BarChart2 />` + 'Tasks by Category' title + `cs-chart-wrap` mapping `CATEGORY_TASK_DATA` to bar rows each with `cs-bar-label`, `cs-bar-track`/`cs-bar-fill` (width set inline as `(count/MAX_COUNT)*100%`), and `cs-bar-count`; Card 4: lucide `<Star />` + 'Work' most-used name + '34 tasks' sub + `cs-badge` with star icon; Card 5: avg tasks per category stat. Import lucide-react icons. Import and apply `CategoriesStats.css`.

As a frontend developer, implement the CategoriesActions section for the Categories page. Renders a `<section class='cta-root'>` with `cta-inner` containing: (1) a `cta-divider` horizontal rule; (2) a `cta-label` paragraph reading 'Quick Actions'; (3) a `cta-btn-row` with two anchor elements — a primary CTA (`cta-btn-primary`) linking to `/Categories` with a plus SVG icon (`cta-btn-primary-icon`) labeled 'Create New Category', and a secondary button (`cta-btn-secondary`) linking to `/Categories` with a lines+arrow SVG icon labeled 'Manage Category Order'; (4) a `cta-icon-row` with three icon-text anchor buttons (`cta-icon-btn`) — 'Add Task' linking to `/TaskForm` with a document+plus SVG, 'View All Tasks' linking to `/TaskList` with a list SVG, and 'Go to Dashboard' linking to `/Dashboard` with a rectangles/grid SVG. All links use inline SVGs with `viewBox='0 0 24 24'`. Import and apply `CategoriesActions.css` (5.7KB CSS for hover/active states on all button variants).

As a frontend developer, implement the Footer section for the Categories page. This component may already exist from previous pages (Dashboard, TaskForm, TaskList). Uses `useRef` for `canvasRef` and `animFrameRef`. A `useEffect` initializes an HTML5 canvas starfield animation: sets up 80 stars (each with x, y, r, alpha, speed, phase), uses `requestAnimationFrame` for a `draw` loop that renders twinkling stars via `Math.sin(time * s.speed * 2 + s.phase)` modulating alpha, handles DPR scaling, and uses a `ResizeObserver` on the canvas to re-init stars on resize — all cleaned up on unmount. Renders the canvas as a background layer. Below it, renders 4 link column arrays (Product/Company/Resources/Legal) each with a title and 4 `<a>` links, plus social icon links using lucide-react `Github`, `Twitter`, `Linkedin`, `Mail` icons, and a copyright line. Import and apply `Footer.css`.

As a frontend developer, implement the TaskDetailHeader section for the TaskDetail page. Renders a `<header class='tdh-root'>` containing: (1) a breadcrumb `<nav>` with an `<ol class='tdh-breadcrumb'>` mapping the BREADCRUMBS array (Dashboard → TaskList → TaskDetail), rendering links for crumbs with `href` and a `<span aria-current='page'>` for the last crumb, separated by inline `ChevronRight` SVG components; (2) a `tdh-title-row` containing a back-button `<a href='/TaskList'>` with an `ArrowLeft` SVG, and a `tdh-title-content` block rendering the task `<h1 class='tdh-title'>` and a `tdh-badges` row with three badge spans — status badge (`tdh-badge--in-progress` with a dot indicator), priority badge (`tdh-badge--high`), and category badge (`tdh-badge--category`). Import and apply `TaskDetailHeader.css`. Independent of other content sections on this page.

As a frontend developer, implement the TaskDetailContent section for the TaskDetail page. Uses `useState` for `subtasks` (initialized from INITIAL_SUBTASKS array of 6 items with `done` booleans) and `notes` (string). Implements `toggleSubtask(id)` to flip `done` state on a subtask by id. Derives `doneCount`, `total`, and `progressPct` for the subtask progress bar. Renders a `<section class='tdc-root'>` with: (1) a description block using `FileText` lucide icon and the TASK_DESCRIPTION string; (2) a subtask block using `CheckSquare` icon, displaying a progress bar (`progressPct`%), and mapping `subtasks` to interactive checkboxes that call `toggleSubtask` on click with visual strike-through for completed items; (3) a metadata block using `Info` icon and mapping METADATA key-value pairs; (4) a category tags block mapping CATEGORY_BADGES with variant-specific CSS classes; (5) a notes `<textarea>` block with `StickyNote` icon. Import and apply `TaskDetailContent.css`. Can be built in parallel with TaskDetailSidebar and TaskDetailActions.

As a frontend developer, implement the TaskDetailSidebar section for the TaskDetail page. Uses `useState` for `priority` (init 'medium'), `status` (init 'inprogress'), `category` (init 'work'), `dueDate` (init '2026-05-20'), and `saved` (bool). Derives `isOverdue` by comparing `dueDate` to today's ISO date when status is not 'done'. Derives `progress` as 100/60/0 based on status. Implements `handleSave()` that sets `saved` to true then resets after 2500ms. Renders an `<aside class='tds-root'>` with grouped controls: (1) Status — row of STATUSES buttons using `aria-pressed` and `tds-status-dot` indicator; (2) Progress — a labeled progress track with `tds-progress-fill` width driven by `progress%`; (3) Priority — row of PRIORITIES buttons with colored classes; (4) Category — grid of CATEGORIES buttons with emoji icons and colored classes; (5) Due Date — `<input type='date'>` with overdue warning using `AlertCircle` lucide icon; (6) Save button with `Check` icon and `Save` lucide icon, transitioning to a saved confirmation state. Import and apply `TaskDetailSidebar.css`. Can be built in parallel with TaskDetailContent and TaskDetailActions.

As a frontend developer, implement the TaskDetailActions section for the TaskDetail page. Uses `useState` for `showMoreMenu` (bool), `showDeleteConfirm` (bool), and `toast` ({visible, message, type}). Uses `useRef` for `moreRef` (more-menu DOM node) and `toastTimerRef` (timeout ref). Implements a `useEffect` click-outside handler on `document` that closes the more menu when clicking outside `moreRef`. Implements `showToast(message, type)` that sets toast visible with auto-dismiss after 2800ms via `toastTimerRef`. Action handlers: `handleEdit` → navigates to `/TaskForm`; `handleDuplicate` → shows success toast; `handleDeleteRequest` → closes more menu, shows delete confirm modal; `handleDeleteConfirm` → hides modal, shows warning toast, then redirects to `/TaskList` after 1800ms; `handleArchive`, `handleShare` (uses `navigator.share` or clipboard fallback), `handlePrint` (`window.print()`), `handleMarkComplete`, `handleSetPriority`. Renders a `tda-primary-row` with Edit (`Edit3`), Duplicate (`Copy`), Delete (`Trash2`) buttons, a `tda-more-btn` (`MoreHorizontal`) that toggles a dropdown menu with Archive/Share/Print/MarkComplete/SetPriority items, a delete confirmation modal overlay, and an animated toast notification using icon map (`CheckCircle`/`Info`/`AlertTriangle`). Import and apply `TaskDetailActions.css`. Can be built in parallel with TaskDetailContent and TaskDetailSidebar.

As a frontend developer, implement the Footer section for the TaskDetail page. This component may already exist from previous pages (TaskForm, TaskList, Categories). Uses `useRef` for `canvasRef` (canvas DOM node) and `animFrameRef` (rAF handle). A `useEffect` sets up an animated star-field canvas: initializes 80 stars with random x/y/r/alpha/speed/phase values, runs a `draw(time)` loop using `requestAnimationFrame` that clears the canvas and redraws each star with a sinusoidal twinkle effect (`rgba(200,214,229,alpha)`), and uses a `ResizeObserver` on the canvas to reinitialize on resize. Renders a `<footer>` with the canvas background, four link columns (Product, Company, Resources, Legal) each mapping their respective link arrays, social icon links using `Github`/`Twitter`/`Linkedin`/`Mail` from lucide-react, and a bottom bar with copyright and tagline. Import and apply `Footer.css`. Depends on Navbar only.

As a frontend developer, implement the TaskActionsSection for the TaskForm page. Uses useState for isLoading, showErrors, showSuccess, showDeleteModal booleans, and isEditMode (true). handleSave() simulates async save with 1400ms setTimeout, randomly triggering error (40% chance) or success state; success auto-clears after 4000ms. Error banner (tas-errors, role='alert') renders MOCK_ERRORS list with AlertIcon SVG. Success banner renders CheckIcon with confirmation message. Delete confirmation modal (showDeleteModal) renders as an overlay with TrashIcon, warning text, and Confirm/Cancel buttons; handleDeleteConfirm() closes the modal. Action bar renders three buttons: Save (SaveIcon, loading spinner state), Cancel (CancelIcon, links to /TaskList), and Delete (TrashIcon, edit mode only). tas-divider separates actions from form content. Styles in TaskActionsSection.css.