KanbanFlow AI

KanbanFlow AI is a robust, production-ready Kanban task management application supercharged with AI capabilities. Built specifically for modern engineering teams, it supports structured task tracking and autonomous project management assistance.

Features

• Role-Based Access Control: Separate portals for Admins (Project Managers) and Team Members (Developers).
• Visual Kanban Board: An intuitive, drag-and-drop board powered by dnd-kit.
• AI Scope Expander: Transform vague task ideas ("Build auth") into detailed technical subtasks, acceptance criteria, and blocker analysis instantly using Google Gemini.
• Autonomous PM Agent: A simulated background process that monitors stalled tasks, automatically reassigns them to unblock progress, flags them as blockers, and posts comments.
• Real-Time Analytics Dashboard: comprehensive charts built with Recharts displaying task completion rates, workload distribution, and status breakdowns.
• Task History & Threaded Comments: Complete transparency on every action taken on a task.
• Modern UI/UX: Responsive data table, ShadCN UI components, Dark/Light Mode, and refined aesthetics.

Tech Stack

• Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS, ShadCN UI
• Backend/DB: Supabase (PostgreSQL), Supabase Auth
• AI Integration: Google Gemini API (@google/genai)
• Drag & Drop: @dnd-kit/core
• Charts: Recharts

Getting Started

1. Requirements

• Node.js 18+
• npm or pnpm
• A Supabase Project
• A Google Gemini API Key

2. Environment Variables

Create a `.env.local` file in the root of the project with the following:

```env NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

GEMINI_API_KEY=your_gemini_api_key ```

(Note: During development/hackathon the environment variables file is already provided in the repo).

3. Database Setup (Crucial Step)

You must initialize the database schema in your Supabase project.

1. Go to your Supabase Dashboard.
2. Navigate to the SQL Editor.
3. Open the file `supabase_schema.sql` included in the root of this project.
4. Copy its entire content, paste it into the Supabase SQL Editor, and click RUN.

This will create all the necessary tables (boards, profiles, tasks, etc.), set up the RLS policies, configure triggers for history tracking, and insert a default board.

4. Installation

Run the following command to install dependencies:

```bash npm install ```

5. Running the Application

Start the development server:

```bash npm run dev ```

Navigate to `http://localhost:3000\`.

Usage & Roles

1. Sign Up: Create two accounts (e.g., one as "Admin" and one as "Member"). The signup flow will ask you to select a role.
2. Admin Portal: Log in with the admin account. You will see the full analytics dashboard, be able to create tasks, and click "Run AI Audit" to test the autonomous PM agent on stalled tasks.
3. Team Portal: Log in with the member account. You will only see the tasks assigned to you.
4. AI Features: Click on any task to open the Task Detail Dialog. Click "Expand Scope" to use Gemini to generate subtasks and criteria.

🎥 Demo Video

Watch Demo

License

MIT