Skip to content

About

TaskFlow — an AI-powered, real-time task management platform: a glassmorphic Kanban board with threaded comments, live activity timelines, and AI that breaks down tasks, triages your notes, and writes sprint summaries.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

🚀 TaskFlow

An AI-powered, real-time task management platform for modern teams.

Plan, track, and ship work on a glassmorphic Kanban board — with threaded discussions, live activity timelines, and AI that breaks down tasks, triages your notes, and writes your sprint summaries.


Next.js React TypeScript Tailwind CSS Prisma PostgreSQL Auth.js OpenRouter


✨ Overview

TaskFlow is a full-stack, production-ready task management system built on the Next.js App Router. It pairs a premium, dark-mode glassmorphic UI with a type-safe backend of Server Actions, optimistic updates, and role-based access control — then layers on genuinely useful AI features via OpenRouter.

🎯 Features

🗂️ Core task engine

  • Kanban board with drag-and-drop (plus a click-to-move fallback) that updates status instantly.
  • List and Calendar views that switch smoothly from a unified state bar.
  • Instant client-side filtering & search — by keyword, priority, assignee and due date.
  • Full CRUD via Server Actions with optimistic UI and react-hook-form
    • zod validation, so every action feels immediate.

👥 Team collaboration

  • Team workspaces with secure, unique invite codes (create / join / regenerate).
  • Member portal showing avatars, roles, and each teammate's active task load.
  • Slide-out task details panel with a threaded comment section and an activity timeline that reads from the audit log (e.g. "Ali moved Fix the login auth bug to IN_REVIEW").

🤖 AI features (OpenRouter)

  • AI Task Breakdown — turn a broad task into an actionable subtask checklist.
  • Smart Triage — type casually ("Fix auth bug by Friday, high priority, assign to Ali") and AI extracts a structured task to pre-fill the form.
  • Sprint Summary — a manager-only executive standup generated from the past week's activity.
  • Resilient model fallback chain (free models → robust paid backstop) so the features degrade gracefully.

🛡️ Production posture

  • strict TypeScript with zero any in application code.
  • Error boundaries (error.tsx, global-error.tsx) + a custom 404 with polished screens.
  • Route-level loading skeletons for the board, list and teams.
  • Security headers (nosniff, SAMEORIGIN, referrer & permissions policies) and X-Powered-By disabled.

🧱 Tech stack

Layer Technology
Framework Next.js 16 (App Router, Turbopack), React 19
Language TypeScript (strict)
Styling Tailwind CSS v4 + shadcn/ui + Framer Motion
Database PostgreSQL (Neon) via Prisma 7 + Neon driver adapter
Auth NextAuth.js (Auth.js v5) — Credentials + Google OAuth
Validation Zod + react-hook-form
AI OpenRouter (OpenAI-compatible chat completions)

⚡ Quick start

# 1. Install dependencies (also runs `prisma generate`)
npm install

# 2. Configure environment
cp .env.example .env        # then fill in the values

# 3. Sync the schema to your database
npm run db:push

# 4. (Optional) Seed a demo team with realistic data
npm run db:seed

# 5. Run it
npm run dev

Open http://localhost:3000. Unauthenticated traffic is redirected to /login — sign in with a demo account below, register a new one, or use Google.

🔐 Demo accounts

Running npm run db:seed creates the NexSoft Product Team with one admin and five working members (each with assigned tasks, comments and a week of activity).

Password for every account: password000

Role Name Email
👑 Admin Ayesha Khan ayesha.khan@nexsoft.dev
👤 Member Ali Raza ali.raza@nexsoft.dev
👤 Member Sana Malik sana.malik@nexsoft.dev
👤 Member Bilal Ahmed bilal.ahmed@nexsoft.dev
👤 Member Hina Sheikh hina.sheikh@nexsoft.dev
👤 Member Usman Tariq usman.tariq@nexsoft.dev

Team invite code: NEX7QMK2

⚠️ These are throwaway demo credentials for local/demo use only — never reuse them for anything real.

🗺️ Architecture

src/
  app/
    (auth)/                 # Public login & register
    (dashboard)/            # Protected shell: dashboard, board, teams, settings
      board/                # Kanban / List / Calendar workspace
    api/
      auth/[...nextauth]/   # NextAuth handlers
      register/             # Credentials sign-up (bcrypt)
    error.tsx               # Route error boundary
    global-error.tsx        # Root error boundary
    not-found.tsx           # Custom 404
  auth.ts / auth.config.ts  # NextAuth (Prisma adapter + edge-safe base config)
  proxy.ts                  # Edge route protection (Next 16 middleware successor)
  components/
    workspace/              # Board, views, task dialog, details panel, AI
    teams/                  # Team workspace & member portal
  lib/
    actions/                # Server Actions: task, team, comment, ai
    ai/openrouter.ts        # OpenRouter client + model fallback
    data/                   # Server-only data access
    rbac.ts                 # Role-Based Access Control guards
    validations/            # Zod schemas
  generated/prisma/         # Generated Prisma client (gitignored)

Auth & RBAC — Credentials (bcrypt) + Google OAuth over a JWT session carrying the user id and role. proxy.ts bounces unauthenticated traffic to /login. Only ADMIN / MANAGER can create teams, manage roles, or run the sprint summary — enforced server-side in every action.

Data model — User, Team, Task, Comment (threaded), ActivityLog, plus the Auth.js tables. See prisma/schema.prisma.

🧩 Scripts

Script Description
npm run dev Start the dev server
npm run build prisma generate + production build
npm run start Run the production build
npm run lint Run ESLint
npm run db:push Push the Prisma schema to the database
npm run db:seed Seed the demo team & data
npm run db:studio Open Prisma Studio

☁️ Deploy to Vercel

  1. Push to GitHub and import the repo in Vercel (Next.js auto-detected).
  2. Add the environment variables below in Settings → Environment Variables (see .env.example).
  3. Deploy — the build runs prisma generate && next build.
Variable Notes
DATABASE_URL Neon pooled connection string (?sslmode=require).
AUTH_SECRET Random 32+ byte secret (npx auth secret).
AUTH_TRUST_HOST true — lets Auth.js infer the host on Vercel.
AUTH_GOOGLE_ID Google OAuth client id.
AUTH_GOOGLE_SECRET Google OAuth client secret.
OPENROUTER_API_KEY OpenRouter key for the AI features.

AUTH_URL / NEXTAUTH_URL are optional on Vercel when AUTH_TRUST_HOST=true. For Google OAuth in production, add https://<your-domain>/api/auth/callback/google as an authorized redirect URI.


Built with Next.js, Prisma, and OpenRouter · TaskFlow

About

TaskFlow — an AI-powered, real-time task management platform: a glassmorphic Kanban board with threaded comments, live activity timelines, and AI that breaks down tasks, triages your notes, and writes sprint summaries.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages