Skip to main content

Getting Started with FS Garage Gantt (FE)

Prerequisites​

  • Node.js 20+
  • npm / yarn / pnpm / bun
  • Access to TeamFleetStudio/base-fs-garage-fe
  • Local or remote PocketBase URL with at least one project that has tasks with planned/actual dates

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

Open a project or the tasks page and switch to the Gantt tab (not "Milestone" - see the scope callout in Overview).

Useful scripts​

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

Verification​

  • Switching zoom (Day/Week/Month) rescales the timeline without the bars losing their relative positions
  • A task with both planned and actual dates shows distinct colored segments (blue overlap, green early-start, red late-end) rather than one flat bar - see Architecture
  • The today marker sits at the correct date at every zoom level
  • Resizing or collapsing the left task-list pane doesn't push the timeline off-screen
Seed realistic dates

With no planned/actual dates in your data, the timeline falls back to a narrow default window centered on today - seed a few tasks with real date spreads to see the zoom and segment-coloring behavior properly.

Troubleshooting​

Issue: All bars look identical / no color variance

  • Solution: The task needs both a planned and an actual date range for segment coloring to kick in - a task with only one or the other renders as a single outline or solid bar (see Architecture)

Issue: Timeline looks too wide/narrow, or bars are cramped at the edges

  • Solution: Check timelineBoundary's padding (cellDays × 2 on each side) and timelineWidth's trailing-space term (cellWidth × 21) in GanttView.jsx

Next Steps​