TaskFlow — Production AI-Enhanced Task Management & Motion System

FlyRank AI Engineering Internship Capstone Submission
Live Web Application: https://capstone-project-final-two.vercel.app/
GitHub Repository: github.com/maaz2417/capstone-project
A production-ready, highly accessible, and resilience-tested Next.js web application integrating Claude 3.5 Sonnet token streaming, Generative UI tool execution, dynamic workload analytics, and motion-choreographed UI components.

---

🎯 1. Project Brief

Problem Statement

Modern software teams struggle with prioritization fatigue, ambiguous workload balances, and brittle web interfaces that break when AI model API streams fail or rate-limit. Standard AI chatbots return unstructured markdown text, forcing engineers to manually transcribe advice into actionable tasks.

Target Persona & Solution

TaskFlow is designed for technical leads, engineering managers, and individual developers. It provides an intuitive task management workspace paired with a live Claude 3.5 Sonnet AI Copilot. Rather than returning raw text, Claude executes structured tool calls that render interactive Generative UI score cards and workload distribution charts.

Why This Idea?

This project demonstrates the complete engineering spectrum learned over the 8-week internship: WCAG 2.1 AA accessibility, Framer Motion spring physics with zero layout thrash, structured LLM stream resilience with sabotage error testing, Vitest/Playwright automated test suites, and GitHub Actions CI automation.

---

🌐 2. Application Routes & Features

TaskFlow features 6 fully functional, production-ready pages:

Route	Page Name	Primary Capability	Key Components
/	Task Dashboard	Task CRUD, status toggling, search query, priority & category filtering, and modal task creation.	<SmartActionButton />, Filter Pills, Status Checkboxes
/chat	AI Streaming Chat	Live token-by-token streaming with Claude 3.5 Sonnet, prompt chips, and sabotage error triggers.	<StreamingChat />, <PriorityScoreCard />, <WorkloadChartCard />
/stats	Workload Analytics	Live velocity meters, hours estimation, SVG category distribution bars, and priority impact matrix.	Workload Metrics, SVG Category Bar Charts
/settings	Workspace Settings	Theme selector (Dark/Light/System), AI priority threshold slider, export task JSON backup, and API connection status.	Theme Toggles, JSON Backup Exporter
/health	System Diagnostics	Live API route ping (/api/health), latency benchmark (ms), Vitest metrics, Playwright status, and Sabotage test controls.	Diagnostic Cards, Sabotage Trigger Pills
/tasks/[id]	Task Detail View	Dedicated task inspection, inline task edit modal, deletion, and quick "Analyze with Claude AI" trigger.	Task Details, Edit Modal

---

🏗️ 3. Architecture & System Overview

capstone-project/
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── layout.tsx                # Root layout wrapped in TasksProvider
│   │   │   ├── page.tsx                  # Task Dashboard (CRUD, search, filters)
│   │   │   ├── chat/page.tsx             # AI Chat & Generative UI Tool Execution
│   │   │   ├── stats/page.tsx            # Productivity & Workload Analytics
│   │   │   ├── settings/page.tsx         # Preferences, Theme & Data Export
│   │   │   ├── health/page.tsx           # System Health & Sabotage Control Panel
│   │   │   ├── tasks/[id]/page.tsx       # Detailed Task Inspection & Edit View
│   │   │   └── api/
│   │   │       ├── chat/route.ts         # Claude 3.5 Sonnet streaming & tool calls
│   │   │       └── health/route.ts       # Route health ping endpoint
│   │   ├── components/
│   │   │   ├── ui/
│   │   │   │   └── smart-action-button.tsx # 5-state motion button lifecycle
│   │   │   ├── chat/
│   │   │   │   ├── streaming-chat.tsx    # Vercel AI SDK chat container
│   │   │   │   ├── motion-showcase.tsx   # Interactive reviewer button showcase
│   │   │   │   └── tools/
│   │   │       │   ├── priority-score-card.tsx # Generative UI priority card
│   │   │       │   └── workload-chart-card.tsx  # Generative UI SVG workload chart
│   │   │   └── nav-bar.tsx               # Sticky header navigation bar
│   │   └── lib/
│   │       ├── tasks-store.tsx           # Shared Task Data Context & LocalStorage
│   │       └── ai/                       # AI system prompts and Zod tool schemas
│   ├── e2e/
│   │   └── chat-flow.spec.ts             # Playwright cross-browser E2E suite
│   ├── vitest.config.ts                  # Vitest JSDOM testing configuration
│   └── playwright.config.ts              # Playwright cross-browser configuration
├── .github/
│   └── workflows/ci.yml                  # GitHub Actions CI workflow
└── vercel.json                           # Vercel deployment configuration

---

🧠 4. AI Integration Deep-Dive

Model & Streaming Engine

• Provider: Vercel AI SDK (ai/react useChat) + Anthropic Claude 3.5 Sonnet (@ai-sdk/anthropic).
• Streaming Handlers: Uses Server-Sent Events (SSE) to render incoming text token-by-token with zero lag.

Generative UI Tool Calling Schemas

Claude is equipped with two custom Zod-validated tools defined in src/lib/ai/tools.ts:

1. score_task_priority: Evaluates task parameters and returns a score (0–100), Eisenhower Matrix quadrant, effort-to-impact ratio, and sprint allocation strategy.
2. audit_workload_distribution: Analyzes active category workloads and returns total estimated hours, SVG progress bar data, and burnout risk alerts.

---

⚡ 5. "Buttons with a Brain" State Choreography

The <SmartActionButton /> manages a 5-state lifecycle:

1. idle: Resting state with gradient accent glow and label.
2. hover / focus: scale: 1.02, y: -1 transform + visible focus ring (focus-visible:ring-2).
3. loading: Label slides down (y: 10, opacity: 0), active spinner enters (y: 0, opacity: 1) without layout shift.
4. success: Checkmark badge pop with emerald green transition (bg-emerald-500), auto-resetting after 1.8s.
5. error: 8-frame horizontal error shake with red alert badge (bg-red-500).

Motion Engineering & Accessibility

• Spring Physics: stiffness: 400, damping: 25 (cubic-bezier(0.16, 1, 0.3, 1)). Animates compositor-friendly properties only (transform & opacity).
• Reduced Motion: Respects prefers-reduced-motion via useReducedMotion(). When enabled, physical shake keyframes are safely bypassed while visual color badges remain clear.

---

🧪 6. Testing & Quality Assurance

Vitest + React Testing Library (13 Component Tests)

npx vitest run

• streaming-chat.test.tsx: Onboarding empty state, message history, sabotage test toggles, and stream error retry recovery.
• priority-score-card.test.tsx: Generative UI score card rendering, priority tier badges, Eisenhower matrix quadrants, and return ratios.
• smart-action-button.test.tsx: 5 lifecycle states (idle, loading, success, error, disabled) and user click events.

Playwright E2E Testing

npx playwright test

• Mocks AI streaming routes for fast, deterministic E2E execution.
• Tests primary onboarding flow, prompt chip selection, motion showcase state morphs, and sabotage error recovery (500 Err -> retry).

---

📊 7. Performance & Accessibility Audit

• Lighthouse Performance Score: 95+ on Mobile & Desktop.
• WCAG 2.1 AA Compliance:
  • Accessible ARIA labels (aria-label, aria-expanded, aria-describedby) on all interactive buttons and modals.
  • High-contrast text colors (text-foreground, text-accent) exceeding 4.5:1 contrast ratios over dark background surfaces.
  • Semantic HTML structure (<header>, <nav>, <main>, <h1> hierarchy).
  • Keyboard navigation operability across all forms, filters, and modal dialogs.
• Audit Improvement Made: Replaced raw color-only badges with dual text+icon badges and implemented useReducedMotion() to safely bypass physical shake animations for users with motion sensitivity.

---

🚀 8. Quick Start & Local Setup

# 1. Clone the repository
git clone https://github.com/maaz2417/capstone-project.git
cd capstone-project/frontend

# 2. Install dependencies
npm install

# 3. Start local development server
npm run dev

Open http://localhost:3000 in your browser.

---

📋 9. Production Deployment & Operations

• Live URL: https://capstone-project-final-two.vercel.app/
• CI Pipeline: GitHub Actions (.github/workflows/ci.yml) runs npm ci, npm run build, and npx vitest run on every push and pull_request to main.
• Error Boundaries: Next.js route error boundaries catch unexpected runtime errors and display fallback recovery views.
• Rollback Plan: Deployment rollbacks can be executed instantly via Vercel Dashboard or by redeploying the previous green commit hash (git checkout <hash> && git push origin main).

---

📝 10. Engineering Reflection

What Was Hardest? Why?

Managing state choreography during network stream interruptions was the most intricate challenge. Balancing Vercel AI SDK's useChat hook state with custom error boundaries, sabotage header triggers, and Framer Motion layout transitions required careful synchronization to avoid race conditions or flickering layout shifts.

What Would You Do Differently Next Time?

Next time, I would introduce optimistic UI updates for task creation and tool results prior to receiving full SSE response frames. This would give the user an instantaneous visual feedback loop while the LLM processes in the background.

One Thing Learned That Surprised You

I was surprised by how significantly compositor-friendly animations (transform and opacity) improve UI smoothness compared to animating height or padding. Restricting Framer Motion transitions to transforms completely eliminated browser layout thrash and ensured butter-smooth 60fps state transitions across both desktop and mobile web viewports.