How code-with-antonio/nextjs-trello-clone works
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: db.ts Prisma database · create-board/index.ts Board actions · create-audit-log.ts Audit log helper · create-list/index.ts List actions
Components 23
App and identity
- Landing page
app/(marketing)/page.tsx - Sign-in and org selection
app/(platform)/(clerk)/sign-in/[[...sign-in]]/page.tsx
Workspace and boards
- Organization workspace
app/(platform)/(dashboard)/organization/[organizationId]/page.tsx - Organization board list
app/(platform)/(dashboard)/organization/[organizationId]/_components/board-list.tsx - Board view
app/(platform)/(dashboard)/board/[boardId]/page.tsx - Lists and cards UI
app/(platform)/(dashboard)/board/[boardId]/_components/list-container.tsx - Board actions
actions/create-board/index.ts - List actions
actions/create-list/index.ts - Card actions
actions/create-card/index.ts - Card detail API
app/api/cards/[cardId]/route.ts
Activity tracking
- Audit log helper
lib/create-audit-log.ts - Organization activity
app/(platform)/(dashboard)/organization/[organizationId]/activity/page.tsx - Card activity API
app/api/cards/[cardId]/logs/route.ts
Plans and billing
- Billing page
app/(platform)/(dashboard)/organization/[organizationId]/billing/page.tsx - Subscription redirect
actions/stripe-redirect/index.ts - Stripe webhook
app/api/webhook/route.ts - Board limits
lib/org-limit.ts - Subscription check
lib/subscription.ts
Shared runtime
- Prisma database
lib/db.ts
Other components
- Workspace user
- Clerk auth
- Stripe
- Unsplash API
Connections 24
- 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