TCC - Trello Command Center

Personal project management dashboard powered by Trello API.

Setup

1. Clone the repository
2. Install dependencies:

   npm install
   

3. Copy .env.example to .env.local and fill in your Trello credentials:

   cp .env.example .env.local
   

4. Get your API key from Trello Power-Ups Admin
5. Generate a token:

   https://trello.com/1/authorize?expiration=never&scope=read,write&response_type=token&key=YOUR_API_KEY
   

6. Verify connection:

   npm run verify
   

7. Start development server:

   npm run dev
   

Trello Power-Up Setup

To add the TCC Power-Up to your Trello boards:

1. Go to trello.com/power-ups/admin
2. Create a new Power-Up (or edit existing)
3. Set the Iframe Connector URL to:

   https://YOUR_DEPLOYED_URL/power-up/connector.html
   

   (Must be served over HTTPS - use your Vercel deployment URL)
4. Enable the capabilities: board-buttons, card-buttons, show-settings
5. The Power-Up adds "Open in TCC" buttons to your boards and cards

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript (strict)
• Styling: Tailwind CSS 4
• State: TanStack React Query + Zustand
• Charts: Recharts
• Deploy: Vercel (free tier)

Project Structure

• src/app/api/trello/ - API proxy routes (protects credentials)
• src/app/dashboard/ - Dashboard pages
• src/components/ - Reusable UI components
• src/lib/trello/ - Trello API client and types
• src/lib/hooks/ - React Query hooks
• src/lib/stores/ - Zustand state stores
• public/power-up/ - Trello Power-Up connector files

AI-Managed Workflow

Manage the board via chat without opening Trello:

# Add a task
npx tsx scripts/add-task.ts "Nama task" --list="14 Jun 2026" --label="bangkim"

# Optimize / clean the board
npx tsx scripts/optimize-todo-board.ts

# Rotate daily lists every Friday
npx tsx scripts/rotate-daily-lists.ts

See TRELLO_SETUP.md for the full workflow and board philosophy.