Step 19 - templates

1 min read

Add board templates.

  • boardTemplates documents embed elements: BoardElement[] directly (single-fetch reads; no subcollection - this asymmetry with live boards is intentional).
  • "Save as template" from the canvas menu: snapshot the whole board (or just the selection) into a new template for my org.
  • Template gallery at /boards/templates: cards with thumbnails (reuse renderBoardPreview on the embedded array), "use template" creates a new board seeded with clones of the template's elements (fresh ids + connection remap) and navigates to it.
  • Built-in starter templates defined in code (builtIn: true, merged client-side into the gallery - NOT stored in Firestore): SWOT quadrants, retrospective 3-column and 4-column, kanban lanes, business model canvas, prioritization matrix (2x2), user journey rows, mind-map starter, fishbone, pros/cons - each authored as a small BoardElement[] of frames + notes with i18n-ready titles.
  • Template editing: route /board/template/:templateId opens the SAME canvas component in template mode; persistence swaps to debounced (500 ms) full-array writes of the embedded elements field instead of per-element documents. Abstract this behind persistAdd/persistUpdate/persistDelete so the canvas code does not branch.

Acceptance: save a board as a template, edit the template on the canvas, create a new board from it and from a built-in seed; connections and layout arrive intact.

Discussion

0 comments

No comments yet. Start the discussion.