使用说明

看板MCP——Next.js·Django·GraphQL

任务管理应用程序具有拖放式看板板、Eisenhower优先级矩阵、GraphQL API和用于Claude AI集成的MCP服务器。

堆栈： Next.js 15、Django 4.2、TypeScript、Material UI、Apollo客户端、Ariadne（GraphQL）

注：这是一个概念验证/MVP项目，展示了现代全栈开发。在Claude Code的协助下建造。

截图

Kanban Board	Eisenhower Matrix
_{🔍 View full size}	_{🔍 View full size}
Claude Desktop (MCP Client)
_{🔍 View full size}

1.快速入门

# Recommended: Using Makefile
make setup      # First-time setup (creates .env, builds containers, runs migrations)
make up         # Start services

# Or with Docker directly
docker-compose up --build

# Or run services separately (without Docker)
cd backend && pip install -r requirements.txt && python manage.py migrate && python manage.py runserver
cd frontend && npm install && npm run dev

前端：http://localhost:3000
GraphQL API：http://localhost:8000/graphql

视窗：需要 WSL2 或 choco install make 对于Makefile命令

2.特点

使用看板和艾森豪威尔矩阵进行双视图任务管理，具有拖放界面、基于优先级的工作流程和通过MCP服务器集成Claude AI的特点。

📋 Task Management

双视图模式：看板+艾森豪威尔矩阵
优先级系统（P1-P4）：先做→ 日程→ 快赢→ 待办事项
状态工作流：TODO→ 做→ 等待→ DONE
带#前缀的类别标记（#前端、#后端等）
在列和优先级象限之间拖放

🔍 Filtering & Search

在两个视图中按优先级（P1-P4）筛选
在两个视图中按状态（待办、正在进行、等待、完成）筛选
通过多选按类别筛选
在标题、描述和类别之间进行全文搜索

🤖 AI Integration

用于Claude Desktop集成的MCP（模型上下文协议）服务器
通过Claude AI进行自然语言任务管理
基于FastMCP的GraphQL协调实现

3.MCP服务器集成

通过任何方式管理任务 MCP兼容客户端（克劳德桌面、光标等）。

工具： list_tasks · create_task · update_task · delete_task

Claude Desktop config example

{
  "mcpServers": {
    "kanban": {
      "command": "python",
      "args": ["-m", "integrations.mcp.server"],
      "cwd": "/absolute/path/to/backend"
    }
  }
}

看 backend/integrations/mcp/README.md HTTP部署选项。

4.建筑

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#fff', 'primaryTextColor': '#1e293b', 'primaryBorderColor': '#e2e8f0', 'lineColor': '#64748b', 'secondaryColor': '#f8fafc', 'tertiaryColor': '#f1f5f9'}}}%%
graph TB
    subgraph Presentation["🎨 Presentation Layer"]
        Browser["🌐 <b>Web Browser</b>"]
        Claude["🤖 <b>Claude Desktop</b>"]
    end

    subgraph Application["⚙️ Application Layer (Docker)"]
        subgraph Frontend["Frontend Container"]
            NextApp["<b>Next.js</b><br/>Apollo · Material UI"]
        end

        subgraph Backend["Backend Container"]
            GraphQL["<b>GraphQL API</b><br/>Ariadne"]
            MCPServer["<b>MCP Server</b><br/>FastMCP"]
            RootSchema["<b>Root Schema</b><br/>Query + Mutation"]
        end
    end

    subgraph Domain["🧩 Domain Layer"]
        CoreApp["<b>Core App</b><br/>Shared Base"]
        KanbanApp["<b>Kanban App</b><br/>Task Model"]
    end

    subgraph Infrastructure["🗄️ Infrastructure Layer"]
        ORM["<b>Django ORM</b>"]
        DB[("<b>SQLite</b>")]
    end

    %% Connections
    Browser -->|"HTTP"| NextApp
    NextApp -->|"GraphQL"| GraphQL
    Claude -->|"MCP"| MCPServer

    GraphQL --> RootSchema
    RootSchema -.->|"schema composition"| KanbanApp
    MCPServer --> KanbanApp
    KanbanApp -.->|"extends"| CoreApp

    KanbanApp --> ORM
    CoreApp --> ORM
    ORM --> DB

    %% Styling
    style Browser fill:#ede9fe,stroke:#8b5cf6,color:#5b21b6,stroke-width:2px
    style Claude fill:#ede9fe,stroke:#8b5cf6,color:#5b21b6,stroke-width:2px
    style NextApp fill:#fef3c7,stroke:#f59e0b,color:#92400e,stroke-width:2px
    style GraphQL fill:#d1fae5,stroke:#10b981,color:#065f46,stroke-width:2px
    style MCPServer fill:#d1fae5,stroke:#10b981,color:#065f46,stroke-width:2px
    style RootSchema fill:#d1fae5,stroke:#10b981,color:#065f46
    style CoreApp fill:#fecaca,stroke:#ef4444,color:#991b1b
    style KanbanApp fill:#fecaca,stroke:#ef4444,color:#991b1b,stroke-width:2px
    style ORM fill:#dbeafe,stroke:#3b82f6,color:#1e40af,stroke-width:2px
    style DB fill:#dbeafe,stroke:#3b82f6,color:#1e40af,stroke-width:2px

    style Presentation fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
    style Application fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
    style Frontend fill:#fffbeb,stroke:#f59e0b,stroke-dasharray:5 5
    style Backend fill:#ecfdf5,stroke:#10b981,stroke-dasharray:5 5
    style Domain fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
    style Infrastructure fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px

分层架构： 演示文稿（客户）→ 应用程序（API）→ 域（业务逻辑）→ 基础设施（数据）。一个后端有两个接口：浏览器通过GraphQL进行模式组合，Claude通过MCP进行直接模型访问。

5.技术栈

类别	技术
后端
前端
API层
基础设施
人工智能集成
开发者工具

6.项目结构

后端（Django）

backend/
├── apps/
│   ├── core/                  # Shared base models (TimeStampedModel)
│   └── kanban/                # Kanban feature app
│       ├── models.py          # Task model
│       ├── graphql/           # Ariadne GraphQL (schema-first)
│       │   ├── schema.graphql # SDL schema (source of truth)
│       │   ├── types.py       # Scalar + enum bindings
│       │   ├── queries.py     # allTasks resolver
│       │   └── mutations.py   # CRUD resolvers
│       ├── tests/             # Model + API tests
│       └── management/        # seed_tasks command
├── config/                    # Project configuration
│   ├── settings.py            # Django settings
│   ├── urls.py                # URL routing (/graphql)
│   └── schema.py              # Root GraphQL schema
├── integrations/mcp/          # MCP server for Claude AI
├── scripts/                   # Utility scripts
└── tests/                     # Integration tests

前端（Next.js）

frontend/src/
├── app/                       # Next.js App Router (layout, pages)
├── components/
│   └── kanban/                # Kanban feature module
│       ├── config/            # Column & priority configs
│       ├── hooks/             # Custom hooks (useTaskDialog)
│       ├── Task/              # TaskCard, TaskDialog
│       ├── Board.tsx          # Main orchestrator
│       ├── KanbanColumn.tsx   # Column with drag-drop
│       ├── FilterBar.tsx      # Filters + view toggle
│       ├── EisenhowerMatrix.tsx
│       └── types.ts           # Shared types & enums
├── graphql/                   # Apollo Client layer
│   ├── ApolloWrapper.tsx      # Apollo Client provider
│   ├── generated.ts           # Auto-generated types (Codegen)
│   ├── queries.ts             # GraphQL queries
│   └── mutations.ts           # GraphQL mutations
└── theme/                     # Material UI theme

根

├── docker-compose.yml         # Services orchestration
├── Makefile                   # Development shortcuts
└── .pre-commit-config.yaml    # Code quality hooks

7.发展

命令	描述
`make setup`	首次项目设置
`make up` / `make down`	启动/停止Docker服务
`make test`	运行所有测试（单元+集成+E2E）
`make lint`	自动修复掉毛问题
`make codegen`	从GraphQL模式重新生成TypeScript类型
`make logs` / `make shell`	查看日志/Dango shell

GraphQL游乐场: http://localhost:8000/graphql--查询、创建、更新、删除任务。

视窗：使用 WSL2 或 choco install make

8.测试

测试奖杯 方法——优先考虑集成测试，以最小的维护获得最大的置信度。

图层	测试	工具
🎭 E2E	1	剧作家
🧪 整合	37	小丑+RTL
🔬 单元	32	Django
📏 静态	--	TypeScript、ESLint、Ruff

make test       # Run all tests (unit + integration + e2e)
make check      # Full CI validation

9.预提交钩子

每次提交前自动进行代码质量检查。

pip install pre-commit && pre-commit install   # Setup (one-time)
make precommit                                  # Run manually
make lint                                       # Auto-fix issues

10.持续集成和部署

自动质量门通过并行验证和分阶段部署确保代码质量和部署安全。

graph LR
    A[💾 Commit] --> B[🔍 CI Pipeline]
    B --> C{Quality Gates}
    C -->|Lint| D[✓ Backend Ruff]
    C -->|Lint| E[✓ Frontend ESLint]
    C -->|Test| F[✓ Django Tests]
    C -->|Test| G[✓ Jest Tests]
    C -->|E2E| P[✓ Playwright]
    C -->|Build| H[✓ Docker Images]
    D --> I[🏗️ Build Artifacts]
    E --> I
    F --> I
    G --> I
    P --> I
    H --> I
    I --> J[🚀 Deploy Staging]
    J --> K[👤 Manual Approval]
    K --> L[🌐 Production]

    style A fill:#e1f5ff,stroke:#01579b
    style B fill:#fff9c4,stroke:#f57f17
    style C fill:#fff3e0,stroke:#e65100
    style I fill:#e8f5e9,stroke:#2e7d32
    style J fill:#f3e5f5,stroke:#4a148c
    style L fill:#c8e6c9,stroke:#1b5e20

质量验证： 后端/前端linting、单元测试、E2E测试（Playwright）、TypeScript检查、Docker构建 部署： 暂存自动部署→ 手动生产批准和健康检查

11.部署

部署功能：

自动化CI/CD流水线(.github/workflows/)
带有健康检查的Docker多阶段构建
基于环境的配置（12因素应用程序）

部署到：

云：AWS ECS、GCP云运行、Azure容器实例
平台即服务：Vercel（前端）+渲染/铁路（后端）
自托管：Docker使用Nginx反向代理编写

# Production build
docker-compose -f docker-compose.prod.yml up --build

12.许可证

MIT许可证

看板任务管理应用

使用说明

看板MCP——Next.js·Django·GraphQL

截图

目录

1.快速入门

2.特点

3.MCP服务器集成

4.建筑

5.技术栈

6.项目结构

后端（Django）

前端（Next.js）

根

7.发展

8.测试

9.预提交钩子

10.持续集成和部署

11.部署

12.许可证

#	章节
1	快速开始
2	特性
3	MCP服务器
4	建筑
5	技术栈
6	项目结构
7	发展
8	测试
9	预提交钩子
10	CI/CD
11	部署
12	许可证

使用说明

看板MCP——Next.js·Django·GraphQL

截图

目录

1.快速入门

2.特点

3.MCP服务器集成

4.建筑

5.技术栈

6.项目结构

后端（Django）

前端（Next.js）

根

7.发展

8.测试

9.预提交钩子

10.持续集成和部署

11.部署

12.许可证

相关 MCP

规范工作流管理工具

协议桥接服务器

智能记忆与任务管理服务器

任务与记忆管理服务器

任务管理工具

任务管理服务