Skip to main content

Getting Started with FS Garage Kanban (FE)

Prerequisites​

  • Node.js 20+
  • npm / yarn / pnpm / bun
  • Access to TeamFleetStudio/base-fs-garage-fe
  • Local or remote PocketBase URL (typically http://127.0.0.1:8091) with at least one project and a few tasks seeded

Installation​

Step 1: Clone​

git clone https://github.com/TeamFleetStudio/base-fs-garage-fe.git
cd base-fs-garage-fe

Step 2: Install dependencies​

npm install

Step 3: Configure environment​

NEXT_PUBLIC_POCKETBASE_URL=http://127.0.0.1:8091

Step 4: Run​

npm run dev

Sign in, open a project, and switch to its Kanban/task board view.

Useful scripts​

ScriptPurpose
npm run devLocal Next.js (Turbopack)
npm run build / npm startProduction build/serve
npm testVitest

Verification​

  • Tasks appear in the correct column based on their status (cross-check against STATUS_CONFIG in configs/tasks/general/status.js)
  • Dragging a card within a column reorders it without a full page reload
  • Dragging a card to a different column updates its status to that column's representative value (see the column-to-status table in Architecture)
  • Killing the network mid-drag and dropping a card shows the card snap back to its original position (rollback path)
Shared task data

Kanban reads/writes the same tasks collection as the rest of FS Garage - there's no separate seed data or schema just for the board.

Troubleshooting​

Issue: A card doesn't appear in any column

  • Solution: Its status value isn't listed in any STATUS_CONFIG group - check for a typo'd or new status that hasn't been added to a column yet

Issue: Reordering "sticks" in the wrong place after a drag

  • Solution: Check calculateOrderIndex's three branches (top/bottom/between) in KanbanBoard.jsx - a common cause is the dragged task not being excluded from the destination list when reordering within the same column

Next Steps​