A high-throughput, tactile engineering workspace bridging real-time telemetry, issue orchestration, and live Google Workspace architectural specifications.
✨ Live Demo • 🚀 Quick Start • 📐 System Architecture • 📄 Google Docs Hub • ⌨️ Shortcuts
TaskFlow is designed for modern engineering organizations that need deep operational visibility, zero-latency backlog triage, and immediate access to technical RFCs without leaving their development workflow.
Built with React 19, TypeScript, and Tailwind CSS v4, TaskFlow provides a high-density, dark-mode command canvas styled with industrial precision, live metric sliders, interactive real-time stream toggles, and seamless Google Docs & Drive API integration.
┌─────────────────────────────────────────────────────────────────────────────┐
│ TASKFLOW SYSTEM TOPOLOGY │
├─────────────────┬─────────────────────────────┬─────────────────────────────┤
│ COMMAND CORE │ BACKLOG & SPRINTS │ WORKSPACE DOCS HUB │
│ ──────────── │ ───────────────── │ ────────────────── │
│ • Velocity SLA │ • Status State Machine │ • OAuth 2.0 Identity │
│ • PR Stream │ • Subtask Tree Resolution │ • Drive RFC Directory │
│ • Node Health │ • Time-Tracking Chrono │ • Docs V1 Batch Mutations │
└─────────────────┴─────────────────────────────┴─────────────────────────────┘
- Real-Time Telemetry: Real-time burn-down metrics, sprint velocity tracking, and health status monitors.
- Dynamic Velocity & Capacity Sliders: Live calculative sliders that compute engineering burn days and reviewer capacity in real time.
- Node Diagnostics & Stream Controllers: Instant toggling between live event streaming and snapshot telemetry with feedback states.
- State Machine Management: Seamless status transitions (
BACKLOG,TODO,IN_PROGRESS,IN_REVIEW,DONE). - Granular Estimation & Subtasks: Track points, estimate hours, log time spent, and complete task checklists.
- Fast Search & Filter: Instant multi-criteria filtering by priority, label tags, assigned engineer, and sprint milestone.
- OAuth 2.0 Single Sign-On: Secure Firebase & Google Workspace authentication supporting popup verification and graceful dismissal.
- Live RFC & Technical Spec Reader: Direct streaming and parsing of remote Google Docs with full structure preservation.
- Document Generator: Instantly generate structured RFCs, Sprint Retrospectives, and API Contract specs in Google Drive.
- Safe Batch Mutation: Append architectural decisions and commit notes to Google Docs with built-in modal verification safeguards.
- Universal Palette (
⌘ + K/Ctrl + K): Instant search across all tasks, documents, sprints, and system views. - Tactile UI Transitions: Polished micro-interactions, hardware-accelerated animations, and responsive layouts.
High-density industrial design system optimized for dark mode engineering workflows
+-----------------------------------------------------------------------------------------+
| [⚡ TASKFLOW] Sprint 42 [Active] Velocity: 85 pts [⌘+K Search] (● Live Stream) |
+-----------------------------------------------------------------------------------------+
| [LIVE STREAM TOGGLE] [QUICK DISPATCH FORM] [VELOCITY TARGET SLIDER] |
| ● STREAM ACTIVE (PAUSE) [Input: Audit TLS...] [Send] [=====o=========] 85 PTS |
+----------------------------+-----------------------------+------------------------------+
| VELOCITY SLA: 94.2% | ACTIVE PRS: 12 | TEST COVERAGE: 88.4% |
| █▓▒░ [====> ] +14.2% | 3 Awaiting Architect Review | 142/142 Nodes Passing |
+----------------------------+-----------------------------+------------------------------+
| SPRINT BURNDOWN CHRONO | NODE HEALTH STATUS |
| 100 | \ | 🟢 auth-gateway-prod [99.9%]|
| 50 | \__.__ | 🟢 docs-sync-v1 [99.8%]|
| 0 +----------\---- | 🟢 telemetry-pipeline [100% ]|
+----------------------------------------------------------+------------------------------+
- Bento Telemetry Grid: 4-column responsive layout adapting fluidly from mobile to ultra-wide displays.
- Interactive Hardware Toggles: Live state switches, dynamic capacity calculation sliders, and quick action forms.
+------------------------------------+----------------------------------------------------+
| GOOGLE DOCS DIRECTORY (Drive API) | LIVE SPEC READER & REST APPEND |
+------------------------------------+----------------------------------------------------+
| 🔍 [Search Drive documents...] | RFC-104: Distributed Event Streaming Architecture |
| ➕ [+ Create New Tech RFC] | Document ID: 1aBcD_9981 • Rev: 42 • Google Docs v1 |
| | -------------------------------------------------- |
| 📄 RFC-104: Distributed Events | 1. Abstract & Scope |
| Updated 2h ago by Alex Chen | This RFC outlines Kafka & gRPC event delivery |
| 📄 Sprint 42 Retrospective | 2. Partitioning Strategy |
| Updated yesterday by Team | - Topic: taskflow.telemetry.events |
| 📄 API Contract: Gateway V2 | 3. Security & Access Rules |
+------------------------------------+----------------------------------------------------+
- Master-Detail 2-Pane Workspace: Left pane lists indexed Google Drive RFC documents; right pane renders parsed live document sections with batch append capabilities.
+-----------------------------------------------------------------------------------------+
| [Filters: All Priority ▾] [Assignee: All ▾] [Sprint: 42 ▾] [+ New Issue (Key: C)] |
+---------+---------------------------------------------------+----------+---------+------+
| KEY | TITLE & LABELS | ASSIGNEE | POINTS | STAT |
+---------+---------------------------------------------------+----------+---------+------+
| TF-101 | Migrate event dispatch pipeline to Kafka topic | @alex | 8 pts | PROG |
| TF-102 | Add OAuth2 scope verification for Google Docs v1 | @sarah | 5 pts | DONE |
| TF-103 | Investigate intermittent WebSocket reconnect | @david | 3 pts | TODO |
+---------+---------------------------------------------------+----------+---------+------+
- Instant Keyboard Navigation: Hotkey triggers (
Cfor task creation,⌘+Kfor global search,1-5for tab navigation).
| Layer | Technologies | Purpose |
|---|---|---|
| Frontend Framework | React 19, React DOM 19 |
Concurrent rendering, modern hooks, zero-overhead DOM |
| Language | TypeScript 5.8 |
Strict end-to-end type safety and interface contracts |
| Build & Tooling | Vite 6.2, esbuild, tsx |
Instant HMR, lightning bundle speeds, modern ES module bundling |
| Styling & Theme | Tailwind CSS v4, @tailwindcss/vite |
Ultra-fast JIT styling, custom industrial dark theme |
| Icons & Visuals | lucide-react, Google Material Icons |
Crisp vector iconography |
| Cloud & Identity | Firebase v12 (Auth & Firestore) |
Client-side Google Identity Services (GIS) & persistence |
| External APIs | Google Docs API v1, Google Drive API v3 |
Real-time bi-directional workspace synchronization |
Ensure you have the following installed on your development machine:
- Node.js:
v20.0.0or higher - Package Manager:
npm,pnpm,yarn, orbun
git clone https://github.com/your-org/taskflow-dashboard.git
cd taskflow-dashboard# Using npm
npm install
# Or using Bun
bun installCopy the .env.example file and supply any relevant credentials:
cp .env.example .envnpm run devThe application will bind to http://localhost:3000 (or 0.0.0.0:3000).
npm run build ┌──────────────────────┐
│ Client UI Layer │
│ (React 19 + Vite) │
└──────────┬───────────┘
│
┌────────────────────────┼────────────────────────┐
▼ ▼ ▼
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────────┐
│ State Engine │ │ Auth Manager │ │ Google Docs Gateway │
│ (Tasks/Sprints) │ │ (Firebase / GIS) │ │ (Docs V1 / Drive V3)│
└────────┬─────────┘ └────────┬─────────┘ └──────────┬───────────┘
│ │ │
▼ ▼ ▼
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────────┐
│ Local / Memory │ │ Google Identity │ │ Google Cloud │
│ Synchronizer │ │ OAuth 2.0 Scope │ │ REST Endpoints │
└──────────────────┘ └──────────────────┘ └──────────────────────┘
To connect with Google Docs and Google Drive, TaskFlow uses the following official OAuth 2.0 scopes:
https://www.googleapis.com/auth/documents # Read and write Google Docs
https://www.googleapis.com/auth/documents.readonly # View Google Docs
https://www.googleapis.com/auth/drive # Manage Google Drive files
https://www.googleapis.com/auth/drive.file # Create & edit app-specific files
https://www.googleapis.com/auth/drive.readonly # Search and browse documents
├── .env.example # Template environment configuration
├── firebase-applet-config.json # Firebase client bootstrap
├── index.html # Main HTML5 entry canvas
├── metadata.json # Platform manifest and permissions
├── package.json # Node.js dependencies and scripts
├── src/
│ ├── App.tsx # Primary routing and application shell
│ ├── main.tsx # DOM bootstrap and entry render
│ ├── types.ts # Universal TypeScript definitions & data models
│ ├── index.css # Tailwind CSS imports and custom animations
│ ├── components/
│ │ ├── TopAppBar.tsx # Global header with status telemetry
│ │ ├── SideNavBar.tsx # Industrial sidebar navigation
│ │ ├── DashboardView.tsx # Metrics bento grid and interactive controls
│ │ ├── BacklogView.tsx # List and table views for issues
│ │ ├── TaskDetailView.tsx # Deep inspection modal with time logs & docs
│ │ ├── GoogleDocsView.tsx # Full Google Workspace Docs hub & RFC reader
│ │ ├── SprintsView.tsx # Sprint milestones & capacity planner
│ │ ├── ActivityFeedView.tsx # Real-time deployment & PR stream
│ │ ├── MyWorkView.tsx # Personalized developer focus view
│ │ ├── DocumentationView.tsx # Interactive documentation & README viewer
│ │ ├── CommandPalette.tsx # Global keyboard shortcut engine (⌘+K)
│ │ └── CreateTaskModal.tsx# Rapid task dispatch modal
│ └── lib/
│ ├── googleAuth.ts # Google OAuth2.0 authentication service
│ └── googleDocsService.ts # Google Docs & Drive REST API client
└── tsconfig.json # TypeScript compilation specifications
| Shortcut | Action | Scope |
|---|---|---|
| ⌘ + K / Ctrl + K | Open Universal Command Palette | Global |
| C | Create New Task / Issue | Global |
| ESC | Dismiss Modal / Close Palette | Active Overlay |
| 1 – 5 | Quick Navigate Tabs (Dashboard, Backlog, Docs, My Work, Activity) | Navigation |
Contributions are welcome! Follow these steps to contribute:
- Fork the Repository
- Create a Feature Branch (
git checkout -b feature/amazing-feature) - Commit your Changes (
git commit -m 'feat: Add amazing feature') - Push to the Branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please ensure all TypeScript checks pass before submitting:
npm run lintDistributed under the MIT License. See LICENSE for more information.
Crafted for High-Performance Engineering Teams • Built with React 19 & Google Workspace