Skip to content
BranchesTags

Repository files navigation

🚀 TaskFlow

Control your projects from day one.

A modern, full-stack project management platform built with Next.js — combining the simplicity of Trello with powerful task management capabilities.

Next.js React TypeScript Prisma Tailwind CSS License: MIT

Live Demo · Report Bug · Request Feature

📋 Table of Contents

🎯 About The Project

TaskFlow is an open-source, Kanban-style project management tool designed for teams and individuals who want a clean, intuitive way to organize work. It solves the problem of scattered task tracking by providing a centralized workspace where teams can create boards, manage lists, track cards with priorities and deadlines, and collaborate in real time.

Whether you're managing a software sprint, coordinating a marketing campaign, or planning personal goals — TaskFlow gives you the visual clarity and flexibility to stay on top of everything.

Why TaskFlow?

  • 🧩 Intuitive Kanban Boards — drag-and-drop lists and cards, just like you'd expect
  • 👥 Multi-Workspace Collaboration — invite team members with role-based access
  • 🔒 Secure by Default — full authentication with email/password, OAuth, and magic links
  • ⚡ Blazing Fast — built on Next.js 16 with React Compiler and server actions
  • 🎨 Beautiful UI — dark theme with a polished, modern design powered by Radix UI + Tailwind

✨ Features

Boards & Task Management

  • 📋 Create unlimited boards with Unsplash background images
  • 📝 Organize tasks with drag-and-drop lists (powered by @hello-pangea/dnd)
  • 🃏 Rich card detail view with title, description, status, priority, due dates, and member assignment
  • 🔍 Advanced filtering — search cards by keyword, filter by status (Pending/Completed) and priority (High/Moderate/Low)
  • ↕️ Reorder lists and cards across lists with optimistic UI updates

Authentication & Security

  • 🔐 Full auth via Better Auth — email/password, Google OAuth, GitHub OAuth, and magic link login
  • ✉️ Email verification with Nodemailer integration
  • 🔑 Password reset flow with secure token-based links
  • 🛡️ Rate limiting to prevent abuse
  • 🧑‍💼 Role-based access control — User and Admin roles with fine-grained permissions

Workspace & Team Collaboration

  • 🏢 Multi-workspace support — create and manage multiple workspaces
  • 👥 Team members management with Admin and Member roles
  • ⚙️ Workspace settings — rename, update URL slug, add description, or delete

Admin Panel

  • 🔧 Dedicated admin dashboard for user management
  • 🚫 Ability to ban/unban users with reasons and expiration
  • 🗑️ Admin-level user deletion

Additional Features

  • 📊 Audit logs — track create, update, and delete actions across boards, lists, and cards
  • 📈 Usage limits per workspace (configurable board limits)
  • 🌗 Sleek dark mode UI throughout
  • 📱 Fully responsive — mobile-friendly sidebar with hamburger navigation
  • 🔔 Beautiful toast notifications via Sonner
  • 📄 Pricing page with Starter, Professional, and Enterprise tiers
  • 🖼️ Templates page for quick-start board creation

🛠️ Tech Stack

Layer Technology
Framework Next.js 16 (App Router, Server Actions)
Language TypeScript 5
UI Library React 19
Styling Tailwind CSS 4
Component Library Radix UI (Dialog, Dropdown, Select, Tabs, Tooltip, etc.)
Database PostgreSQL (via Neon)
ORM Prisma 6
Authentication Better Auth (Email, Google OAuth, GitHub OAuth, Magic Link)
Password Hashing Argon2 via @node-rs/argon2
Form Handling React Hook Form + Zod
Drag & Drop @hello-pangea/dnd
Charts Recharts
Email Nodemailer
Image API Unsplash via unsplash-js
Icons Lucide React
Notifications Sonner
Analytics Vercel Analytics
Linting ESLint 9

📦 Prerequisites

Make sure you have the following installed before setting up the project:

Tool Version Installation
Node.js >=18.0.0 Download
npm >=9.0.0 Comes with Node.js
Git Latest Download
PostgreSQL Any (cloud recommended) Neon / Supabase

🚀 Installation

1. Clone the repository

git clone https://github.com/your-username/taskflow.git
cd taskflow

2. Install dependencies

npm install

3. Set up environment variables

Copy the example environment file and fill in your credentials:

cp .env.example .env

See the Configuration section for details on each variable.

4. Set up the database

Generate the Prisma client and run migrations:

npx prisma generate
npx prisma db push

5. Start the development server

npm run dev

Open http://localhost:3000 in your browser to see the app 🎉

💻 Usage

Development Commands

Command Description
npm run dev Start the dev server
npm run build Build for production
npm start Start the production server
npm run lint Run ESLint

Database Commands

Command Description
npx prisma generate Generate Prisma Client
npx prisma db push Push schema to database
npx prisma migrate dev Create & apply migrations
npx prisma studio Open Prisma Studio (DB GUI)

Workflow

  1. Sign up with email/password, Google, GitHub, or a magic link
  2. Verify your email (check inbox for verification link)
  3. Create a workspace from the dashboard
  4. Create a board — pick a beautiful Unsplash image as the background
  5. Add lists (e.g., "To Do", "In Progress", "Done")
  6. Create cards within lists — add descriptions, set priority, assign due dates
  7. Drag & drop cards between lists or reorder them
  8. Filter cards by status or priority using the board navbar
  9. Invite members to collaborate with your team

📁 Project Structure

taskflow/
├── actions/                  # Server actions (CRUD operations)
│   ├── create-board/         # Board creation with validation
│   ├── create-card/          # Card creation
│   ├── create-list/          # List creation
│   ├── delete-board/         # Board deletion
│   ├── delete-list/          # List deletion
│   ├── update-card/          # Card updates (title, status, priority, etc.)
│   ├── update-card-order/    # Drag & drop card reordering
│   ├── update-list-order/    # Drag & drop list reordering
│   ├── fetch-images.ts       # Unsplash image fetching
│   ├── send-email.action.ts  # Email dispatch via Nodemailer
│   └── sign-*.action.ts      # Auth-related actions
│
├── app/                      # Next.js App Router pages
│   ├── admin/                # Admin dashboard
│   ├── auth/                 # Auth pages (login, register, verify, etc.)
│   ├── board/[boardId]/      # Dynamic board view
│   ├── card/                 # Card detail page
│   ├── dashboard/            # User dashboard (boards overview)
│   ├── members/              # Team members management
│   ├── pricing/              # Pricing page
│   ├── profile/              # User profile
│   ├── settings/             # Workspace & app settings
│   ├── templates/            # Board templates
│   ├── api/                  # API routes
│   ├── layout.tsx            # Root layout
│   ├── page.tsx              # Landing page
│   └── globals.css           # Global styles
│
├── components/               # React components
│   ├── ui/                   # Radix-based UI primitives (Button, Input, Dialog, etc.)
│   ├── form/                 # Form-specific components
│   ├── board-navbar.tsx      # Board toolbar with search & filters
│   ├── card-detail-view.tsx  # Full card detail view with sidebar
│   ├── dashboard-sidebar.tsx # Dashboard navigation sidebar
│   ├── list-container.tsx    # Drag & drop list container
│   ├── list-item.tsx         # Individual list component
│   ├── card-item.tsx         # Individual card component
│   └── ...                   # Landing page sections, auth forms, etc.
│
├── lib/                      # Utility libraries & configuration
│   ├── auth.ts               # Better Auth configuration
│   ├── auth-client.ts        # Client-side auth utilities
│   ├── prisma.ts             # Prisma client singleton
│   ├── permissions.ts        # RBAC access control definitions
│   ├── rate-limit.ts         # Rate limiter implementation
│   ├── argon2.ts             # Password hashing utilities
│   ├── nodemailer.ts         # Email transport config
│   ├── unsplash.ts           # Unsplash API client
│   └── utils.ts              # General helper functions
│
├── prisma/
│   └── schema.prisma         # Database schema (User, Board, List, Card, etc.)
│
├── middleware.ts              # Auth middleware (route protection)
├── next.config.ts             # Next.js configuration
├── package.json               # Dependencies & scripts
└── tsconfig.json              # TypeScript configuration

⚙️ Configuration

Create a .env file in the root directory. Here's a template with all required variables:

# ──────────────────────────────────────────────
# 🗄️ Database (PostgreSQL — Neon / Supabase)
# ──────────────────────────────────────────────
DATABASE_URL="postgresql://user:password@host:5432/database?sslmode=require"

# ──────────────────────────────────────────────
# 🔐 Authentication (Better Auth)
# ──────────────────────────────────────────────
BETTER_AUTH_SECRET=your_random_secret_here      # Generate: openssl rand -base64 32
BETTER_AUTH_URL=http://localhost:3000            # Base URL of your app
NEXT_PUBLIC_API_URL=http://localhost:3000/

# ──────────────────────────────────────────────
# 🧑‍💼 Admin Configuration
# ──────────────────────────────────────────────
ADMIN_EMAILS="admin1@example.com;admin2@example.com;"

# ──────────────────────────────────────────────
# 🔑 OAuth Providers
# ──────────────────────────────────────────────
# Google — https://console.cloud.google.com/
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# GitHub — https://github.com/settings/developers
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# ──────────────────────────────────────────────
# 📧 Email (Nodemailer / Gmail App Password)
# ──────────────────────────────────────────────
NODEMAILER_USER=your_email@gmail.com
NODEMAILER_APP_PASSWORD=your_app_password        # Gmail: Security → App Passwords

# ──────────────────────────────────────────────
# 🖼️ Image API (Unsplash)
# ──────────────────────────────────────────────
UNSPLASH_ACCESS_KEY=your_unsplash_access_key     # https://unsplash.com/developers

Tip

Generating BETTER_AUTH_SECRET: Run openssl rand -base64 32 in your terminal.

Important

Never commit your .env file. It's already included in .gitignore.

🤝 Contributing

Contributions are what make the open-source community amazing. Any contributions you make are greatly appreciated!

Getting Started

  1. Fork the repository
  2. Clone your fork locally 
    git clone https://github.com/your-username/taskflow.git
  3. Create a feature branch 
    git checkout -b feature/amazing-feature
  4. Make your changes and commit them 
    git commit -m "feat: add amazing feature"
  5. Push to your fork 
    git push origin feature/amazing-feature
  6. Open a Pull Request against main

Branch Naming Convention

Prefix Use Case
feature/ New features
fix/ Bug fixes
docs/ Documentation updates
refactor/ Code refactoring
chore/ Maintenance tasks

Commit Convention

We follow Conventional Commits:

feat: add card assignment feature
fix: resolve drag-drop issue on mobile
docs: update installation instructions
refactor: simplify auth middleware logic

Code Style

  • Use TypeScript for all new files
  • Follow the existing ESLint configuration
  • Use Prettier for formatting (if configured)
  • Write meaningful commit messages
  • Keep PRs focused and small

📄 License

Distributed under the MIT License. See LICENSE for more information.

MIT License

Copyright (c) 2025 Bipul Chamoli

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

📬 Contact & Acknowledgements

Author

Bipul Chamoli

Acknowledgements

A huge thanks to the open-source projects and services that make TaskFlow possible:

  • Next.js — The React framework for the web
  • Better Auth — Authentication for the modern web
  • Prisma — Next-generation ORM for Node.js & TypeScript
  • Radix UI — Unstyled, accessible UI primitives
  • Tailwind CSS — Utility-first CSS framework
  • Unsplash — Beautiful free images & photos
  • Lucide — Beautiful & consistent icon toolkit
  • @hello-pangea/dnd — Drag and drop for lists
  • Neon — Serverless PostgreSQL
  • Vercel — Deployment platform

⭐ If you found this project helpful, please consider giving it a star! ⭐

Made with ❤️ by Bipul Chamoli

About

taskflow-sandy-beta.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages