TaskFlow

Open source project management for teams that ship.

Kanban boards, team collaboration, time tracking, and real-time notifications — self-hostable and free forever.

Live Demo · Report Bug · Request Feature

---

Features

• Kanban Boards — Drag & drop tasks across customizable columns with board, list, and table views
• Team Collaboration — Invite members via email, assign tasks, set roles (Owner, Admin, Member)
• Rich Comments — Notion-style rich text editor with @mentions, formatting, and code blocks
• Analytics Dashboard — Track project progress with visual charts and team productivity metrics
• Calendar View — Visualize all deadlines and milestones on a monthly calendar
• Time Tracking — Built-in timer and manual time entries per task
• Smart Notifications — Email, browser push, and webhook notifications for mentions, assignments, and deadlines
• Task Labels & Dependencies — Color-coded labels and task blocking/dependency tracking
• File Attachments — Upload files to tasks via Cloudflare R2 / S3-compatible storage
• Checklists — Subtask checklists within tasks with progress tracking
• Project Templates — Save and reuse task templates across projects
• Favorites & Bookmarks — Quick access to frequently used projects
• Admin Panel — User management dashboard with ban/delete capabilities and platform stats
• PWA Support — Install as a desktop/mobile app with service worker
• Dark Mode — Beautiful dark theme by default
• Fully Responsive — Works on desktop, tablet, and mobile

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Database	PostgreSQL + Prisma ORM
Auth	NextAuth.js v5 (Credentials)
Styling	Tailwind CSS v4 + Radix UI
Data Fetching	SWR with optimistic updates
Rich Text	TipTap with extensions
Drag & Drop	@hello-pangea/dnd
Charts	Recharts
Email	Nodemailer
Push Notifications	web-push (VAPID)
File Storage	Cloudflare R2 / S3-compatible
Icons	Lucide

Getting Started

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database (local or hosted — Neon, Supabase, Railway)

Installation

1. Clone the repository

   git clone https://github.com/taskflow-pm/taskflow.git
   cd taskflow
   npm install

2. Set up environment variables

   cp .env.example .env

   Open .env and fill in the required values. See Environment Variables for details.

3. Set up the database

   npx prisma db push

4. Start the development server

   npm run dev

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

Environment Variables

Copy .env.example to .env and configure:

Variable	Required	Description
DATABASE_URL	Yes	PostgreSQL connection string
AUTH_SECRET	Yes	NextAuth secret (run openssl rand -base64 32)
NEXTAUTH_URL	Yes	App URL (e.g., http://localhost:3000)
SMTP_HOST	Yes	SMTP server host for emails
SMTP_PORT	Yes	SMTP port (587 for TLS, 465 for SSL)
SMTP_USER	Yes	SMTP username
SMTP_PASS	Yes	SMTP password
SMTP_FROM	No	From address (default: TaskFlow <noreply@taskflow.app>)
NEXT_PUBLIC_VAPID_PUBLIC_KEY	No	VAPID public key for push notifications
VAPID_PRIVATE_KEY	No	VAPID private key for push notifications
R2_ENDPOINT	No	Cloudflare R2 / S3 endpoint URL
R2_ACCESS_KEY_ID	No	R2 / S3 access key
R2_SECRET_ACCESS_KEY	No	R2 / S3 secret key
R2_BUCKET	No	Storage bucket name (default: taskflow)
R2_PUBLIC_URL	No	Public URL for uploaded files
NEXT_PUBLIC_SITE_URL	No	Public site URL
CRON_SECRET	No	Secret for authenticating cron job requests

Generate VAPID Keys (for push notifications)

npx web-push generate-vapid-keys

Create an Admin User

After registering an account, promote it to admin:

ADMIN_EMAIL=your@email.com npx prisma db seed

Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint
npx prisma studio	Open Prisma database GUI
npx prisma db push	Push schema changes to database
npx prisma db seed	Seed admin user

Project Structure

taskflow/
├── prisma/
│   ├── schema.prisma          # Database schema
│   └── seed.ts                # Admin seed script
├── public/
│   ├── sw.js                  # Service worker (PWA)
│   └── icons/                 # App icons
├── src/
│   ├── app/
│   │   ├── page.tsx            # Landing page
│   │   ├── login/              # Login page
│   │   ├── signup/             # Registration with OTP
│   │   ├── dashboard/          # Main app pages
│   │   │   ├── page.tsx          # Dashboard home
│   │   │   ├── projects/         # Project management & Kanban
│   │   │   ├── analytics/        # Analytics dashboard
│   │   │   ├── calendar/         # Calendar view
│   │   │   ├── favorites/        # Bookmarked projects
│   │   │   ├── notifications/    # Notification center
│   │   │   └── settings/         # User settings & categories
│   │   ├── admin/              # Admin panel
│   │   └── api/                # API routes
│   ├── components/
│   │   ├── ui/                 # shadcn/ui components
│   │   ├── layout/             # Sidebar, mobile header
│   │   ├── comments.tsx        # Comment system with @mentions
│   │   ├── task-extras.tsx     # Labels, attachments, dependencies
│   │   └── time-tracker.tsx    # Time tracking component
│   ├── hooks/                  # Custom React hooks (SWR)
│   ├── lib/
│   │   ├── auth.ts             # NextAuth configuration
│   │   ├── prisma.ts           # Prisma client
│   │   ├── fetcher.ts          # SWR fetcher
│   │   └── notifications.ts    # Email & push helpers
│   └── middleware.ts           # Route protection
├── .env.example                # Environment variable template
├── CONTRIBUTING.md             # Contribution guidelines
├── LICENSE                     # MIT License
└── package.json

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the repository on Vercel
3. Add your environment variables in the Vercel dashboard
4. Deploy — Vercel auto-detects Next.js

Self-Hosted

1. Clone and install dependencies

2. Set up a PostgreSQL database

3. Configure .env with production values

4. Build and start:

   npm run build
   npm start

   The app runs on port 3000 by default.

Docker

Docker support is planned. Track progress in this issue.

Contributing

We welcome contributions of all kinds! Please see our Contributing Guide for details on:

• Setting up the development environment
• Our coding standards
• The pull request process

Quick links:

• Open an issue — report bugs or request features
• Start a discussion — questions or ideas
• Submit a PR — contribute code

License

This project is licensed under the MIT License — free for personal and commercial use.

Acknowledgements

• Next.js — The React framework
• shadcn/ui — Beautiful UI components
• Prisma — Type-safe database ORM
• TipTap — Headless rich text editor
• Radix UI — Accessible component primitives
• Lucide — Beautiful open source icons

---

Made with ❤️ by the TaskFlow community

If TaskFlow helps you, consider giving it a ⭐ on GitHub!