# hizkiagopas/nextjs-kanban-taskmanager architecture

> Architecture diagram of the GitHub repository hizkiagopas/nextjs-kanban-taskmanager, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hizkiagopas/nextjs-kanban-taskmanager
- Repository: https://github.com/hizkiagopas/nextjs-kanban-taskmanager

## Overview

This is a full-stack Kanban task manager. A user works with the board in the browser to create and view tasks, move them among To Do, In Progress, and Done, and delete them. The page calls the collection API for reads and creation and the item API for status updates and deletion. Those handlers connect to MongoDB through the cached connection helper and use the task model for persistence. The README documents the board, dynamic counts, and priority styling; the page excerpt shows those presentation features but omits some request-handler code, so only documented CRUD wiring is represented.

Main entry points: [`app/page.tsx`](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/page.tsx) (Kanban board), [`app/api/tasks/route.ts`](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/api/tasks/route.ts) (Task collection API), [`app/api/tasks/[id]/route.ts`](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/api/tasks/%5Bid%5D/route.ts) (Task item API), [`lib/db.ts`](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/lib/db.ts) (DB connection cache)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Board interface"]
  node_board["Kanban board<br/>[page.tsx]"]
  node_layout["Root layout<br/>[layout.tsx]"]
end

subgraph group_api["Task API"]
  node_collection["Task collection API<br/>[route.ts]"]
  node_item["Task item API<br/>[route.ts]"]
end

subgraph group_persistence["MongoDB persistence"]
  node_connection["DB connection cache<br/>[db.ts]"]
  node_taskmodel["Task model<br/>[Task.ts]"]
end

node_user(("User"))
node_mongodb[("MongoDB")]

node_user -->|"opens"| node_layout
node_layout -->|"renders"| node_board
node_board -->|"reads and creates"| node_collection
node_board -->|"updates and deletes"| node_item
node_collection -->|"connects through"| node_connection
node_item -->|"connects through"| node_connection
node_collection -->|"queries and creates"| node_taskmodel
node_item -->|"updates and deletes"| node_taskmodel
node_connection -->|"connects to"| node_mongodb
node_taskmodel -->|"persists tasks"| node_mongodb

click node_board "https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/page.tsx"
click node_layout "https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/layout.tsx"
click node_collection "https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/api/tasks/route.ts"
click node_item "https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/api/tasks/%5Bid%5D/route.ts"
click node_connection "https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/lib/db.ts"
click node_taskmodel "https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/models/Task.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_board,node_layout,node_user toneBlue
class node_collection,node_item,node_mongodb toneAmber
class node_connection,node_taskmodel toneMint
```

## Components

### Board interface

- [Kanban board](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/page.tsx): `app/page.tsx`
- [Root layout](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/layout.tsx): `app/layout.tsx`

### Task API

- [Task collection API](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/api/tasks/route.ts): `app/api/tasks/route.ts`
- [Task item API](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/app/api/tasks/%5Bid%5D/route.ts): `app/api/tasks/[id]/route.ts`

### MongoDB persistence

- [DB connection cache](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/lib/db.ts): `lib/db.ts`
- [Task model](https://github.com/hizkiagopas/nextjs-kanban-taskmanager/blob/main/models/Task.ts): `models/Task.ts`

### Other components

- **User**
- **MongoDB**

## Connections

- User → Root layout: opens
- Root layout → Kanban board: renders
- Kanban board → Task collection API: reads and creates
- Kanban board → Task item API: updates and deletes
- Task collection API → DB connection cache: connects through
- Task item API → DB connection cache: connects through
- Task collection API → Task model: queries and creates
- Task item API → Task model: updates and deletes
- DB connection cache → MongoDB: connects to
- Task model → MongoDB: persists tasks