Task Flow

A full-stack team collaboration, real-time task management, and AI-powered productivity app with WebSockets, CRDT live editing, third-party integrations, and background reporting.

Live Demo

https://task-flow-omega-cyan.vercel.app/

---

Features

• Real-time Notifications (Socket.io) - WebSockets integration emitting instant notifications for task creation, status changes, assignments, new comments, and approaching due dates with an unread badge counter bell.
• Real-time Collaborative Editing (Yjs CRDT) - Conflict-free collaborative task description editing with live presence tracking ("Alice is editing..."), debounced database persistence, and offline edit resolution upon reconnect.
• Slack Integration for Project Updates - OAuth 2.0 flow connecting Slack workspaces with configurable per-project event triggers (Task Created, Status Changed, Due Date Warnings) posting rich Slack Block Kit cards.
• Google Calendar Sync - One-way due date sync pushing task due dates to Google Calendar. Automatically creates, updates, or deletes calendar events on task changes.
• Non-blocking PDF & CSV Exports - Export task datasets to CSV or formatted PDF summary reports with project completion stats, generated asynchronously via background jobs without blocking request threads.
• Encrypted Token Security - Integration access and refresh tokens are encrypted at rest in PostgreSQL using AES-256-GCM via ENCRYPTION_SECRET.
• Custom Views, Advanced Filtering & Sorting - Multi-criteria filtering (Assignee, Priority, Tag, Status, Due Date Range) and sorting (Due Date, Priority, Created Date, Custom Manual Order) with per-user Saved View presets.
• Task Discussion & Comments - Real-time thread comments on tasks with live activity logging.
• Authentication & Access Control - Email/password plus Google and GitHub login, JWT stored in httpOnly cookies, rate-limited signup/login (10 attempts / 15 min per IP), and project-membership checks enforced on every route and socket room join, not just the API layer.
• Productivity Analytics & AI Assistant - AI-powered project health summaries, workload distribution, and automated meeting action-item extraction powered by Google Gemini.
• Responsive & Modern UI - Raycast & Linear inspired dark/light aesthetics built with Tailwind CSS and Framer Motion.

---

Screenshots

Dashboard

AI Meeting Assistant

Analytics

Create Project

Pricing Plans

---

Architecture

• Frontend: React SPA built with Vite. State lives in Context/Hooks (AuthContext, SocketContext), routing is React Router, styling is Tailwind CSS.
• Backend: Node/Express API + Socket.io Server. Handles business logic, real-time event broadcasting, auth (JWT + OAuth), CRDT synchronization (Yjs), Slack & Google Calendar integrations, and background PDF/CSV export workers.
• Database: PostgreSQL (Neon.tech), accessed through Prisma ORM for type-safe queries and migrations.
• Security & Encryption: AES-256-GCM token encryption for third-party OAuth integration tokens at rest.
• External Services: Google & GitHub for OAuth, Google Calendar API, Slack API, Google Gemini for AI features.

flowchart TD
    subgraph Client
        React[React SPA]
        SocketClient[Socket.io Client & Yjs]
    end

    subgraph Server
        API[Express API]
        SocketServer[Socket.io Server & Yjs Sync]
        ExportWorker[Background Export Worker]
    end

    subgraph Database
        DB[(PostgreSQL + AES-256 Tokens)]
    end

    subgraph External Integrations
        OAuth[Google & GitHub OAuth]
        Slack[Slack Webhooks & API]
        GCal[Google Calendar API]
        Gemini[Google Gemini AI]
    end

    React <-->|REST / JSON| API
    SocketClient <-->|WebSockets / Real-time| SocketServer
    API <-->|Prisma ORM| DB
    ExportWorker <-->|Generate CSV & PDF| DB
    API <-->|Auth Tokens| OAuth
    API -->|Post Event Cards| Slack
    API <-->|Sync Due Dates| GCal
    API <-->|Prompts & Analytics| Gemini

Loading

---

AI Pipeline

1. Retrieve Context: When a user requests AI insights (like productivity analytics), the backend pulls relevant project data, task statuses, member workloads, and completion rates from PostgreSQL via Prisma.
2. Build Prompt: The retrieved context is formatted into a prompt along with user instructions or meeting transcripts.
3. Generate Insights: The prompt is processed by Gemini (gemini-2.5-flash), returning structured health scores, action items, or recommendations.
4. Parse & Render: The Express controller validates the JSON response and streams formatted insights back to the client interface.

flowchart TD
    User[User] -->|Action / Input| Client[Client Interface]
    Client -->|API Request| API[Backend API]
    
    subgraph Context Pipeline
        API -->|Context Query| DB[(PostgreSQL)]
        DB -->|Context Data| API
        API -->|Prompt + Context| Gemini[Google Gemini API]
    end
    
    Gemini -->|JSON Response| API
    API -->|Formatted Data| Client
    Client -->|Rendered UI| User

Loading

---

Known Limitations

Being upfront about what this doesn't do yet:

• Background export jobs run in-process (setImmediate), not on a real queue like BullMQ or Redis. That's fine for one server instance, but jobs won't survive a restart or spread across multiple instances.
• Socket.io runs without a Redis adapter, so real-time events only reach clients connected to the same server process. Horizontal scaling would break cross-instance broadcast.
• CI runs tests and a client build on Linux for every PR, but there's no branch protection rule enforcing it yet, so a direct push to main can still skip it. That gap is exactly how a case-sensitive import path (pdfmake/js/printer vs the real Printer.js) once passed locally on Windows and broke production on Render's Linux host.
• The client ships as a single ~1.2MB JS bundle with no route-based code splitting.
• Hosted on free tiers (Render + Neon), so the API cold-starts after inactivity.

---

Roadmap

Phase 1: Core & Real-time (Completed)

• WebSockets (Socket.io) for real-time notifications
• Real-time collaborative editing on task descriptions (Yjs CRDT)
• Advanced filtering, sorting, and per-user Saved Views on Kanban board

Phase 2: Integrations & Reporting (Completed)

• Slack workspace integration for real-time project updates
• Export projects and analytics to PDF summary reports & raw CSV datasets
• Google Calendar sync for task due dates
• Encrypted integration tokens at rest (AES-256-GCM)

Phase 3: Hardening & Scale

• Close authorization gaps: project-membership checks on socket room joins and comment routes, not just REST endpoints
• Rate-limit auth endpoints against brute-force attempts
• GitHub Actions CI: run tests and a Linux build on every PR
• Move background exports to a real job queue (BullMQ + Redis)
• Redis adapter for Socket.io so real-time events work across multiple server instances
• Code-split the client bundle by route

Phase 4: Advanced AI & Mobile

• AI forecasting for project completion timelines
• Automatic task assignment based on team workload
• Native mobile apps (React Native) for iOS and Android

---

Local Setup

Prerequisites

• Node.js 18+
• PostgreSQL (local or hosted, e.g. Neon or Railway)

1. Clone the repository

git clone https://github.com/MohammadAnas-07/Task-Flow.git
cd Task-Flow

2. Install server dependencies

cd server
npm install

3. Configure server environment

cp .env.example .env

Fill in .env:

DATABASE_URL=postgresql://user:password@localhost:5432/task-flow
JWT_SECRET=your-random-64-char-secret
ENCRYPTION_SECRET=your-32-byte-hex-secret-key
CLIENT_URL=http://localhost:5173
SERVER_URL=http://localhost:5000
NODE_ENV=development
PORT=5000

# OAuth Credentials
GOOGLE_CLIENT_ID=your_google_id
GOOGLE_CLIENT_SECRET=your_google_secret
GOOGLE_REDIRECT_URI=http://localhost:5000/api/integrations/google/callback
GITHUB_CLIENT_ID=your_github_id
GITHUB_CLIENT_SECRET=your_github_secret
SLACK_CLIENT_ID=your_slack_client_id
SLACK_CLIENT_SECRET=your_slack_client_secret

# AI Features
GEMINI_API_KEY=your_gemini_api_key

4. Database Setup

npx prisma db push

5. Install client dependencies

cd ../client
npm install

6. Start Development Servers

Terminal 1 (Server):

cd server
npm run dev

Terminal 2 (Client):

cd client
npm run dev

Visit http://localhost:5173

---

Running Tests

Execute full test suite (Socket.io integration + AES-256 token encryption & CSV export tests):

cd server
npm test

---

Tech Stack

Frontend:

• React 18 + Vite
• Socket.io-client & Yjs (CRDT real-time collab & presence)
• React Router v6 (createBrowserRouter)
• Tailwind CSS v3 & Framer Motion
• Axios (with auth interceptors)
• react-hot-toast & lucide-react

Backend:

• Node.js + Express.js
• Socket.io + Yjs CRDT synchronization
• PostgreSQL + Prisma ORM
• AES-256-GCM Token Encryption (crypto)
• express-rate-limit (brute-force protection on auth routes)
• pdfmake & json2csv (Reporting Engine)
• googleapis & Slack Webhook API
• JWT (httpOnly cookies) and OAuth 2.0 (Google, GitHub, Slack)
• Google Gemini API (@google/genai)
• Jest & Supertest (Unit & Integration tests)
• GitHub Actions (CI: tests + client build on every PR)

---

API Reference

Method	Path	Description	Auth
POST	/api/auth/signup	Create account, set cookie	No
POST	/api/auth/login	Login, set cookie	No
POST	/api/auth/logout	Clear cookie	No
GET	/api/auth/me	Get current user	Cookie
GET	/api/projects	List user's projects	✅
POST	/api/projects	Create project	✅
GET	/api/projects/:id	Get project + members	✅ Member
PUT	/api/projects/:id	Update project	✅ Admin
DELETE	/api/projects/:id	Delete project	✅ Admin
GET	/api/projects/:projectId/tasks	List tasks (filterable & sortable)	✅ Member
POST	/api/projects/:projectId/tasks	Create task (triggers Slack & Calendar sync)	✅ Member
PUT	/api/projects/:projectId/tasks/:taskId	Update task (triggers Slack & Calendar sync)	✅ Member/Admin
DELETE	/api/projects/:projectId/tasks/:taskId	Delete task	✅ Admin
GET	/api/projects/:projectId/saved-views	Get user saved views	✅
POST	/api/projects/:projectId/saved-views	Save filter+sort preset	✅
GET	/api/integrations/slack/authorize	Get Slack OAuth auth URL	✅
GET	/api/integrations/google-calendar/authorize	Get Google Calendar OAuth auth URL	✅
GET	/api/integrations/projects/:projectId	Get active project integrations	✅
PUT	/api/integrations/:id/events	Update integration event triggers	✅
DELETE	/api/integrations/:id	Disconnect integration	✅
POST	/api/exports/projects/:projectId	Trigger background CSV/PDF export job	✅
GET	/api/exports/download/:fileName	Download generated CSV/PDF file	✅ Owner/Member

---

License

MIT License.

Copyright (c) 2026 Mohammad Anas. See LICENSE for details.