# code-with-antonio/nextjs-trello-clone architecture

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

- Interactive diagram: https://gitdiagram.com/code-with-antonio/nextjs-trello-clone
- Repository: https://github.com/code-with-antonio/nextjs-trello-clone

## Overview

Taskify is a Trello-style workspace app: users enter an organization, create and manage boards, lists, and cards, and review activity; organizations can subscribe to remove board limits. The graph includes the documented auth, Unsplash covers, drag-and-drop, activity, and billing capabilities, but source excerpts only confirm selected server-action and API wiring. Unverified UI-to-action and subsystem links are omitted.

Main entry points: [`lib/db.ts`](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/db.ts) (Prisma database), [`actions/create-board/index.ts`](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-board/index.ts) (Board actions), [`lib/create-audit-log.ts`](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/create-audit-log.ts) (Audit log helper), [`actions/create-list/index.ts`](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-list/index.ts) (List actions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and identity"]
  node_marketing["Landing page<br/>[page.tsx]"]
  node_identity["Sign-in and org selection<br/>[page.tsx]"]
end

subgraph group_boards["Workspace and boards"]
  node_orgs["Organization workspace<br/>[page.tsx]"]
  node_orgboards["Organization board list<br/>[board-list.tsx]"]
  node_boardpage["Board view<br/>[page.tsx]"]
  node_boardui["Lists and cards UI<br/>[list-container.tsx]"]
  node_boardactions["Board actions<br/>[index.ts]"]
  node_listactions["List actions<br/>[index.ts]"]
  node_cardactions["Card actions<br/>[index.ts]"]
  node_cardapi["Card detail API<br/>[route.ts]"]
end

subgraph group_activity["Activity tracking"]
  node_audit["Audit log helper"]
  node_activitypage["Organization activity<br/>[page.tsx]"]
  node_cardlogs["Card activity API<br/>[route.ts]"]
end

subgraph group_billing["Plans and billing"]
  node_billingpage["Billing page<br/>[page.tsx]"]
  node_stripeaction["Subscription redirect<br/>[index.ts]"]
  node_webhook["Stripe webhook<br/>[route.ts]"]
  node_limits["Board limits<br/>[org-limit.ts]"]
  node_subscription["Subscription check<br/>[subscription.ts]"]
end

subgraph group_runtime["Shared runtime"]
  node_database[("Prisma database<br/>[db.ts]")]
end

node_user(("Workspace user"))
node_clerk{{"Clerk auth"}}
node_stripe{{"Stripe"}}
node_unsplash{{"Unsplash API"}}

node_user -->|"visits"| node_marketing
node_user -->|"signs in"| node_identity
node_identity -->|"authenticates"| node_clerk
node_user -->|"opens workspace"| node_orgs
node_orgs -->|"shows boards"| node_orgboards
node_user -->|"opens board"| node_boardpage
node_boardpage -->|"renders"| node_boardui
node_boardactions -->|"creates board"| node_database
node_boardactions -->|"checks and increments"| node_limits
node_boardactions -->|"checks plan"| node_subscription
node_boardactions -->|"records activity"| node_audit
node_listactions -->|"reads and writes lists"| node_database
node_listactions -->|"records activity"| node_audit
node_cardactions -->|"reads and writes cards"| node_database
node_cardactions -->|"records activity"| node_audit
node_cardapi -->|"reads card"| node_database
node_cardlogs -->|"reads audit logs"| node_database
node_activitypage -.->|"loads activity"| node_database
node_user -->|"opens billing"| node_billingpage
node_stripeaction -->|"reads subscription"| node_database
node_stripeaction -->|"creates billing session"| node_stripe
node_webhook -->|"verifies and retrieves"| node_stripe
node_webhook -->|"writes subscription"| node_database
node_boardactions -.->|"uses cover metadata"| node_unsplash

click node_marketing "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(marketing)/page.tsx"
click node_identity "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(clerk)/sign-in/%5B%5B...sign-in%5D%5D/page.tsx"
click node_orgs "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/page.tsx"
click node_orgboards "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/_components/board-list.tsx"
click node_boardpage "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/board/%5BboardId%5D/page.tsx"
click node_boardui "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/board/%5BboardId%5D/_components/list-container.tsx"
click node_boardactions "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-board/index.ts"
click node_listactions "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-list/index.ts"
click node_cardactions "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-card/index.ts"
click node_cardapi "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/api/cards/%5BcardId%5D/route.ts"
click node_audit "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/create-audit-log.ts"
click node_activitypage "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/activity/page.tsx"
click node_cardlogs "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/api/cards/%5BcardId%5D/logs/route.ts"
click node_billingpage "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/billing/page.tsx"
click node_stripeaction "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/stripe-redirect/index.ts"
click node_webhook "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/api/webhook/route.ts"
click node_limits "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/org-limit.ts"
click node_subscription "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/subscription.ts"
click node_database "https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/db.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_marketing,node_identity,node_user toneBlue
class node_orgs,node_orgboards,node_boardpage,node_boardui,node_boardactions,node_listactions,node_cardactions,node_cardapi toneAmber
class node_audit,node_activitypage,node_cardlogs,node_unsplash toneMint
class node_billingpage,node_stripeaction,node_webhook,node_limits,node_subscription toneRose
class node_database,node_clerk,node_stripe toneIndigo
```

## Components

### App and identity

- [Landing page](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(marketing)/page.tsx): `app/(marketing)/page.tsx`
- [Sign-in and org selection](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(clerk)/sign-in/%5B%5B...sign-in%5D%5D/page.tsx): `app/(platform)/(clerk)/sign-in/[[...sign-in]]/page.tsx`

### Workspace and boards

- [Organization workspace](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/page.tsx): `app/(platform)/(dashboard)/organization/[organizationId]/page.tsx`
- [Organization board list](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/_components/board-list.tsx): `app/(platform)/(dashboard)/organization/[organizationId]/_components/board-list.tsx`
- [Board view](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/board/%5BboardId%5D/page.tsx): `app/(platform)/(dashboard)/board/[boardId]/page.tsx`
- [Lists and cards UI](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/board/%5BboardId%5D/_components/list-container.tsx): `app/(platform)/(dashboard)/board/[boardId]/_components/list-container.tsx`
- [Board actions](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-board/index.ts): `actions/create-board/index.ts`
- [List actions](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-list/index.ts): `actions/create-list/index.ts`
- [Card actions](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/create-card/index.ts): `actions/create-card/index.ts`
- [Card detail API](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/api/cards/%5BcardId%5D/route.ts): `app/api/cards/[cardId]/route.ts`

### Activity tracking

- [Audit log helper](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/create-audit-log.ts): `lib/create-audit-log.ts`
- [Organization activity](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/activity/page.tsx): `app/(platform)/(dashboard)/organization/[organizationId]/activity/page.tsx`
- [Card activity API](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/api/cards/%5BcardId%5D/logs/route.ts): `app/api/cards/[cardId]/logs/route.ts`

### Plans and billing

- [Billing page](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/(platform)/(dashboard)/organization/%5BorganizationId%5D/billing/page.tsx): `app/(platform)/(dashboard)/organization/[organizationId]/billing/page.tsx`
- [Subscription redirect](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/actions/stripe-redirect/index.ts): `actions/stripe-redirect/index.ts`
- [Stripe webhook](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/app/api/webhook/route.ts): `app/api/webhook/route.ts`
- [Board limits](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/org-limit.ts): `lib/org-limit.ts`
- [Subscription check](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/subscription.ts): `lib/subscription.ts`

### Shared runtime

- [Prisma database](https://github.com/code-with-antonio/nextjs-trello-clone/blob/master/lib/db.ts): `lib/db.ts`

### Other components

- **Workspace user**
- **Clerk auth**
- **Stripe**
- **Unsplash API**

## Connections

- Workspace user → Landing page: visits
- Workspace user → Sign-in and org selection: signs in
- Sign-in and org selection → Clerk auth: authenticates
- Workspace user → Organization workspace: opens workspace
- Organization workspace → Organization board list: shows boards
- Workspace user → Board view: opens board
- Board view → Lists and cards UI: renders
- Board actions → Prisma database: creates board
- Board actions → Board limits: checks and increments
- Board actions → Subscription check: checks plan
- Board actions → Audit log helper: records activity
- List actions → Prisma database: reads and writes lists
- List actions → Audit log helper: records activity
- Card actions → Prisma database: reads and writes cards
- Card actions → Audit log helper: records activity
- Card detail API → Prisma database: reads card
- Card activity API → Prisma database: reads audit logs
- Organization activity → Prisma database: loads activity
- Workspace user → Billing page: opens billing
- Subscription redirect → Prisma database: reads subscription
- Subscription redirect → Stripe: creates billing session
- Stripe webhook → Stripe: verifies and retrieves
- Stripe webhook → Prisma database: writes subscription
- Board actions → Unsplash API: uses cover metadata